Nu är jag säker på att du har hört talas om Sass och hur "Du måste verkligen börja använda det!"
Att lära sig ett nytt verktyg kan suga och hitta tid att göra det är nästan omöjligt men ibland kommer ett verktyg som förändrar vår bransch och är för bra att ignorera.
Eftersom våra webbsidor och appar blir mer komplexa blir våra stilark större och svårare att bibehålla. CSS preprocessorer som Sass hjälp genom att hålla våra stilarker korta och låta oss modulera vår kod samtidigt som vi erbjuder en hel rad funktioner som ännu inte är tillgängliga i vanlig CSS.
Dessa extrafunktioner gör dem också väldigt roliga att använda! Nu kan du ha sett något som ser ut så här:
$i: 6;@while $i > 0 {.item-#{$i} {bredd: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
och tänkte, "Whatttttttttttt? Tack men jag håller min vanliga ol 'CSS. "
Jag erkänner, det ser skrämmande ut och vissa människor gör några riktigt galna, komplexa saker med Sass men jag är här för att berätta att någon kan börja använda det och de vinster du får på dag ett kommer att göra dig en Sass troende.
Att få Sass inrättat för ett projekt är lite överomfattat av denna artikel men installationen är relativt lätt och Sass-webbplatsen har instruktioner för Linux, Mac eller PC. Den fina saken är, när den är installerad, kan du ta en CSS-fil du har och byta namn på den .scss gör det till en Sass-fil.
Alla korrekt formaterade CSS är giltiga Sass!
Det betyder att du kan börja använda Sass medan du fortsätter skriva dina stilar som du alltid har, långsamt med fler funktioner som din komfortnivå växer. Det är rätt folk, precis samma ol ". samma ol men här är fem fantastiska vinster som du nu har till ditt förfogande:
Vad är den huvudrubrikfärgen igen? Hur skriver jag den fontstacken? Hur många gånger har du skrivit CSS och var tvungen att söka igenom dina tidigare stilar för ett värde eller var tvungen att bryta ut färgdroppen, än en gång för att ta reda på den hexadecimala färgen?
Sass tillhandahåller variabler som ett sätt att lagra information som du vill återanvända i ditt stilark. Nu kan du lagra det färgvärdet eller den långa teckensnittsstacken som något som är lätt att komma ihåg. Det sätt du förklarar en variabel på är med ett dollar tecken $ följt av namnet. Det här namnet kan vara vad du vill att det ska vara. Då skriver du ett kolon : följt av värdet och en halvkolon ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Nu om du vill använda en av dessa värden kan du bara använda variabeln istället.
.mySelector { font-family: $mainFont; color: $mainColor; }
Awesome, eller hur? Den här funktionen ensam gör det värt installationen eftersom det sparar så mycket tid när man skapar CSS. Det är så bra att det förmodligen kommer att gå in i CSS spec men vem vet när vi kommer att kunna använda den? Lycklig för oss, med Sass, vi behöver inte vänta.
Nu kanske du säger till dig själv: "CSS har @ import, det är inte så coolt" och du skulle ha rätt men CSS och Sass versionerna skiljer sig på ett väsentligt sätt. I normal CSS @import drar i andra stilark, men det gör det genom att göra en annan HTTP-begäran, något som vi vanligtvis vill undvika. Av denna anledning har du kanske inte ens använt @import innan. Sass, å andra sidan, är en förprocessor (betoning på pre) som kommer att dra i den filen innan den sammanställer CSS.
Resultatet är en CSS-sida som hanteras av en HTTP-begäran. Vad det innebär är att du kan bryta upp din css i mindre, mer underhållbara bitar medan du bara serverar en sida i webbläsaren. Behöver du fixa texten på knappen? Inga fler skimming stilarkar letar efter de relevanta knappstilarna. Öppna bara din knapp delvis och gör ändringarna.
Vad är en partiell? Precis vad de låter som. De är partiella Sass-filer som innehåller små snippets av CSS som du kan inkludera i andra Sass-filer. De heter genom att använda en ledande underskrift följt av ett namn. _myFile.scss . Undersignalen låter Sass veta att filen bara är en partiell fil och att den inte ska sammanställas till CSS. För att importera den här delen måste du bara lägga till @import till din fil så här:
@import 'partials/myPartial';
Så importerar jag _myPartial.scss som finns i en mapp som heter partials. Du behöver inte inkludera understrykning eller filtillägg. Sass är smart nog att veta vilken fil du menar. Användningen av partials gör det möjligt för oss att modulera vår kod, vilket gör den mer portabel och lättare att underhålla.
Sass tar med funktioner till CSS-partiet. Jag vet inte att alla är programmerare och konceptet med en funktion kan vara lite över huvudet men oroa dig inte, många lägger till massor av användbara funktioner medan du inte är alltför komplicerad. När det gäller färger finns det flera användbara för att manipulera dem, men tre sticker ut som fantastiska, enkla vinster för att människor bara kommer igång. Låt oss titta på hur vi använder dem.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Syntaxen är ganska rakt framåt. I de tre funktionerna ovan ser vi att vi har två argument för var och en. Den första är den färg vi vill manipulera. Detta kan vara en hexadecimal, RGB eller något färgformat som är korrekt CSS. Det kan till och med vara en variabel. Den andra är den mängd vi vill ändra den färgen med. Gör 10% mörkare, Ljusa med 5%, Ställ alfa till 0,6. Resultatet av denna funktion är det värde som anges i den sammanställda CSS. Så nedanför ser du våra funktioner på jobbet
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Förhoppningsvis kan du redan se hur det här kan vara användbart. Det finns ett dussin sätt att utnyttja dessa tre funktioner för att lägga till lite fin färgkontrast och de kan användas var som helst ett färgvärde normalt skulle gå. Dessa tre är bara toppen av isberget. Det finns många fler färgfunktioner och många kreativa sätt att de kan användas.
Vissa saker i CSS är lite tråkiga att skriva. Mixins gör grupper av CSS-deklarationer som vi kan återanvända på vår webbplats. CSS3-format som kräver säljarprefix är ett perfekt exempel på när man ska använda mixin. I stället för att skriva samma egendom om och om igen skriver vi en mixin en gång då vi ringer den mixin när som helst vi vill använda den. För att deklarera en mixin använder vi @mixin nyckelord. Vi ger det ett namn och tillämpar våra stilar i mellan lockiga hängslen så här: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argument kan till och med överföras till mixin för att göra det mer flexibelt. För att använda vår mixin använder vi bara @include nyckelord.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Som du ser i exemplet ovan kallar vi vår mixin med @include följt av mixins namn och sedan några argument inom parentesen. Tänk på hur mycket tid det kommer att spara dig. Varför använder inte alla detta?
Dessa verktyg har varit bra men jag har sparat bäst för sist. @extend är en av de mest användbara funktionerna som tillåter oss att dela en uppsättning CSS-egenskaper från en väljare till en annan. Tänk på ett par knappar, som en accept och nedgångsknapp på ett modalfönster. Eftersom de båda knapparna delar de flesta av samma stil, men nedgångsknappen kommer att ha en röd bakgrund för att få det att stå ut. Med Sass skriver vi standardstilarna för alla knappar och "förlänger" dessa stilar till nedgångsknappen där vi skulle lägga till den röda bakgrunden.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Man, hur fantastisk är det att du inte behöver repetera dig själv? Detta främjar inte bara modularisering av våra stilar, men det minskar risken för att stilar går bort från knapp till knapp. Detta är en enorm tid spara vinst! Multiplicera detta för alla stilar på webbplatsen och vi har en väsentligt minskad tidsram för att skriva CSS.
Heck, med hela tiden vi sparar kanske vi kunde lära oss de mer komplexa aspekterna av Sass.
Jag hoppas att jag har övertygat dig om att ge detta fantastiska verktyg ett skott och illustrerade några funktioner som kan förbättra din produktivitet genast. Sanningen är att jag kunde skriva den här artikeln igen imorgon och ha fem mer riktigt snygga funktioner att dela med. Det är bara så häftigt! Sass (och andra förprocessorer) är här för att stanna, så gör dig själv en tjänst och börja använda den. För de som är intresserade av att ta reda på mer kolla in dessa resurser på Twitter och på webben:
twits:
webs:
Och om du befinner dig i South Florida Tri-county-området kommer du med oss på South Florida Sass Meetup .