Sass - Tipos de datos

Tipos de datos

El tipo de datos es un tipo de información que requiere declarar el tipo de datos para cada objeto de datos. La siguiente tabla muestra varios tipos de datos compatibles con SassScript:

S.No.	Tipo de datos y descripción	Ejemplo
1	Numbers Representa tipos enteros.	2, 10,5
2	Strings Es una secuencia de caracteres definida entre comillas simples o dobles.	'Tutorialspoint', "Tutorialspoint"
3	Colors Se utiliza para definir el valor del color.	rojo, # 008000, rgb (25,255,204)
4	Booleans Devuelve tipos booleanos verdaderos o falsos.	10> 9 especifica verdadero
5	Nulls Especifica un valor nulo que son datos desconocidos.	if (val == null) {// declaraciones}
6	Space and Comma Representa los valores que están separados por espacios o comas.	1px sólido #eeeeee, 0 0 0 1px
7	Mapping Se asigna de un valor a otro valor.	FirsyKey: frstvalue, SecondKey: secvalue

Instrumentos de cuerda

Las cadenas son series de caracteres, que se representan entre comillas simples o dobles. Las cadenas que se definen con comillas simples o dobles se mostrarán como valor de cadena sin comillas utilizando#{ } interpolación (es una forma de usar variables en selectores).

Ejemplo

El siguiente ejemplo demuestra el uso de cadenas en el archivo SCSS:

<html>
   <head>
      <title>Strings</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">
         <h2>Example using Strings</h2>
         <p class = "tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

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

style.scss

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando 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

p.tutorialspoint {
   color: blue;
}

Salida

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

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

Liza

Las listas especifican varios valores que se separan mediante espacios o comas. Incluso los valores individuales se consideran una lista.

SASS utiliza algunas de las funciones de la lista como:

nth function - Proporciona un elemento específico de la lista.
join function - Une varias listas en una.
append function - Agrega el elemento al otro extremo de la lista.
@each directive - Proporciona estilos para cada elemento de la lista.

Por ejemplo, considere que hay dos tipos de listas; la primera lista contiene los siguientes valores que se separan mediante comas.

10px 11px, 15px 16px

Si la lista interna y la lista externa tienen el mismo separador, puede usar paréntesis para especificar dónde comenzarán y detenerse ambas listas. Puede especificar estas listas como se muestra a continuación:

{10px 11px} {15px 16px}

Mapas

Los mapas son una combinación de claves y valores en los que las claves se utilizan para representar los valores. Los mapas definen valores en grupos y se puede acceder a ellos de forma dinámica. Puede escribir una expresión de mapa como:

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

Utiliza algunas de las funciones como:

map-get - Proporciona valores del mapa.
map-merge - Agrega valores al mapa.
@each directive - Especifica estilos para el par clave / valor en el mapa.

Los mapas representan pares clave / valor vacíos como ( ) sin elementos y utiliza el inspect ($value) función para mostrar la salida de los mapas.

Colores

Se utiliza para definir el valor de color de SassScript. Por ejemplo, si está utilizando un código de color como # ffa500 , se mostrará como color naranja en el modo comprimido. SASS proporciona el mismo formato de salida que se escribe en los otros modos de salida, que se convierte en una sintaxis no válida cuando se interpola un color en un selector. Para solucionar este problema, utilice los nombres de los colores entre comillas.

↰ Previous page