Du kanske har hört talas om CSS preprocessing och undrar vad all buzz handlar om. Du kanske till och med har hört talas om sass eller MINDRE .

Kort sagt, förbehandling av din CSS gör att du kan skriva mer kortfattat stilark som formateras snyggt och kräver mindre repetitiva tekniker som vanligtvis hittas vid skrivning av CSS-kod. Resultatet är mer dynamisk styling och stora mängder tid sparas när man utvecklar webbplatser eller applikationer.

Om du redan skriver CSS kan du enkelt lära dig att förbereda din CSS. När du förstår omfattningen av Sass kommer du att undra varför du inte bytte tidigare.

Hur är Sass annorlunda än CSS?

Sass ser ut som CSS men har uppenbara skillnader när du dyker in. Det finns två sätt att skriva Sass och det är slutligen upp till dig vilken stil du föredrar. Jag använder den indragna och bracketed stilen (.scss) i mina projekt eftersom jag verkligen gillar att visualisera var ett block slutar och börjar när en massa kod nestas. När Sass-koden har bearbetats, kompilerar den automatiskt till traditionell CSS med en förbehandlingsmotor.

Det finns många appar tillgängliga som gör det möjligt att förkompilera din Sass för att vara sömlös och enkelt. För att installera kan du använda kommandoraden så länge du har installerat Ruby på din maskin. Om du inte är bekväm med kommandoraden finns det andra alternativ (mer om detta nedan) och om det här är över huvudet, besök Sass-lang.com för att lära dig hur du gör det i ett enkelt steg för steg format. I slutändan, med vilken metod som helst, det är kommandoraden eller appen, kommer Sass-installationen att titta på dina ändringar och automatiskt kompilera ner till traditionell CSS för dig.

Jag rekommenderar starkt att använda appar som Codekit , LiveReload , eller Blandning som hjälper dig att skapa ett Sass-projekt på en Mac från början eller om du är en Windows-användare jag rekommenderar PrePros . Codekit, mitt val av förbehandlare, hjälper mig genom att förbehandla min Sass samt validera och minska din kod så att din webbplats kan köras snabbt och effektivt. (Möjligheten att skapa Kompass eller Bourbon baserade projekt inom Codekit är också en fantastisk funktion men ligger utanför ramen för den här artikeln.) När du blir mer bekväm med Sass, se till att kolla in hur du använder Compass och Bourbon i dina Sass-projekt.

Så vad är Sass?

Sass står för Syntactically Awesome Stylesheets och skapades av Hampton Catlin . Sass introducerar nya koncept som variabler, mixins och nestar in i CSS-koden du redan vet och älskar. Dessa begrepp gör i slutändan din CSS fantastisk, lättare att skriva och mer dynamisk. Alla dessa funktioner kombineras, påskynda någon designers eller utvecklarens arbetsflöde.

Vad som vanligtvis förvirrar människor är de alternativa sätten att skriva Sass. Du kommer att se andra handledning eller förklaringar av Sass med .SCSS eller .Sass-förlängningen för deras Sass-filer. Detta är uppenbart eftersom det finns två sätt att skriva koden som producerar samma utgång. Det vanligaste jag har sett, och den metod jag för närvarande använder är den fäste versionen som kallas .SCSS. En annan metod är .Sass-förlängningen som förlitar sig mer på indrag snarare än punktliga element och är beroende av vitt utrymme. Med den här syntaxen behöver du inte ha halvkolon eller parentes som du ser i CSS och .SCSS-syntaxen.

Kolla in exemplet nedan.

.css

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Sass

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Strukturera

Okej så nu undrar du nog hur du får Sass setup för dina egna projekt. Processen är ganska lätt, speciellt om du använder Codekit eller en liknande applikation som hjälper dig på vägen.

En typisk filstruktur för ett Sass-projekt ser ut som nedan. Det kan se skrämmande ut, men jag lovar att ditt arbetsflöde kommer att förbättras när du förstår ditt huvud kring hur sakerna fungerar tillsammans. I slutändan blir alla dina Sass sammanställda till en CSS-fil som kommer att vara filen du innehåller i dina arbetsdokument, det är HTML, PHP, etc ...

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

Hur du ställer upp din struktur i slutändan beror på dig. Börja med en grundläggande struktur och finjustera dina egna behov och arbetsflöde.

@Importera

Sass utökar CSS @ import- regeln så att den kan importera Sass- och SCSS-filer. Alla importerade filer slås samman i en enda utmatad CSS-fil. Dessutom överför alla variabler eller mixins som definieras i importerade filer till huvudfilen vilket innebär att du nästan kan mixa och matcha alla filer och vara säker på att alla dina stilar kommer att förbli på global nivå.

@import tar ett filnamn att importera. Som en sista utväg importeras Sass- eller SCSS-filer via det filnamn du väljer. Om det inte finns något tillägg kommer Sass att försöka hitta en fil med det namnet och .scss eller .Sass extension och importera det.

Om du har en typisk Sass-projektinstallation märker du några @import-regler inom en basfil. Det här låter dig enkelt ha flera filer som synkroniseras effektivt när de sammanställs, till exempel:

@import "main.scss";

eller:

@import "main";@Partials

Om du har en SCSS- eller Sass-fil som du vill importera men inte kompilera till CSS, kan du lägga till ett understreck i början av filnamnet, vilket annars kallas en Delial. När koden sammanställer kommer Sass att ignorera partiklar när de bearbetas till CSS. Du kan till exempel ha _buttons.scss, ingen _buttons.css-fil skulle skapas och du kan då @import "-knappar";

Bästa praxis är att skapa en partiell katalog och placera alla dina partiella Sass-filer inuti den. Om du gör detta försäkrar du inte några dubblerade filnamn som Sass inte tillåter, till exempel den dela _buttons.scss och filknapparna.scss kan inte existera i samma katalog. Att använda partials är ett bra sätt att hålla sig organiserade på global nivå. Så länge du kan importera filen, är Sass du skriver användbar under hela projektet. Vanligtvis i partiklar skapar jag mixins eller variabler att använda under hela mitt projekt. Jag heter dem baserat på deras innehåll och de element som de styling.

variabler

Variabler i CSS är ett genombrott i modern webbutveckling. Med Sass kan du skapa variabler för saker som teckensnitt, färger, storlekar, marginal, vaddering, etc. ... Listan är oändlig. Om du skriver JavaScript eller PHP är konceptet ganska likt när det gäller att definiera variabler och konventioner.

Så varför använda variabler? Lätt, variabler tillåter dig att använda ett element mer än en gång, som liknar en klass i HTML eller en variabel i JavaScript. Till exempel, säg att du definierar flera divs med en specifik bakgrundsfärg. Du kan använda variabeln som är lättare att komma ihåg istället för den traditionella hex-koden eller RGB-beräkningen. Att göra en variabel med ett lätt att komma ihåg namnet möjliggör mindre kopiering och klistra och ett mer produktivt arbetsflöde. Samma begrepp gäller närhelst en variabel kan implementeras, och med Sass som är praktiskt taget var som helst, till exempel denna .scss:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

kommer att resultera i denna .css-fil:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Operationer och funktioner

Den svaga delen om variabler är att de är extremt lik de som används i skriptspråk. Variabler i Sass kan användas inom både funktioner och funktioner. Standardmatematiska operationer (+, -, *, / och%) stöds för siffror. För färger finns funktioner inbyggda i Sass som riktar sig mot ljushet, nyans, mättnad och mycket mer.

Med denna funktionalitet blir din kod mer dynamisk än någonsin. Om du till exempel vill ändra den totala länkfärgen på din webbplats kan du helt enkelt ändra variabeln, kompilera om och din webbplats uppdateras dynamiskt hela tiden. Kolla in ett annat exempel nedan för en återanvändbar navigationslista, detta .scss:

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

kommer att resultera i detta .css:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

Nesting

Nesting är en stor anledning till att jag älskar Sass. Du skriver färre linjer kod i slutet och hela din kod är lätt att läsa på grund av den kapslade formateringen. (Samma begrepp om häckning finns också i MINDER.)

Det finns två typer av nestning:

Selector nesting

Selector nesting i Sass liknar hur du skulle nesta HTML:

Main Content
Sidebar Content

Sass-versionen av häckning:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

skulle resultera i följande CSS:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Fastighetsnestning

Den andra typen av boskap är fastighetsnestning. Du kan hyra egenskaper med samma prefix till bättre målelement, vilket resulterar i mindre kodenheter, till exempel följande:

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

skulle resultera i denna CSS:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

Mixins

Av alla Sass-funktionerna måste Mixins vara den mest kraftfulla. Mixins liknar en variabel men på steroider. Du kan definiera en komplett stil av ett element och återanvända dessa stilar genom hela ditt projekt.

Mixiner definieras med hjälp av @mixin- direktivet, vilket tar ett block av stilar du skapade tidigare och applicerar det på valet av ditt val med hjälp av @include- direktivet. Nedan finns ett vanligt CSS-mönster som används för att skapa en horisontell navigeringsmeny. Istället för att skriva samma kod för varje navigeringsinstans, använd bara en mixin och inkludera den vid behov när som helst. Detta koncept kan göras för allt du använder om och om igen som knappar, typografi, gradienter, etc ...

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

Och här inkluderar vi mixin med en rad kod:

ul.navbar {@include navigate;}

vilket resulterar i denna sammanställda CSS:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Du kan till och med gå så långt som att skapa anpassningsbara mixins som använder argument för att uppdatera dynamiskt. Dessutom kan du inkludera mixins inom andra mixins eller skapa funktioner med mixins och mer. Kraften bakom dessa är helt enorm.

Det finns några populära fördefinierade mixinsamlingar där jag tidigare nämnde Compass och Bourbon. Med en enkel @import i ditt projekt kan du få tillgång till redan genererade mixins som vanligtvis används över hela webben. Det finns så många alternativ att det är svårt att täcka allt som är tillgängligt men det är definitivt kul att experimentera och få dina händer smutsiga och utveckla anpassade animeringar eller övergångar med några rader kod snarare än en skärm full. Mixins gör korsbläddrarsutveckling en vind om du inte känner för att skriva webbläsardefinierade prefix om och om igen i din CSS.

Till exempel, här skapar vi en mixin med argument som gör att den kan anpassas.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

som ger oss denna CSS när den sammanställs:

p {border-color: blue;border-width: lin;border-style: dashed;}

Sammanfattning

Medan Sass har en inlärningskurva tror jag verkligen att när du förstår metoderna och syntaxen kommer du aldrig att vilja gå tillbaka till att skriva standard CSS igen.

Sass är extremt kraftfull och jag har bara täckt grunderna här. Med traditionell CSS har vi alla stött på kopia och klistra in eller hitta och ersätta uppgifter som slänger så mycket tid i utvecklingsfasen av ditt projekt. Ge Sass ett försök och upptäck hur du bygger ett effektivt arbetsflöde i dina framtida projekt.

Använder du Sass, eller föredrar en annan CSS preprocessor? Har du en favorit mixin? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, använder noll till hjältebild via Shutterstock.