Realizando Cálculos com Operadores Numéricos do Sass
Podemos realizar cálculos matemáticos com números. O Sass oferece suporte a todas as operações aritméticas básicas, como adição (+), subtração (-), multiplicação (*) e divisão (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
Para adição e subtração, é importante que os valores tenham as mesmas unidades (por exemplo, %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
Para multiplicação e divisão, é fundamental que um dos valores não tenha unidade. O Sass não consegue calcular a divisão de pixels ou porcentagens.
Operações matemáticas com variáveis
Podemos facilmente envolver variáveis nos cálculos se a variável possuir um valor válido.
Imagine que precisamos adicionar uma margem dupla ao item:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain why units must match for addition and subtraction in Sass?
What happens if I try to multiply two values with units in Sass?
Can you show more examples of using variables in Sass calculations?
Awesome!
Completion rate improved to 2.04Realizando Cálculos com Operadores Numéricos do Sass
Deslize para mostrar o menu
Podemos realizar cálculos matemáticos com números. O Sass oferece suporte a todas as operações aritméticas básicas, como adição (+), subtração (-), multiplicação (*) e divisão (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
Para adição e subtração, é importante que os valores tenham as mesmas unidades (por exemplo, %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
Para multiplicação e divisão, é fundamental que um dos valores não tenha unidade. O Sass não consegue calcular a divisão de pixels ou porcentagens.
Operações matemáticas com variáveis
Podemos facilmente envolver variáveis nos cálculos se a variável possuir um valor válido.
Imagine que precisamos adicionar uma margem dupla ao item:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
Obrigado pelo seu feedback!
