Explicar cómo definir una variable en SASS

Posted on by Rudeus Greyrat

HABLAR CON DESCARO Aes una forma abreviada de Syntactically Awesome Style Sheet que es una extensión de Cascading StyleSheet (CSS). Es un preprocesador de CSS. Está compilado en CSS y es totalmente compatible con todas las versiones de CSS. Sass reduce la repetición de CSS y, por lo tanto, ahorra tiempo. Permite usar variables, reglas anidadas, mixins, funciones y más, todo con una sintaxis totalmente compatible con CSS. Ayuda a organizar una hoja de estilo estructurada compleja y grande de una manera bien organizada y, por lo tanto, facilita la reutilización del código. Las variables SASS no se pueden cambiar, lo que significa que si las variables se vuelven a declarar, el valor anterior permanece sin cambios, a diferencia de CSS. Por lo tanto, las variables SASS también se conocen como imperativas. Las variables SASS solo pueden tener un valor a la vez, lo que significa que no pueden tener diferentes valores de diferentes elementos. Podemos almacenar la información relacionada con strings de números, listas, booleanos, colores y nulos en las variables SASS. Es una extensión de código abierto y de uso gratuito diseñada por Hampton Catlin y desarrollada por Natalie Weizenbaum y Chris Eppstein en 2006.

Sass presenta varias funciones que no existen en CSS, como variables que se pueden usar para almacenar datos o información que puede usar más adelante. Es una característica importante de Sass. En este artículo, aprenderemos cómo definir una variable en Sass y comprenderemos su implementación a través del ejemplo.

Variables Sass: 

  • Las variables Sass se declaran una vez para almacenar datos que se pueden reutilizar cuando sea necesario.
  • Si modifica el valor de la variable una vez, los cambios se reflejan en todos los lugares siempre que se utilicen las variables.
  • En Sass, podemos almacenar datos en múltiples tipos, como Números, Strings, booleanos, listas, nulos, etc.
  • Sass usa el símbolo del dólar ($) para declarar una variable seguida del nombre de la variable especificada y el valor de esa variable separados por dos puntos (:). La línea debe terminar con un punto y coma (;). Las variables también se pueden utilizar con otros valores.
  • También puede usar guiones bajos (_) o guiones (-) para declarar nombres de variables descriptivos.
  • Podemos mejorar la eficiencia de Sass realizando múltiples operaciones matemáticas en las variables.

Sintaxis: 

$var_Name : var-value;

Ejemplo: Los siguientes ejemplos demostrarán cómo definir variables en SASS.

Nombre de archivo : estilo.scss

// Global variable declaration
$global__light: #f9f9f9;
$global__dark: #000;
$global__font: ("Poppins");
$global__f_size: 26;
$global__Max_width: 1280px;

div {
  $local__green: #00f034;
 
  // Global variable called
  color: $global__dark;
  border: 1px solid $local__green;
  font: $global__font;

  // Global variable called
  max-width: $global__Max_width;
}

$global_sky: #0000ff;

p {

  // Local variable declare
  $local__margin: 10px 5px 20px 0;
  color: $global__dark;
  border: 1px solid $global_sky;
  font-size: $global__f_size;

  // Local variable called
  margin: $local__margin;
}

Salida: La salida CSS generada será:

Nombre de archivo: estilo.css

div {

  /* Global variable called */
  color: #000;
  border: 1px solid #00f034;
  font-family: "Poppins";

  /* Global variable called */
  max-width: 1280px;
}

p {
  color: #000;
  border: 1px solid #0000ff;
  font-size: 26;

  /* Local variable called */
  margin: 10px 5px 20px 0;
}

/*# sourceMappingURL=style.css.map */

Ejemplo 1: este ejemplo ilustra las variables SASS que se compilan en variables CSS y definen sus alcances.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Sass Variable</title>
    <style>
        div {
           
            /* Global variable called */
            color: #000;
            border: 1px solid #00f034;
            font-family: "Poppins";
           
            /* Global variable called */
            max-width: 1280px;
        }
         
        p {
            color: #000;
            border: 1px solid #0000ff;
            font-size: 26;
           
            /* Local variable called */
            margin: 10px 5px 20px 0;
        }
    </style>
</head>
 
<body>
    <div>Welcome to GeeksforGeeks</div>
     
<p>A Computer Science portal for geeks.</p>
 
</body>
</html>

Producción:

Alcance de una variable Sass: Al igual que otros lenguajes, Sass también tiene el concepto de alcance. En Sass, puede declarar el alcance de la variable de dos maneras, que son las siguientes:

  • Variables globales
  • Variables locales

Ejemplos: Aquí, podemos ver cómo podemos usar el alcance de las variables Sass.

  • Ámbito de variable global: las variables globales se declaran en la parte superior del archivo y puede usarlas en cualquier parte del código. También puede usar !global para declarar una variable local como una variable global.

Nombre de archivo: estilo.scss

// It is a global variable
$clr_primary: #a9a5f4;

div {

  // Local variable with global scope
  $clr_dark: #000 !global;
  background-color: $clr_primary;
}

p {
  background-color: $clr_dark;
}

Y la salida CSS generada será:

Nombre de archivo: estilo.css

div {

  // Here, clr_primary variable assigned
  background-color: #a9a5f4;
}

p {

  // Here, clr_dark variable assigned
  background-color: #000;
}
  • Variable local: las variables, que se declaran en bloque o con paréntesis {}, es decir, dentro de las llaves, son variables locales y no puede usarlas fuera del alcance de ese bloque en particular. 

Si intenta usar una variable fuera del alcance, esto generará un error que dice «Error de compilación: variable no definida», como se muestra a continuación.

div {
  $clr__dark: #000; // local variable
  background-color: $clr_dark;
}

p {

  // We cannot use this variable here.
  // It will throw an error.
  background-color: $clr_dark;
}

Estilo.scss:

div {

  // Local variable scope
  $clr_light: #f9f9f9;
  background-color: $clr_light;
}

p {

  // Local variable scope
  $clr_dark: #000;
  background-color: $clr_dark;
}

style.css: la salida CSS generada será:

div {

  // Here, clr_light variable assigned
  background-color: #f9f9f9;
}

p {

  // Here, clr_dark variable assigned
  background-color: #000;
}

Ejemplo 2: Este ejemplo ilustra el uso de las variables SASS al compilarlas en variables CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Sass Variable</title>
    <style>
    div {
        /* Here, clr_light variable assigned */
        background-color: #f9f9f9;
    }
     
    p {
        /* Here, clr_dark variable assigned */
        background-color: #000;
    }
    </style>
</head>
 
<body>
    <div>Welcome to GeeksforGeeks</div>
     
<p>A Computer Science portal for geeks.</p>
 
</body>
</html>

Producción:

Ejemplo 3: En este ejemplo, usando $Color: red !global; en lugar de $Color: rojo; lo hará global y accesible en toda la hoja de estilo. Así, todo el texto será de color rojo. El alcance predeterminado de la variable será reemplazado por !global . No se puede utilizar para declarar una nueva variable.

HTML

<html>
<head>
    <title>SASS Variable Scope</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
</body>
</html>

estilo.scss:

$Color: green;
h1 {
$Color: red !global;
color: $Color;
}
p{
color: $Color;
}

style.css: la salida CSS generada será:

h1{
 color : red;
}
p{
 color : red;
}

Producción:

 

Nota : Al igual que !global , también podemos usar !default para asignar el valor deseado si la variable no está definida o su valor es nulo .

Ámbito de control de flujo : utilizando el ámbito de control de flujo, podemos condicionalmente asignar valor a una variable. Las variables no ocultan a las otras variables en el mismo nivel; sin embargo, solo se asignan a esos valores.

Ejemplo 4 : En este ejemplo, veremos cómo aplicar condiciones a la variable y si la condición se cumple, le asignaremos un valor determinado.

HTML

<html>
<head>
    <title>SASS Flow Control Scope</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to GeeksforGeeks</h1>
</body>
</html>

Código SCSS: 

$theme: true !default;
$color: green!default ;
@if $theme 
{
   $color: lighten($color,50%) ;
}
h1{
   color: $color; 
}

style.css: la salida CSS generada será:

h1 {
 color: #80ff80; /*50% lighter than green*/
}

Explicación : en este ejemplo, $theme se establece en True de forma predeterminada. Por lo tanto, la condición si se cumple y el color se aclarará al 50% de su valor original. Como se ve en la salida, el color verde se aclara en un 50 %.

Producción:

 

Diferencia entre la variable SASS y las variables CSS:

S. No.

Variable SASS

Variables CSS
1.

Todas las variables se compilan en Sass.

Las variables se incluyen en la salida CSS y no es necesario compilarlas.
2.

Las variables de Sass contienen solo un valor a la vez.

Las variables CSS pueden contener diferentes valores para diferentes elementos.
3.

Las variables Sass son imperativas, es decir. si se cambian los valores de las variables que hemos utilizado, sus valores utilizados anteriormente seguirán siendo los mismos.

Las variables CSS son declarativas, es decir, si cambiamos el valor de la variable, afectará tanto a los valores que se usaron previamente como a los que se usaron más tarde.

Referencia: https://sass-lang.com/documentation

Publicación traducida automáticamente

Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *