En enkel och enkel guide för att förstå Sass
För ett tag sedan skrev Thoriq Firdaus en bra artikel om att komma igång med Sass som visade dig hur man installerar och använder detta mycket användbara CSS preprocessorspråk (du kanske vill kolla in det, du vet, för att komma igång).
I den här artikeln trodde jag att jag skulle ge dig lite mer inblick i vad du kan göra med Sass och hur utvecklare använder det varje dag för att skapa bättre och mer modulär CSS-kod. Gå vidare till det avsnitt du vill ha:
- Verktyg av handeln
- variabler
- Nesting
- Utvidgning av regler
- Mixins
- Placeholder Selectors
- Operationer
- funktioner
Verktyg av handeln
Thoriq visade dig hur du kan använda Sass från kommandoraden med hjälp av sass-watch kommando.
Om du föredrar GUI-verktyg kan du gå med min personliga favoritapp, Codekit, ett webbutvecklareverktyg för att sammanställa Sass, sammanfogning, autoprefixing och mycket mer. Prepros är en annan mycket kompetent applikation som kan användas på alla system. Båda är betalda ansökningar men det är väl värt det om du kommer att använda dem på lång sikt.
Om du bara vill prova Sass utan att betala för någonting du kan använda terminalen, eller Koala (här är vår recension), en gratis plattformsfunktionsrik app, som kan hålla sin mark mot premium motsvarigheter.
variabler
En av de första sakerna du behöver vikla om huvudet är variabler. Om du kommer från en PHP eller annan liknande kodningsspråk bakgrund kommer det att vara andra naturen till dig. Variabler är för lagring av bitar och delar av återanvändbar information, som ett färgvärde till exempel:
$ primary_color: # 666666; .button färg: $ primary_color; .important färg: $ primary_color;
Det här kanske inte verkar som användbart här, men tänk på att du har 3000 kodenheter. Om ditt färgschema ändras skulle du behöva ersätta varje färgvärde i CSS. Med Sass kan du bara ändra värdet av $ primary_color variabel och görs med den.
Variabler används för lagra typsnitt, storlekar, färger och en mängd andra uppgifter. För större projekt kan det vara värt att extrahera alla dina variabler i en separat fil (vi tar en titt på hur det görs snart). Vad det här gör att du kan göra är att lita på hela ditt projekt och ändra teckensnitt och andra viktiga aspekter utan att någonsin röra faktiska CSS-regler. Allt du behöver göra är att ändra vissa variabler.
Nesting
En annan grundläggande funktion som Sass ger dig är förmågan att bosätta regler. Låt oss anta att du bygger en navigationsmeny. Du har en nav element som innehåller en orörd lista, listobjekt och länkar. I CSS kan du göra något så här:
#header nav / * Regler för nav-området * / #header nav ul / * Regler för menyn * / #header nav li / * Regler för listobjekt * / #header nav a / * Regler för länkar * /
I selektorerna upprepar vi oss mycket. Om element har gemensamma rötter kan vi använda häckning till skriv våra regler på ett mycket renare sätt.
Så här kan koden ovan se i Sass:
#header nav / * Regler för nav-området * / ul / * Regler för menyn * / li / * Regler för listobjekt * / a / * Regler för länkar * /
Nesting är extremt användbart eftersom det gör stylesheets (mycket) mer läsbar. Genom att använda häckning tillsammans med rätt indragning kan du uppnå det mycket läsbara kodstrukturer, även om du har en hel del kod.
En nackdel med att boa är att det kan leda till onödig specificitet. I exemplet ovan har jag refererat till länkar med #header nav a. Du kan också använda #header nav ul li a vilket förmodligen skulle vara för mycket.
I Sass är det mycket lättare att vara väldigt specifik eftersom allt du behöver göra är att bygga dina regler. Följande är mycket mindre läsbar och ganska specifik.
#header nav / * Regler för nav-området * / ul / * Regler för menyn * / li / * Regler för listobjekt * / a / * Regler för länkar * /
Utvidgning av regler
Förlängning kommer att vara bekant om du arbetar med objektorienterade språk. Det är bäst förstått genom ett exempel, låt oss skapa 3 knappar som är små variationer av varandra.
.knapp display: inline-block; färg: # 000; bakgrund: # 333; border-radius: 4px; vaddering: 8px 11px; .knapp-primär @extend. knapp; bakgrund: # 0091C2. knapp-liten @extend. knapp; font-size: 0.9em; vaddering: 3px 8px;
De .knapp-primär och .knapp-small klasser alla sträcker sig .knapp klass vilket innebär att de tar på sig alla sina egenskaper och definierar sedan sin egen.
Detta är oerhört användbart i många situationer där variationer av ett element kan användas. Meddelanden (varning / framgång / fel), knappar (färger, storlekar), menytyper och så vidare kan alla använda den utvidgade funktionaliteten för stor CSS-effektivitet.
En försiktighet som sträcker sig är det De kommer inte att arbeta i mediefrågor som du förväntar dig. Det här är lite mer avancerat men du kan läsa allt om detta beteende i Förstå Placeholder Selectors - placeholder selectors är speciella typer av förlängning som vi kommer att prata om snart.
Mixins
Mixins är en annan favorit egenskap hos preprocessor-användare. Mixins är återanvändbara regler - perfekt för leverantörsspecifika regler eller för shorthanding långa CSS-regler.
Vad sägs om att skapa en övergångsregel för svängelement:
@mixing hover-effekt -webkit-övergång: bakgrundsfärg 200ms; -moz-övergång: bakgrundsfärg 200ms; -o-övergång: bakgrundsfärg 200ms; övergång: bakgrundsfärg 200ms; en @include svep-effekt; .button @include svep-effekt;
Mixins tillåter dig också att använda variabler till definiera värdena inom mixin. Vi kunde skriva om exemplet ovan till ge oss kontroll över den exakta tiden för övergången. Vi kanske vill ha knappar för att överföra en liten bit långsammare till exempel.
@mixin hover-effekt ($ speed) -webkit-övergång: bakgrundsfärg $ hastighet; -moz-övergång: bakgrundsfärg $ hastighet; -o-övergång: bakgrundsfärg $ hastighet; övergång: bakgrundsfärg $ hastighet; en @include hover-effekt (200ms); .knappen @include svever-effekt (300ms);
Placeholder Selectors
Placeholder selectors introducerades med Sass 3.2 och löste ett problem som kan orsaka lite uppblåsning i din genererade CSS-kod. Ta en titt på den här koden som skapar felmeddelanden:
.meddelande font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .message-danger @extend .message; bakgrund: # C20030; färg: #fff; kantfärg: # A8002A; .message-success @extend .message; bakgrund: # 7EA800; färg: #fff; kantfärg: # 6B8F00;
Det är troligt att meddelandeklassen aldrig kommer att användas i vår HTML: det har varit skapad för att förlängas, används inte som det är. Detta orsakar lite uppblåsthet i din genererade CSS. För att effektivisera din kod kan du använda platshållareväljaren som anges med ett procenttal:
% meddelande font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .message-danger @extend% button; bakgrund: # C20030; färg: #fff; kantfärg: # A8002A; .message-success @extend% button; bakgrund: # 7EA800; färg: #fff; kantfärg: # 6D9700;
I detta skede kanske du undrar vad skillnaden mellan sträcker sig och mixiner är. Om du använder platshållare beter sig de som en parameter-mindre mixin. Detta är sant, men produktionen i CSS skiljer sig åt. Skillnaden är det mixins dubbla regler medan platshållare kommer att se till att samma regler delar valörer, vilket resulterar i mindre CSS i slutet.
Operationer
Det är svårt att motstå ordsprollet här, men jag avstår från några medicinska skämt för tillfället. Operatörer tillåter dig att göra lite matte i din CSS-kod och kan vara ganska bra hjälp. Exemplet i Sass guide är perfekt för att visa detta:
.behållare bredd: 100%; artikel float: left; bredd: 600px / 960px * 100%; åt sidan float: right; bredd: 300px / 960px * 100%;
Exemplet ovan skapar ett 960px baserat nätverkssystem med minimal krångel. Den kommer att sammanställa snyggt till följande CSS:
.behållare bredd: 100%; artikel float: left; bredd: 62,5%; åt sidan float: right; bredd: 31,25%;
En stor användning som jag finner för operationer är att faktiskt blanda färger. Om du tittar på succémeddelandet Sass ovanför är det inte klart att färgen på bakgrunden och gränsen har någon form av relation. Genom att subtrahera en grå färg kan vi mörka färgen, vilket gör förhållandet synligt:
$ primära: # 7EA800; .message-success @extend% button; bakgrund: $ primary; färg: #fff; gränsvärde: $ primära - # 111;
Den ljusare den subtraherade färgen desto mörkare blir den resulterande nyansen. Den ljusare den tillförda färgen, desto lättare är den resulterande nyansen.
funktioner
Det finns ett stort antal funktioner att använda: Nummerfunktioner, strängfunktioner, listfunktioner, färgfunktioner och mer. Ta en titt på den långa listan i utvecklarens dokumentation. Jag ska titta på ett par här bara för att visa dig hur de fungerar.
De lätta och mörkna funktion kan användas för att ändra ljusstyrka i en färg. Detta är bättre än att subtrahera nyanser, det gör allt ännu mer modulärt och uppenbart. Ta en titt på vårt tidigare exempel med hjälp av mörkningsfunktionen.
$ primära: # 7EA800; .message-success @extend% button; bakgrund: $ primary; färg: #fff; gränsfärg: mörkare ($ primär, 5);
Funktionens andra argument är den procentuella mörkningen som krävs. Alla funktioner har parametrar; ta en titt på dokumentationen för att se vad de är! Här är några andra självförklarande färgfunktioner: avmätta, mätta, invertera, gråskale.
De FÖRSE MED INNERTAK funktion, precis som i PHP, returnerar ett nummer avrundat till nästa hela nummer. Detta kan användas vid beräkning av kolumnbredder eller om du inte vill använda en hel del decimaler i den slutliga CSS.
.titel font-size: ceil ($ heading_size * 1.3314);
Översikt
Funktionerna i Sass ger oss stor kraft att skriva bättre CSS med mindre ansträngning. Korrekt användning av mixins, sträcker sig, funktioner och variabler gör våra stylesheets mer underhållbara, mer läsliga och enklare att skriva.
Om du är intresserad av en annan liknande CSS preprocessor, föreslår jag att du tittar på LESS (eller kolla in vår nybörjarguide) - den underliggande principen är ungefär densamma!
