Share
I første del av denne serien ga jeg et raskt overblikk over de populære CSS preprosessorer LESS og SASS. Jeg har også delt noen av de rammene som de brukes i.
Jeg planlegger å ta et dypere dykk inn i MINDRE og snakke om delene av språket jeg bruker oftest. Jeg planlegger også å vise deg hvordan du kommer i gang med å bruke den med CodeKit.
La oss grave inn!
Jeg bruker personlig mindre for de fleste WordPress-prosjekter. Jeg bruker mye tid på å jobbe med Standard, og bruker Bootstrap som rammevalg.
Siden Bootstrap bruker MINDRE for å kompilere CSS, har jeg lært hvordan jeg bruker den .mindre filer for å gjøre endringer. Jeg vet om andre webdesignere og utviklere som foretrekker å bruke Foundation. Siden Foundation bruker SASS, har de lært å bruke det i stedet.
Jeg begynner personlig å jobbe med et annet webprosjekt som bruker SASS, og det har vært relativt enkelt å plukke opp ting på grunn av min erfaring med MINDRE.
Variabler er ganske selvforklarende. Du kan opprette en variabel et sted i din .mindre fil og referer det på andre steder i den filen eller andre filer. Jeg pleier å bruke den til farger, fonter, polstring og marginer.
Her er et eksempel:
// Variabler @red: # ff0000; @green: # 00ff00; @blå: # 0000ff; // Styling // Links a color: @blue; a: besøkt farge: @blue;
Det vil da kompilere til dette:
en farge: # 0000ff; a: besøkt farge: # 0000ff;
Hvis du vil endre fargen på begge link stylings, må du bare endre variabelen:
@blå
fra
# 0000ff
til
# 0000a4
Du endrer på ett sted, kompompilerer, og du har endret alle forekomster av denne variabelen gjennom hele filen.
En annen flott måte å bruke disse variablene i tillegg ville være å bruke mer semantisk navngiving som:
@primaryColor
og
@secondaryColor
Du kan da bruke disse variablene i hele koden din. Når designeren kommer opp med disse fargene, kan du bare endre dem en gang, kompilere, så er du ferdig!
Nesting brukes som du burde hekke logikk i en hvis / annet blokkere i PHP eller JavaScript: Du angir ditt høyere nivåvelger som .post, Sett deretter de andre velgerne inne i den. Det vil eliminere behovet for å gjenta flere ganger .post foran dine andre selektorer som slik:
// Post .post polstring: 20px; .post-header margin: 20px 0;
Det vil da kompilere til dette:
.Legg inn polstring: 20px; .post .post-header margin: 20px 0;
Du kan også bruke & å sammenkoble selektorer også. Et eksempel kan være hvis du ønsket å målrette mot bestemte widgets i sidelinjen. La oss si at du ønsket å stil bakgrunnsfargen til Nylige innlegg og Nylige kommentarer-widgets annerledes. Du kan gjøre følgende i MINDER:
.widget polstring: 20px; & .widget_recent_entries bakgrunnsfarge: hvit; & .widget_recent_comments bakgrunnsfarge: svart;
Det ville kompilere inn i dette:
.widget polstring: 20px; .widget.widget_recent_entries bakgrunnsfarge: hvit; .widget.widget_recent_comments bakgrunnsfarge: svart;
Du kan også bruke dette til pseudoklasser som :sveve, :aktiv, : besøkt, :før, og :etter.
// Links a color: blue; &: svever farge: rød; &: besøkt farge: rød;
Det ville kompilere til dette:
en farge: blå; a: svever farge: rød; a: besøkt farge: rød;
Mixiner er i utgangspunktet en rekke stilattributter som du vil gruppere sammen. Et godt eksempel på dette er for attributter som er forskjellige mellom nettlesere som kantradius.
I stedet for å huske hver enkelt, kan du ringe mixin din, og den vil gi hver egenskap for deg. Her er et eksempel:
// Mixin .border-radius border-radius: 4px; -moz-grense-radius: 4px; -webkit-grense-radius: 4px; // Widget .widget .border-radius;
Det vil kompilere til følgende:
.widget border-radius: 4px; -moz-grense-radius: 4px; -webkit-grense-radius: 4px;
Hva om du ønsket å bruke grensestrekningen flere ganger i din .mindre fil men ønsket forskjellige beløp for hver? Det er da du vil bruke en Parametrisk Mixin.
Dette betyr ganske enkelt at du kan gjenbruke en mixin og sende den et argument å bruke. Her er et eksempel:
// Mixin .border-radius (@radius: 4px) border-radius: @radius; -moz-grense-radius: @radius; -webkit-grense-radius: @radius; // Widget .widget .border-radius (); // Post .post .border-radius (8px);
Det ville kompilere til dette:
.widget border-radius: 4px; -moz-grense-radius: 4px; -webkit-grense-radius: 4px; .post border-radius: 8px; -moz-grense-radius: 8px; -webkit-grense-radius: 8px;
Her er et eksempel på bruk av variabler, nesting og mixins alt på samme tid:
// Variabler @ widget-nylig-innlegg-grense-radius: 4px; @ widget-nylig-innlegg-bakgrunnsfarge: hvit; @ widget-nylig-innlegg-link-farge: @blue; @ widget-nylig-kommentarer-grense-radius: 8px; @ widget-nylig-kommentarer-bakgrunnsfarge: svart; @ widget-recent-comments-link-color: @red; // Farger @blå: # 0000ff; @red: # ff0000; // Mixins .border-radius (@radius: 4px) border-radius: @radius; -moz-grense-radius: @radius; -webkit-grense-radius: @radius; // Widgets .widget & .widget_recent_entries bakgrunnsfarge: @ widget-nylig-innlegg-bakgrunnsfarge; .border-radius (@ widget-siste-innlegg-border-radien); ul li a color: @ widget-recent-posts-link-color; & .widget_recent_comments bakgrunnsfarge: @ widget-nylig-kommentarer-bakgrunnsfarge; .border-radius (@ widget-siste-kommentarer-border-radien); ul li a color: @ widget-recent-comments-link-color;
Som alle ville kompilere inn i dette:
.widget.wiget_recent_entries bakgrunnsfarge: hvit; grense-radius: 4px; -moz-grense-radius: 4px; -webkit-grense-radius: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments bakgrunnsfarge: svart; border-radius: 8px; -moz-grense-radius: 8px; -webkit-grense-radius: 8px; .widget.widget_recent_entries ul li a color: # ff0000;
Det er ekstremt enkelt å sette opp CodeKit-prosjektet ditt. Du kan bare dra og slippe mappen din til CodeKit, eller du kan klikke på pluss-knappen nederst til venstre og deretter velge en mappe fra filbrowseren.
Når du gjør det, vil CodeKit automatisk skanne alle filene i den mappen og deretter gruppere dem i følgende kategorier:
Så du har nå importert prosjektfilene dine. Deretter skal vi angi produksjonsbanen til din .mindre filer. Jeg vil foreslå å ha a css mappe og a mindre mappe på innsiden av den. Du vil ønske å sørge for å ha alle filene dine i det mindre mappe for å peke til din style.less fil.
Du vil ønske å bytte til stilvisningen. Vi vil ønske å ha style.less filen kompileres i temaets rotmappe som style.css. For å gjøre dette, vil du høyreklikke på style.less fil, og velg "Angi utgangssti ... ". Dette vil hente opp en filbrowser.
Deretter vil du klikke på utdata filnavn og utvidet tekstinngang. Når du gjør det, kan det automatisk fylle seg style.css for deg. Hvis det ikke gjør det, vil du ønske å skrive inn style.css. Til slutt vil du klikke på Å velge å redde.
Vi er nesten der! Deretter må vi velge en samlingsinnstilling. Du vil se skjermbildet for samlingsinnstillinger avsløre seg selv når du klikker på en .mindre fil. Vi har tre tilgjengelige utgangsstiler:
Velg en av de ovennevnte og klikk på "Kompilere"Du bør få et varsel om at din style.less filen har kompilert.
Hvis hele syntaxen din er korrekt, vil kompilasjonen bli vellykket. Hvis det er noen feil, vil det vende deg over til Logg se og gi deg linjenummeret og forklaringen av feilen.
Hvis alt kompilerer riktig, bør du kunne åpne opp style.css fil og se utgangen. Som du redigerer .mindre filer og lagre dem, vil CodeKit automatisk kompilere filene dine.
Merk: Pass på at du ikke gjør noen endringer i style.css fil, fordi så snart du kompompillerer din .mindre filer, endringene dine vil bli tilsidesatt.
Vi har nå gått gjennom et dypere dykk inn i LESS og brutt ned noen av de populære funksjonene. Jeg har forklart noen grunner til at jeg personlig velger å bruke MINDRE i mine WordPress-prosjekter og hvordan du bruker CodeKit til å kompilere alle mine filer.
I neste innlegg vil jeg gå inn i større detalj rundt hvordan du skal strukturere din ".mindre'filer og koble dem alle sammen.
Accentsconagua