Wiskundige bewerkingen in SASS

In de taal SASS is het mogelijk om wiskundige bewerkingen uit te voeren op variabelen en verschillende waarden. Laten we eens kijken naar voorbeelden.

Voorbeeld

Laten we twee waarden optellen:

styles.scssp {
  font-size: 5px + 10px;
}

Resultaat van compilatie:

styles.cssp {
  font-size: 15px;
}

Voorbeeld

Laten we de ene waarde van de andere aftrekken:

styles.scssp {
  font-size: 25px - 10px;
}

Resultaat van compilatie:

styles.cssp {
  font-size: 15px;
}

Voorbeeld

Laten we een waarde met een getal vermenigvuldigen:

styles.scssp {
  font-size: 5px * 5;
}

Resultaat van compilatie:

styles.cssp {
  font-size: 25px;
}

Voorbeeld

Laten we een waarde door een getal delen:

styles.scssdiv {
  width: 100% / 3;
}

Resultaat van compilatie:

styles.cssdiv {
  width: 33.33333333%;
}

Voorbeeld

Laten we een waarde optellen bij de inhoud van een variabele:

styles.scss$var: 100px;

div {
  width: $var + 100px;
}

Resultaat van compilatie:

styles.cssdiv {
  width: 200px;
}

Voorbeeld

Laten we twee variabelen optellen:

styles.scss$var1: 100px;
$var2: 200px;

div {
  width: $var1 + $var2;
}

Resultaat van compilatie:

styles.cssdiv {
  width: 300px;
}

Voorbeeld

Bij een poging tot bewerking met verschillende eenheden zal SCSS alle eenheden omzetten naar één - de eerste. Voorbeeld:

styles.scssdiv {
  width: 100% - 10px;
}

Resultaat van compilatie:

styles.cssdiv {
  width: 90%;
}

Praktische opdrachten

styles.scss#block {
  width: 100px * 2;
}

styles.scss#block {
  width: 200px / 3;
}

styles.scss$var1: 500px;
$var2: 5;

#block {
  width: $var1 / $var2;
}