Realización de Cálculos con Operadores Numéricos de Sass
Podemos realizar cálculos matemáticos con números. Sass admite todas las operaciones aritméticas básicas como suma (+), resta (-), multiplicación (*) y división (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
Para la suma y la resta, es importante que los valores tengan las mismas unidades (por ejemplo, %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
Para la multiplicación y la división, es fundamental que uno de los valores no tenga unidad. Sass no puede calcular la división de píxeles o porcentajes.
Operaciones matemáticas con variables
Es posible incluir variables en los cálculos si la variable tiene un valor válido.
Supongamos que se necesita agregar un margen doble al elemento:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04Realización de Cálculos con Operadores Numéricos de Sass
Desliza para mostrar el menú
Podemos realizar cálculos matemáticos con números. Sass admite todas las operaciones aritméticas básicas como suma (+), resta (-), multiplicación (*) y división (/).
width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */
Para la suma y la resta, es importante que los valores tengan las mismas unidades (por ejemplo, %, px).
animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */
Para la multiplicación y la división, es fundamental que uno de los valores no tenga unidad. Sass no puede calcular la división de píxeles o porcentajes.
Operaciones matemáticas con variables
Es posible incluir variables en los cálculos si la variable tiene un valor válido.
Supongamos que se necesita agregar un margen doble al elemento:
$defaultMargin: 30px;
.item {
margin: $defaultMargin * 2; /* Result is 60px */
}
¡Gracias por tus comentarios!
