Sass - Operaciones numéricas

Descripción

SASS permite operaciones matemáticas como suma, resta, multiplicación y división. No puede usar unidades incompatibles como px * px o mientras agrega números con px y em conduce para producir CSS no válido. Por lo tanto, SASS mostrará un error si usa unidades no válidas en CSS. SASS admite operadores relacionales como <,>, <=,> = y operadores de igualdad = =,! =.

División y /

SASS permite la operación de división (/) en números como lo hacemos en CSS normal. Puede utilizar la operación de división (/) en tres situaciones.

Si el valor se almacena en una variable o lo devuelve una función.
Si los paréntesis están fuera de la lista y el valor está dentro, el valor estará entre paréntesis.
Si el valor es parte de una expresión aritmética.

Resta, números negativos y -

Con SASS, puede realizar algunas operaciones como la resta de números (10px - 5px), negar un número (-5), un operador de negación unario (- $ myval) o usar un identificador (tamaño de fuente). En algunos de los casos, estos son útiles como:

puede usar espacios a ambos lados de - al realizar la resta de números
puede usar un espacio antes del -, pero no después del número negativo o una negación unaria
puede encerrar la negación unaria entre paréntesis separados por espacio (5px (- $ myval))

Examples are −

Se puede usar en identificadores como el tamaño de fuente y SASS solo permite identificadores válidos.
Se puede usar con dos números sin espacios, es decir, 10-5 es similar a 10-5.
Se puede utilizar como comienzo de un número negativo (-5).
Se puede usar sin tener en cuenta el espacio, como 5 - $ myval es similar a 5 - $ myval.
Se puede usar como operador de negación unario (- $ myval).

Ejemplo

El siguiente ejemplo demuestra el uso de operaciones numéricas en el archivo SCSS:

<html>
   <head>
      <title>Number Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <p class = "para1">SASS stands for Syntactically Awesome Stylesheet..</p>
         <h2>Hello...Welcome to Sass</h2>
         <h3>Hello...Welcome to Sass</h3>
         <p class = "para2">Hello...Welcome to Sass</p>
      </div>
   </body>
</html>

A continuación, cree el archivo style.scss .

style.scss

$size: 25px;

h2{
   font-size: $size + 5;
}

h3{
   font-size: $size / 5;
}

.para1 {
   font-size: $size * 1.5;
}

.para2 {
   font-size: $size - 10;
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, usando el siguiente comando

sass --watch C:\ruby\lib\sass\style.scss:style.css

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

h2 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente en number_operations.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page