¿Cuáles son los tipos de datos que admite SASS?

Sass es un lenguaje de secuencias de comandos de preprocesador CSS. Aquí, no necesitamos confundir Sass y Scss, ambos son lo mismo, pero Sass tiene una sintaxis anterior a CSS3 y después de CSS3 se conoce como SCSS. Al igual que todos los demás lenguajes de programación, Sass también contiene tipos de datos para trabajar con diferentes tipos de datos que se utilizan. Sin embargo, Sass no es un lenguaje de programación estándar, sino que consta de tipos de datos. En este artículo, veremos todos los tipos de datos disponibles utilizados en Sass y también buscaremos algunos casos de uso. Si no conoce SASS, consulte los artículos completos de SASS Introducción y SASS . Sass contiene un total de 7 tipos de datos: 

• Números
• Booleanos
• Liza
• mapas
• Nulo
• Cuerda
• Colores

Analicemos cada tipo de datos en una secuencia.

Números: Sass considera el Número como números enteros y números reales juntos, en el momento del uso, reconoce qué valores se están utilizando. Hay algunas unidades estándar que se utilizan como px (unidad de píxeles) o em (unidad efímera). Para realizar una operación con números, debemos asegurarnos de que estamos usando la misma unidad; de lo contrario, arrojará algún error.

Ejemplo:

$len: 10;
$wid: 20.5;

.main{
    height: 10px + 10; // It is valid
    width: 20px - 5; // It is valid
}

.box0{
    height: 10px + $len; // Valid
    height: 10em + $wid; // Valid
}

.box{
    height: 10em + 10em; // It is valid
    width: 10px + 10em; // Error
}

Booleanos: Sass también tiene tipos de datos booleanos, Boolean tiene dos valores, es decir, puede ser verdadero o falso. Para trabajar con booleanos proporciona tres operadores básicos que se conocen como and, or y not. Tenga en cuenta que estamos usando letras minúsculas para los operadores porque las letras mayúsculas se considerarán strings en Sass.

y: Devuelve valores verdaderos si ambos valores son verdaderos, de lo contrario, devolverá un valor falso.

@debug true and true; // Returns true value

o: Devuelve un valor verdadero si uno de los dos valores es verdadero o si ambos valores son verdaderos y devuelve falso si ambos valores son falsos.

@debug true or false; // Returns true value
@debug false or false; // Returns false value

not: Devuelve el valor de negación del valor actual existente.

@debug not true; // Returns false value
@debug not false; // Returns true value

Listas: Sass admite el tipo de datos List, que se utiliza básicamente para representar series de valores separados por espacios o comas. Tenga en cuenta que si se utilizan valores únicos en la lista, se considerará como una lista válida.

Ejemplo :

$number-list: 10, 23, 10; // Separated by commas.
$number-list2: 10px 20px 30px; // Separated by spaces.

También podemos usar una lista anidada. En ese caso, usaremos ambos tipos de valores separados por comas y espacios, como se muestra a continuación.

$number-list3: 10, 20 30, 10; // Nested list.
$number-list4: 10, (20 30), 10; // Nested list same as $number-list3.

Habrá un caso más en el que una lista puede estar vacía.

$empty-list: ();

Maps: Maps en Sass es básicamente pares clave-valor. Estos pares deben estar separados por comas y todos los pares deben estar entre paréntesis.

$new-map: (primary: #fdfdfd, secondary: $fff, background: #f1f1f1);  

Para usar Maps en Sass, no podemos usarlos directamente. Sin embargo, hay algunas funciones que están disponibles en sass, con la ayuda de eso, podemos recuperar el valor de los mapas y usarlo en el lugar requerido. Estas son algunas funciones: –

• mapa-obtener
• combinación de mapas
• mapa-claves
• mapa-tiene-claves
• mapa-eliminar
• valores-mapa

Nulo: el tipo de datos nulo solo contiene un valor que básicamente se conoce como nada o desconocido, se representa como nulo en mayúsculas y minúsculas. Como hemos visto, algunos tipos de datos tienen algunas funciones y operadores, pero para nulo, no hay operadores y las funciones están disponibles en Sass.

$primary-color: null;

Tenga en cuenta que si alguna variable se inicializa con nulo y si intentamos usar esa variable, se ignorará en el momento de la compilación y esa variable en particular no se considerará.

Strings: Las strings son secuencias ordenadas de caracteres que se pueden representar entre comillas dobles o simples o sin comillas. Aquí hay algunos ejemplos que aclararán nuestra visión sobre las strings.

$color: blue;
$font-family: 'Courier New', Courier, monospace;
$heading: "Welcome";

Hay una cosa más que necesitamos saber en Sass. Existe un concepto de Interpolación que se utiliza para pasar la variable al selector. Su sintaxis está representada por #{<variable>}. Cuando usamos la interpolación, las strings entre comillas se desenvuelven de esas comillas, como se muestra en el ejemplo.

$heading: "GeeksforGeeks";

h2.#{$heading} {
  color: green;
}

En el código a continuación, podemos ver el código CSS para el código Sass anterior que se usa para la interpolación.

h2.GeeksforGeeks {
 color: green;
}

Colores: Sass admite el color como tipo de datos, ya que se utiliza para definir el valor del color. Aquí, podemos ver que las mismas expresiones de color que se utilizan en CSS normal.

RGB (Rojo, Verde, Azul):

$primary: rgb(214,121,45);

RGBA (Rojo, Verde, Azul, Alfa):

Alfa se utiliza para la transparencia y su valor varía de 0,0 a 1,0, donde 0 es completamente transparente y 1,0 es completamente opaco.

$color: rgba(210, 122, 54, 0.5)

HSL (tono, saturación, luminosidad):

Esta expresión contiene algunos parámetros diferentes además de los colores regulares.

$color: hsl(0, 0%, 100%);

• El tono se puede considerar como un color puro que se representa en una rueda de colores y se puede seleccionar mediante valores de 0 a 360, en los que cada valor contiene colores ligeramente diferentes.
• Saturaciónaplica un matiz al color a medida que aumenta su valor en términos de porcentaje. Al 0%, el color parece descolorido y, a medida que aumenta el valor, el color alcanza su forma más pura.
• Lightness aplica capas ligeras al color. Su valor varía de 0 a 100%, en 0 hace que el color sea completamente oscuro y en 100% completamente blanco.

HSLA (tono, saturación, luminosidad, alfa):

$color: hsla(100, 60%, 60%, 0.7)

Aquí, alfa se usa una vez más para la transparencia y su valor varía de 0,0 (transparente) a 1,0 (opaco).