SASS | Operadores numéricos

Sass admite los operadores numéricos matemáticos estándar. Se pueden convertir automáticamente entre unidades compatibles, al igual que se pueden agregar minutos con segundos y se convertirán automáticamente. 

Operadores numéricos:

• El operador <expresión> + <expresión> agrega dos valores o expresiones o podemos decir que agrega el primer valor al segundo valor.
• <expresión> – El operador <expresión> resta el primer valor del segundo . Esto necesita ser recordado.
• El operador <expresión> * <expresión> multiplica los dos valores.
• El operador <expresión> / <expresión> divide el primer valor por el segundo valor.
• El operador <expresión> % <expresión> devuelve el resto de la división del primer valor por el segundo. También se le conoce como operador módulo.

Ejemplos:

• @debug 20px + 10px

  SALIDA: 30px

• @debug 5s - 20s

  SALIDA: 15s

• @debug 10px * 2px

  SALIDA: 20px*px (lo sabrás sobre px*px más adelante en este artículo)

• @debug 10px / 2px

  SALIDA: 5px

• @debug 2in / 5px

  SALIDA: 0.0208 (1in == 96px)

• Los números sin unidad se pueden usar con cualquier número de unidad.

Ejemplo:

• @debug 20px + 7

  SALIDA: 27px

• @debug 4s * 10

  SALIDA: 40s

• Los números con unidades diferentes o incompatibles no se pueden sumar, restar ni utilizar para operadores de módulo.

Ejemplo:

• @debug 10s - 5px

  SALIDA: ERROR: Unidades incompatibles s y px

OPERADORES UNARIOS:

También puede usar + y – como operadores unarios en los que necesita una expresión simple.

• + <expresión> devuelve el valor sin cambiarlo.
• – <expresión> devuelve el valor como su versión negativa.

Ejemplo:

• @debug +(5s + 4s)

  SALIDA: 9s

• @debug -(6s + 3s)

  SALIDA: -9s

• @debug -(3s - 4s)

  SALIDA: -1s

UNIDADES:

Sass tiene una gran habilidad para manipular las unidades de acuerdo a su uso en la vida diaria (vida real). Esto significa que cuando se multiplican dos números, sus unidades se multiplican con los valores y lo mismo sucede en el caso de la división. Entenderás más con estos ejemplos:

• @debug 4px * 6px

  SALIDA: 24px*px

• @debug 10px/2s

  SALIDA: 5px/s

• @debug 10px * 4s * 2em / 2deg

  SALIDA: 40 px*s*em/grado

• $pixels-per-second : 10px/s @debug $pixels-per-second

  SALIDA: 10px/s

• @debug 1/$pixels-per-second

  SALIDA: 0.1s/píxel

Así, las unidades se cancelan si son compatibles y están en división:

• @debug 1in / 96px

  SALIDA: 1

Implementación práctica:

Los operadores anteriores se pueden usar para hacer que CSS funcione de manera fácil y rápida. 

Ejemplo:

No necesita proporcionar la velocidad del programa. de cada componente, crea un Sass que le proporciona el CSS para cada componente que desee.

Código Sass:

$speed: 1s/50px;
  
@mixin show($start, $stop) {
  left: $start;
  transition: left ($stop - $start) * $speed;
  
  &:hover {
    left: $stop;
  }
}
  
.navbar {
  @include show(5px, 10px);
}
  
.button {
  @include show(2px, 5px);
}

 Esto le dará automáticamente el siguiente código CSS:

.navbar {
  left: 5px;
  transition: left 0.1s;
}
.navbar:hover {
  left: 10px;
}

.button {
  left: 2px;
  transition: left 0.06s;
}
.button:hover {
  left: 5px;
}