Funktion #1: Variabler
Flere CSS-klasser kan indeholde den samme regel eller de samme regler i et projekt. Vi har f.eks. 20 kasser på vores webside med forskellige baggrundsfarver:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Sidst ændrer vores kunde mening og ønsker større kasser. Så jeg skal øge hver klasses width og height-egenskaber én efter én. Dette kunne også være 50 klasser. I det virkelige liv programmering kan dette være frustrerende. Som jeg nævnte ovenfor, er dette et eksempel på stor indsats for små ændringer.
Hvordan kan vi gøre det mere effektivt?
Sass giver en løsning: variabler. Ligesom i andre programmeringssprog kan vi bruge variabler til at gemme værdier og genbruge dem senere.
Definition af en variabel:
$variable-name: value;
Går vi tilbage til eksemplet ovenfor, hvis vi definerer variabler til width & height :
$box-width: 100px;
$box-height: 100px;
senere, når der er behov for en ændring, skal vi blot ændre deres værdier én gang:
$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 selv understøtter også variabler nu, men det virker ikke i IE & gamle versioner af andre browsere:
Funktion nr. 2: Nesting
Standard-CSS understøtter ikke nesting. Vi kan ikke skrive en klasse inde i en anden klasse. Når projektet bliver større, giver det et læsbarhedsproblem, og strukturen ser ikke pæn ud.
Lad os f.eks. definere en navigationsmenu med klikbare links i HTML nedenfor:
<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 understøtter indlejret kode. Men uden nesting ser de sådan ud i CSS:
Vi var nødt til at skrive nav for hvert tag, selv for pseudoklassen for ankeret (hover), fordi nav er det overordnede tag for alle. Sass understøtter imidlertid nesting:
Her kan vi skrive bedre struktureret kode som i HTML. Vi behøver ikke at skrive nav klasse efter klasse, hvilket også forhindrer redundans
Vigtigt: Det anbefales ikke at indlejre klasser dybere end 3 niveauer.
Funktion #3: Mixins
Vi lærte ovenfor, hvordan man bruger variabler til CSS-regler. Men hvad nu, hvis vi har brug for at bruge en gruppe af regler sammen? Sass har en funktion kaldet mixins, der lader os gøre det.
Hvad er en mixin?
Mixins er Sass-funktioner, der grupperer CSS-deklarationer sammen. Vi kan genbruge dem senere som variabler.
Vi kan oprette en mixin med kommandoen @ mixin efterfulgt af et navn:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
eller vi kan oprette en mixin som en funktion og også tilføje parametre:
$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 oprettet mixin’et, kan vi bruge det i en hvilken som helst klasse med kommandoen @ include. Så vi kan bruge mixin’en my-font i stedet for 4 linjer med skrifttyperegler hver gang. Denne fremgangsmåde forenkler koden.
p {
@include my-font;
}
Brug af mixins er en god måde at forhindre redundans i koden.
Funktion #4: Imports
Endeligt kan vi skære vores enorme CSS-filer i mindre stykker med Sass import-funktionen. Det er meget nemmere at & læse & vedligeholde mindre filer frem for én stor fil med endeløse linjer.
Egentlig har CSS nu også en importfunktion. Men den fungerer på en anden måde. CSS sender en HTTP-anmodning til serveren hver gang for at importere en fil. Sass gør det uden en HTTP-anmodning, hvilket er en hurtigere fremgangsmåde.
Det eneste du skal gøre er at importere din Sass-fil med @ import-kommandoen til en anden Sass-fil:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Vi behøver ikke at bruge .scss-udvidelserne i filstien, Sass vil forstå det.