Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utföra Beräkningar med Sass Numeriska Operatorer | CSS-Förprocessorer och Sass
Avancerade CSS-tekniker

bookUtföra Beräkningar med Sass Numeriska Operatorer

Vi kan utföra matematiska beräkningar på tal. Sass stöder all grundläggande aritmetik såsom addition (+), subtraktion (-), multiplikation (*) och division (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

För addition och subtraktion är det viktigt att värdena har samma enheter (t.ex. %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

För multiplikation och division är det avgörande att ett av värdena är utan enhet. Sass kan inte beräkna division av pixlar eller procenttal.

Matematiska operationer med variabler

Vi kan enkelt använda variabler i beräkningarna om variabeln har ett giltigt värde.

Anta att vi behöver lägga till en dubbel marginal till objektet:

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}
question mark

Välj det korrekta påståendet.

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 7. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookUtföra Beräkningar med Sass Numeriska Operatorer

Svep för att visa menyn

Vi kan utföra matematiska beräkningar på tal. Sass stöder all grundläggande aritmetik såsom addition (+), subtraktion (-), multiplikation (*) och division (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

För addition och subtraktion är det viktigt att värdena har samma enheter (t.ex. %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

För multiplikation och division är det avgörande att ett av värdena är utan enhet. Sass kan inte beräkna division av pixlar eller procenttal.

Matematiska operationer med variabler

Vi kan enkelt använda variabler i beräkningarna om variabeln har ett giltigt värde.

Anta att vi behöver lägga till en dubbel marginal till objektet:

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}
question mark

Välj det korrekta påståendet.

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 7. Kapitel 4
some-alt