Funktion 1: Variabler
Flera CSS-klasser kan innehålla samma regel eller regler i ett projekt. Vi har till exempel 20 rutor på vår webbsida med olika bakgrundsfärger:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Senare ändrar sig vår kund och vill ha större rutor. Så jag måste öka varje klass’ width och height egenskaper en efter en. Detta kan också vara 50 klasser. I det verkliga programmeringslivet kan detta vara frustrerande. Som jag nämnde ovan är detta ett exempel på stor ansträngning för små förändringar.
Hur kan vi göra det mer effektivt?
Sass erbjuder en lösning: variabler. Precis som i andra programmeringsspråk kan vi använda variabler för att lagra värden och återanvända dem senare.
Definition av en variabel:
$variable-name: value;
Om vi återgår till exemplet ovan, om vi definierar variabler för width & height :
$box-width: 100px;
$box-height: 100px;
senare när en ändring behövs, behöver vi bara ändra deras värden en gång:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS har också stöd för variabler nu, men det fungerar inte i IE & gamla versioner av andra webbläsare:
Funktion nr 2: Nesting
Standard-CSS stöder inte nesting. Vi kan inte skriva en klass inuti en annan klass. När projektet blir större medför detta problem med läsbarheten och strukturen ser inte snygg ut.
Till exempel kan vi definiera en navigeringsmeny med klickbara länkar i HTML nedan:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML stöder inbäddad kod. Men utan nesting ser de ut så här i CSS:
Vi var tvungna att skriva nav för varje tagg, till och med för pseudoklassen för ankaret (hover) eftersom nav är föräldrataggen för alla. Sass stöder dock nesting:
Här kan vi skriva bättre strukturerad kod som i HTML. Vi behöver inte skriva nav klass efter klass, vilket också förhindrar redundans
Viktigt: Det rekommenderas inte att nästla klasser djupare än 3 nivåer.
Funktion #3: Mixins
Vi har ovan lärt oss hur man använder variabler för CSS-regler. Men vad händer om vi behöver använda en grupp av regler tillsammans? Sass har en funktion som heter mixins, som låter oss göra det.
Vad är en mixin?
Mixins är Sass-funktioner som grupperar CSS-deklarationer tillsammans. Vi kan återanvända dem senare som variabler.
Vi kan skapa en mixin med kommandot @ mixin följt av ett namn:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
eller vi kan skapa en mixin som en funktion och lägga till parametrar också:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
När vi har skapat mixinen kan vi använda den i vilken klass som helst med kommandot @ include. Vi kan alltså använda mixinen my-font i stället för 4 rader med typsnittsregler varje gång. Detta tillvägagångssätt förenklar koden.
p {
@include my-font;
}
Användning av mixins är ett bra sätt att förhindra redundans i koden.
Funktion #4: Imports
Slutligt kan vi skära ner våra enorma CSS-filer i mindre bitar med Sass importfunktion. Det är mycket lättare att & läsa & underhålla mindre filer än en stor fil med oändliga rader.
Faktiskt sett har CSS nu också en importfunktion. Men den fungerar annorlunda. CSS skickar en HTTP-förfrågan till servern varje gång en fil ska importeras. Sass gör det utan HTTP-förfrågan, vilket är ett snabbare tillvägagångssätt.
Det enda du behöver göra är att importera din Sass-fil med @ import-kommandot till en annan Sass-fil:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Vi behöver inte använda .scss-tillägget i filsökvägen, Sass kommer att förstå det.