Matematiska operationer

Det går att göra beräkningar i Sass, särskilt smidigt med variabler.

Ett vanligt förekommande användingsområde är att räkna om textstorleken från pixlar till rem eller em.

En function är ungefär som en mixin, men istället för att kopiera ett helt kodblock får vi bara tillbaka ett (i det här fallet numeriskt) värde.

/**
* Denna funktion tar emot en s.k. "parameter" ($fontSize), som
* förväntas vara ett pixelvärde - exempelvis 32.
*
* 16px = 1 rem, så 32/16 = 2.
* Sedan tar vi 2 * 1rem för att få ut "rem" som "slutenhet".
*
* Det hade också gått bra att skriva:
* $rem: ($fontSize / 16) + rem;
* på rad 16.
*/
@function pxToRem($fontSize) {
  // Vi delar pixelvärdet med 16, exempelvis 32/16 = 2.
  // Sedan tar vi det * 1rem.
  // Detta gör vi för att konvertera enheten från bara en siffra till rem.
  $rem: ($fontSize / 16) * 1rem;
  
  // Sedan "skickar vi tillbaka" det färdiga värdet (returnerar det)
  @return $rem;
}

h1 {
  font-size: pxToRem(32); // Här anropar vi funktionen och säger att
  // vi vill göra om 32 (pixlar) till rem
}

Det finns olika sätt att lösa samma uppgift på, men detta för en demonstration av matematiska operatorer och operationer i Sass.

Våga Fråga-lådan

Anonyma frågelådan

Klar?