Share
I den första delen av denna serie gav jag en snabb översikt över de populära CSS preprocessorerna LESS och SASS. Jag delade också några av de ramar där de används.
Jag planerar att ta en djupare dyka in i MINDER och prata om de delar av språket jag brukar oftast använda. Jag planerar också att visa dig hur du börjar använda det med CodeKit.
Låt oss gräva in!
Jag använder personligen LESS för de flesta WordPress-projekt. Jag spenderar mycket tid på att arbeta med Standard och det använder Bootstrap som ramverk.
Eftersom Bootstrap använder LESS för att sammanställa CSS har jag lärt mig hur man använder den .mindre filer för att göra ändringar. Jag känner till andra webbdesigners och utvecklare som föredrar att använda Foundation. Eftersom Foundation använder SASS har de lärt sig att använda det istället.
Jag börjar personligen jobba med ett annat webbprojekt som använder SASS, och det har varit relativt lätt att plocka upp saker på grund av min erfarenhet med LESS.
Variabler är ganska självförklarande. Du kan skapa en variabel någonstans i din .mindre fil och hänvisa det på andra ställen i den filen eller andra filer. Jag brukar använda den för färger, typsnitt, vadderingar och marginaler.
Här är ett exempel:
// Variabler @red: # ff0000; @green: # 00ff00; @blå: # 0000ff; // Styling // Länkar a color: @blue; a: besökte färg: @blue;
Det kommer då att kompilera till detta:
en färg: # 0000ff; a: besökte färg: # 0000ff;
Om du vill ändra färgen på båda länkformat, behöver du bara ändra variabeln:
@blå
från
# 0000ff
till
# 0000a4
Du byter på en plats, kompilerar, och du har ändrat alla instanser av den variabeln genom hela filen.
Ett annat bra sätt att använda dessa variabler skulle också vara att använda mer semantisk namngivning som:
@grundfärg
och
@secondaryColor
Du kan då använda dessa variabler i hela din kod. När din designer kommer upp med dessa färger, kan du bara ändra dem en gång, kompilera, då är du klar!
Nesting används precis som att du skulle logga in i en om annat blockera i din PHP eller JavaScript: Du ställer in din högre nivåväljare som .posta, Placera sedan de andra väljarena inuti den. Det kommer att eliminera behovet av att skriva ut flera gånger .posta framför dina andra väljare som så:
// Post .post padding: 20px; .post-header margin: 20px 0;
Det kommer då att kompilera till detta:
.posta vaddering: 20px; .post .post-header margin: 20px 0;
Du kan också använda & att sammanfoga väljare också. Ett exempel kan vara om du vill rikta in specifika widgets i sidofältet. Låt oss säga att du ville utforma bakgrundsfärgen på Nya inlägg och Senaste kommentarer widgets annorlunda. Du kan göra följande i MINDER:
.widget vaddering: 20px; & .widget_recent_entries bakgrundsfärg: vit; & .widget_recent_comments bakgrundsfärg: svart;
Det skulle kompilera i detta:
.widget vaddering: 20px; .widget.widget_recent_entries bakgrundsfärg: vit; .widget.widget_recent_comments bakgrundsfärg: svart;
Du kan också använda detta för pseudoklasser som :sväva, :aktiva, :besökt, :innan, och :efter.
// Länkar a färg: blå; &: sväva färg: röd; &: besökte färg: röd;
Det skulle kompilera för detta:
en färg: blå; a: svävar färg: röd; a: besökte färg: röd;
Mixiner är i grunden ett antal stilattribut som du vill gruppera ihop. Ett bra exempel på detta är för attribut som skiljer sig åt mellan webbläsare som gränsenradie.
I stället för att behöva komma ihåg var och en, kan du ringa din mixin och det kommer att ge varje attribut för dig. Här är ett exempel:
// Mixin .border-radius border-radius: 4px; -moz-gränsen-radien: 4px; -webkit-gräns-radie: 4px; // Widget .widget .border-radius;
Det kommer att kompilera till följande:
.widget border-radius: 4px; -moz-gränsen-radien: 4px; -webkit-gräns-radie: 4px;
Vad händer om du vill använda gränsenradie flera gånger i din .mindre filen men ville ha olika belopp för varje? Det är då du skulle använda en Parametrisk Mixin.
Detta innebär helt enkelt att du kan återanvända en mixin och ge den ett argument att använda. Här är ett exempel:
// Mixin .border-radius (@radius: 4px) gränsstråle: @radius; -moz-gränsen-radien: @radius; -webkit-gränsen-radien: @radius; // Widget .widget .border-radius (); // Post .post .border-radius (8px);
Det skulle kompilera för detta:
.widget border-radius: 4px; -moz-gränsen-radien: 4px; -webkit-gräns-radie: 4px; .post border-radius: 8px; -moz-gränsen-radien: 8px; -webkit-gräns-radie: 8px;
Här är ett exempel på att använda variabler, häckar och mixar alla samtidigt:
// Variabler @ widget-recent-posts-border-radius: 4px; @ widget-nyligen-inlägg-bakgrundsfärg: vit; @ widget-recent-posts-link-color: @blue; @ widget-recent-comments-border-radius: 8px; @ widget-recent-comments-background-color: svart; @ widget-recent-comments-link-color: @red; // Colors @blue: # 0000ff; @red: # ff0000; // Mixins.border-radius (@radius: 4px) border-radius: @radius; -moz-gränsen-radien: @radius; -webkit-gränsen-radien: @radius; // Widgets .widget & .widget_recent_entries bakgrundsfärg: @ widget-recent-posts-background-color; .border-radie (@ widget-senaste-stolparna-border-radius); ul li a color: @ widget-recent-posts-link-color; & .widget_recent_comments bakgrundsfärg: @ widget-recent-comments-background-color; .border-radie (@ widget-senaste-comments-border-radius); ul li a color: @ widget-recent-comments-link-color;
Vilket skulle alla kompilera i detta:
.widget.wiget_recent_entries bakgrundsfärg: vit; gränsstråle: 4px; -moz-gränsen-radien: 4px; -webkit-gräns-radie: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments bakgrundsfärg: svart; gränsstråle: 8px; -moz-gränsen-radien: 8px; -webkit-gräns-radie: 8px; .widget.widget_recent_entries ul li a färg: # ff0000;
Det är extremt lätt att installera ditt CodeKit Project. Du kan helt enkelt dra och släppa din mapp i CodeKit, eller klicka på plusknappen längst ner till vänster och välj sedan en mapp från filbläddraren.
När du väl har gjort det, kommer CodeKit automatiskt att skanna alla filer i den mappen och sedan gruppera dem i följande kategorier:
Så du har nu importerat dina projektfiler. Nästa kommer vi att ställa in din sökvägs utgångsställe .mindre filer. Jag föreslår att ha en css mapp och a mindre mapp inuti den. Du kommer att vilja se till att ha alla dina filer i det mindre mapp för att peka på din style.less fil.
Du kommer att vilja byta till stilvy. Vi kommer att vilja ha style.less filen kompileras i ditt temas rotmapp som style.css. För att göra detta ska du högerklicka på style.less fil och välj "Ange utmatningsväg ... ". Detta kommer att hämta en File Browser.
Därefter vill du klicka på utmatnings filnamn och textinmatning för förlängning. När du gör det kan det automatiskt fylla style.css till dig. Om det inte gör så vill du komma in style.css. Slutligen klickar du på Välj att spara.
Vi är nästan där! Nästa måste vi välja en kompileringsinställning. Du kommer se skärmbilden för samlingsinställningar avslöja sig när du klickar på a .mindre fil. Vi har tre tillgängliga utmatningsstilar:
Välj en av ovanstående och klicka på "Sammanställa". Du ska få en anmälan om att din style.less filen har sammanställt.
Om hela din syntax är korrekt kommer din kompilering att bli framgångsrik. Om det finns några fel, kommer det att vända dig till Logga visa och ge dig linjenummer och förklaring av felet.
Om allt kompilerar korrekt bör du kunna öppna din style.css fil och se produktionen. När du redigerar din .mindre filer och spara dem, kommer CodeKit automatiskt att kompilera dina filer.
Obs! Se till att du inte gör några ändringar i style.css fil, eftersom så snart du kompilerar din .mindre filer, dina ändringar kommer att överskridas.
Vi har nu gått igenom en djupare dyka i LESS och brutit ner några av de populära funktionerna. Jag har förklarat några anledningar till att jag personligen väljer att använda LESS i mina WordPress-projekt och hur man använder CodeKit för att kompilera alla mina filer.
I nästa inlägg kommer jag att gå in i större detalj kring hur du strukturerar din ".mindre'filer och anslut dem alla tillsammans.
Accentsconagua