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
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!
