Share
Less.CSS blir et populært verktøy for å lage stilark "dynamisk". Jeg har jobbet med å integrere Less.CSS med WordPress for en stund nå, så i dag skal vi se på en kort veiledning om hvordan du kommer i gang med å bruke den og BluePrint CSS-rammeverket for en raskere arbeidsflyt i WordPress.
Jeg vet hva du tenker, men beklager folk, det betyr ikke at du bare skriver LESS kode. Hvor mange ganger har du jobbet med et prosjekt og ønsket at du kunne forenkle ting ved å inkludere en funksjon i CSS-filen din, bruke noen variabler til å endre farger eller andre egenskaper eller annen programmering som teknikker? Med mindre CSS kan ønsket omdannes til virkelighet.
Mindre er et CSS-verktøy som gjør at du kan øke hastigheten og forenkle utviklingen ved å la deg bruke variabler, arv (via mixins), funksjoner (operasjoner) og mer. I et nøtteskall, gir mindre CSS deg muligheten til å blande programmeringsteknikker med CSS. Nok snakk om. La oss komme i gang!
Mindre kommer i to hoved smaker, en kompilert versjon og en JavaScript-drevet versjon. For formålet med vår diskusjon skal vi fokusere på kompilert versjon. Jeg har valgt å fokusere på denne versjonen, hovedsakelig fordi jeg ikke liker å inkludere filer på nettstedet mitt som jeg ikke trenger å. Tross alt, hver fil som nettstedet ditt trenger å fungere og se attraktivt, får nettstedet til å lastes litt langsommere.
Slik fungerer det som følger: Du besøker følgende lenke og laster ned appen for Mac. Beklager Windows-brukere, det er bare Mac, så denne versjonen av opplæringen vil bare fungere for Mac-brukere. Når du laster ned appen, må du konfigurere nettstedet ditt (som jeg vil dekke nedenfor).
Vi vil dekke mye innhold i denne opplæringen. Jeg tror på å jobbe så effektivt som mulig med de beste verktøyene som er tilgjengelige. Av denne grunn vil vi ansette WordPress og Blåkopi å jobbe med dette prosjektet. Før du går videre til neste trinn, fortsett og last ned Blueprint Framework.
Den eneste filen vi skal bruke er screen.css siden det kombinerer alle de store filene som utgjør rammen i en fil. Gå videre og finn det og trekk det ut til skrivebordet ditt. Med tanke på korthet tar denne opplæringen ut til at du er kjent med å sette opp WordPress, så vel som grunnlaget for Blueprint. Hvis du trenger mer informasjon om dette, la meg noen kommentarer og jeg vil svare eller vil skrive et innlegg på det. Det er også en informativ tut på Nettuts om Blueprint
For å konfigurere filstrukturen henvises til skjermbildet nedenfor. Dette er hvordan katalogstrukturen din skal se ut, minus css-filene i stilark-mappen. Disse blir automatisk generert for deg når du lagrer en fil.
De viktige tingene som skal tas fra dette skjermbildet er at vi har en styles.css-mappe i temakatalogen i WordPress, noe som gjør litt trickery. Denne filen drar bare inn noen andre filer fra en undermappe via @import-direktivet. Årsaken til dette er at WordPress bruker kommentarene i styles.css å identifisere et tema. Ikke å sette det i tendens til å rote opp ting ganske dårlig. Ved å inkludere filer i styles.css fil via en kompositt natur benytter vi i hovedsak alle de dynamiske egenskapene til Mindre CSS mens du sørger for at vårt tema fungerer riktig i WordPress. Vi reduserer vår CSS også, for å øke hastighet på nettstedets lasttid. I tillegg vil det fjerne alle kommentarer og hvitt mellomrom.
Det er noen innstillinger som jeg liker å sjekke. Du vil sikkert også gjøre det også. Nedenfor er et skjermbilde av disse.
Deretter plasserer du screen.css fil i en underkatalog som heter stilark sammen med en main.css-fil. Endre navn på begge disse filene for å få en .less forlengelse i stedet for .css. Når du har gjort det, fortsett og brann opp Mindre appen på din Mac, og dra temamappen din inn i Appen. Dette setter det i hovedsak opp, så Mindre app vet om prosjektet ditt. Nå, hver gang du lagrer dine mindre filer, blir de automatisk samlet inn i CSS. Ganske nifty huh? Hvis dette ikke skjer, kan du klikke på kompilatortabellen og klikke på kompilere alt.
Ok, så nå at alt dette er satt opp, hva gjør Mindre virkelig for meg? Jeg er glad du spurte unge Padawan. La meg vise deg!
Så si at du har noen primære farger på nettstedet ditt. I stedet for å måtte sette hex-eller RGBA-verdiene hver gang du vil bruke en farge, kan du bare bruke en variabel til å lagre fargen din og deretter bruke variabelenavnet til å identifisere fargen du vil bruke. For eksempel, for å lagre lysegrå kan du deklarere en variabel som dette:
@lightGray = #ddd; / * - og bruk den i din css slik: - * / div # box1 bakgrunn: @lightGray;
Nå, når du trenger å endre farge alt du trenger å gjøre er å endre verdien av @lightGray, og den vil forplante alt til resten av css filen.
Det neste nifty trikset jeg vil diskutere er arv. For CSS nybegynnere der ute, betyr arv bare at en klasse kan arve eller plukke opp trekk fra en tidligere klasse (foreldreklasse). Dette gjøres av en mindre konstruksjon kjent som Mixins. Disse integrerer praktisk talt alle egenskapene til en klasse i en annen klasse. En av de kule tingene om Mixins er at uansett egenskap du spesifiserer i barneklassen din, vil tilsidesette den samme oppførselen som blir arvet fra foreldreklassen. På vanlig engelsk betyr dette at jeg har en klasse som lager mine knapper på siden min ved hjelp av noen hendige css3-gradienter. Selv om jeg liker polstringen, skriftstørrelsen og andre attributter på knappen, kan det hende jeg vil at fargene mine skal endres. Jeg ville gjøre følgende:
/ * - Knapp som jeg bruker som base / foreldre knapp - * / .myBlueButton display: block; polstring: 4px 12px; bakgrunn: rgb (30,87,153); / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1) 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (30,87,153,1)), fargestopp (50%, rgba (41.137.216 , 1)), fargestopp (51%, rgba (32,124,202,1)), fargestopp (100%, rgba (125,185,232,1))); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232 , 1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51% rgba (125,185,232,1) 100%); / * Opera11.10 + * / bakgrunn: -ms-lineær gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba 125,185,232,1) 100%); / * IE10 + * / bakgrunn: lineær gradient (topp, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ); / * W3C * / / * - Knapp som jeg bruker som barn / arvelig knapp - * / .myGreenButton .myBlueButton; bakgrunn: rgb (157,213,58); / * Gamle nettlesere * / bakgrunn: -moz-lineær gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% rgba (124,188,10,1) 100%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (157,213,58,1)), fargestopp (50%, rgba (161,213 , 79,1)), fargestopp (51%, rgba (128,194,23,1)), fargestopp (100%, rgba (124,188,10,1))); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% , rgba (124,188,10,1) 100%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124,188,10,1) 100%); / * Opera11.10 + * / bakgrunn: -ms-lineær gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / bakgrunn: lineær gradient (topp, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
Det er en advarsel å huske på. Hvis du bruker css3 gradientgeneratoren, virker Mindre ikke som linjen som begynner med filter. Som du kan se, griper barneknappen all oppførsel fra foreldreknappen ved å inkludere attributter av den blå knappen på linjen merket.
myBlueButton;
.
Det overstyrer deretter fargen ved å angi egne bakgrunnsfarger. Det neste og siste elementet vi skal dekke bruker en parametrisk blanding (en blanding som tar parametere) med Mindre. Dette er nyttig i tilfeller der du bruker nettleservespesifikke prefikser og slikt.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; -border-radius: @ border_radius;
Selvfølgelig er det mange flere atferd og effekter du kan implementere. Du kan følge linken øverst på tut til Mindre området og studere til ditt hjerteinnhold. Det er også en rask tipsvideo på Nettuts som snakker om Less.js biblioteket.
Det er grunnleggende om hvordan du setter opp et prosjekt som skal brukes i WordPress med Less og BluePrint. Jeg håper at det du lærte her i dag, vil vise seg å være nyttig for deg i fremtidige prosjekter. Hvis du har flere spørsmål, vær så snill å svare på kommentarene.
Accentsconagua