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
Genial!
Completion tasa mejorada a 2.08Realizació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!
