En esta guía vamos a aprender los conceptos fundamentales de Sass, el Preprocesador de CSS más poderoso que nos ayuda a ser más eficientes al escribir nuestro código de estilos.

Introducción a Sass

Sabemos que el código CSS como tal es aburrido, abundante y lleno de propiedades repetidas donde lo único diferente será el valor de cada una. Es ahí donde los preprocesadores CSS entran y extienden el CSS con modernos conceptos de programación.

Los preprocesadores CSS nos permiten utilizar variables, funciones, operaciones e incluso normas para anidar selectores. Con los preprocesadores podemos aplicar el principio DRY “Don’t Repeat Yourself” que nos insta a no repetir código CSS.

¿Que son los Preprocesadores CSS?

Un preprocesador es un sistema que convierte datos de un estado a otro. En el contexto de CSS y el preprocesador SASS, éste toma datos de estilos escrito bajo la extensión .scss o .sass a hojas de estilos simples y legibles por todos los navegadores web.

Introducción a Sass

Pero… ¿Porque necesitamos un Preprocesador?

CSS es un declarativa, no es un lenguaje de programación. Esto significa que las propiedades de estilo y los valores que declaramos dentro de las reglas de son exactamente lo que el navegador utiliza para pintar la pantalla.

Un lenguaje de programación en el otro lado proporciona métodos de definición según la lógica, nos permite automatizar, reutilizar y operar sobre los valores de las propiedades.

Aunque la necesidad de utilizar un preprocesador se notará más cuando trabajemos en proyectos grandes con extensas opciones. Es ahí cuando veremos la gran utilidad de estos sistemas de preprocesamiento.

Existen varios preprocesadores CSS, los más importantes y conocidos son: SASS, LESS y STYLUS, siendo Sass el más funcional y Stylus el que más prometía y Less que ya es historia.

SASS “CSS con Superpoderes”

sass-logoSass significa se define como “Hojas de estilos sintácticamente impresionante”. Este es un proyecto ideado y diseñado por Hampton Catlin y Natalie Weizenbaum. Estos definen a Sass como una alternativa para escribir CSS de una forma dinámica y divertida, es un metalenguaje capaz de producir código CSS desde un lenguaje programado y dinámico. Cabe decir que Sass es de código abierto y esta codificado en Ruby.

Veamos un ejemplo y consideremos un ejemplo de la repetición de código y como SASS nos puede ayudar.

SCSSCSS
@mixin bloque1($width) {
  padding-bottom: 45px;
  text-align:center;
  width: $width;
}
p {
  @include bloque1(50%);
}
footer {
  @include bloque1(100%);
}
section.bloque {
  @include bloque1(560px);
}
p {
  padding-bottom: 45px;
  text-align: center;
  width: 50%;
}
footer {
  padding-bottom: 45px;
  text-align: center;
  width: 100%;
}
section.bloque {
  padding-bottom: 45px;
  text-align: center;
  width: 560px;
}

Con SASS, podemos poner estas reglas redundantes en un mixin el cual definimos una sola vez y después lo vamos a poder incluir, las veces que sea necesario e incluso le podemos pasar como parámetro los valores diferenciales de cada propiedad, como lo hicimos en el pequeño ejemplo anterior.

Las diferentes sintaxis de Sass

En un principio Sass utilizaba solo la sintaxis .sass y esto se daba gracias a que eran las iniciales de Syntactically Awesome Stylesheets, por ende esta se utilizo como extensión de los archivos de forma oficial. Luego en el año 2009 se introdujo la extensión .scss, formato que se adhirió más a la sintaxis CSS habitual, con la insignia de si es CSS válido, es SCSS válido:

  • .sass : La sintaxis con sangría, inspirado en el lenguaje de programación Ruby. Usa la sangría para separar los bloques de código y los saltos de línea para separar las reglas.
  • .scss : SCSS, o Sassy CSS, utiliza un formato de bloque similar al de CSS, utiliza llaves para denotar bloques de código y punto y coma para separar líneas dentro de un bloque.
SINTAXIS SASSSINTAXIS SCSS
.bloque__1
  background-color: #2d5e8b
  .bloque__2
    background-color: #fff
    color: #2d5e8b
.bloque__1 {
  background-color: #2d5e8b;
  .bloque__2 {
    background-color: white;
    color: #2d5e8b;
  }
}

En cuanto a qué sintaxis utilizar, la elección depende realmente del autor, ya que ambos son estrictamente equivalentes en cuanto a características. La sintaxis con sangría de Sass es más corta y liviana de escribir porque casi toda la puntuación desaparece, pero también es incompatible con la sintaxis de CSS predeterminada.

También es cierto que la sintaxis de SCSS es el más popular en la comunidad ya que está más cerca del CSS tradicional y tiene una curva de aprendizaje más fácil, al contrario de la sintaxis de Sass, sensible al espacio en blanco. En esta guía utilizaremos SCSS.

Empezar a trabajar con Sass : Entorno de trabajo

Podemos comenzar con Sass de múltiples maneras, hay varias formas de instalación que van en consecuencia desde nuestro sistema operativo, nivel de conocimiento y de cuan grande será nuestro proyecto. Aquí aprenderás acerca de un par de métodos comunes.

Formas de empezar a trabajar con Sass Básicamente hay formas de comenzar a trabajar con este preprocesador de CSS:

  1. Utilizar una aplicación online.
  2. Utilizar un software o aplicación de escritorio.
  3. Utilizar scripts de automatización y ventanas de comando.

Como dije anteriormente, la forma de uso va a depender de tu situación, de como quieras trabajar y de lo que quieres lograr. Pero veamos estas formas de trabajo en detalle.


1. Utilizar una aplicación online

Si no está cómodo con la línea de comando y no quieres hacer ningún tipo de instalación tienes un par de opciones para trabajar con Sass en linea. Las principales son:

  • SassMeister : Todo lo que necesitas hacer es escribir tu Sass en la entrada de la izquierda y el sitio web lo convierte automáticamente en CSS en la salida de la derecha. Ademas podemos configurar desde el motor compilador, la sintaxis a utilizar y el formato de salida.
  • Codepen : Otra buena opción a utilizar, simplemente elegimos crear un nuevo pen, configuramos el proyecto y en la opción css elegimos el preprocesador a utilizar y la sintaxis de Sass utilizar.

2. Utilizar un software o aplicación de escritorio.

Se trata de aplicaciones gráficas y amigables creadas para procesar hojas en el formato del preprocesador de forma fácil, algunas son de pago y otras gratuitas, algunas con más opciones que otras pero que al final todas nos servirán para el mismo objetivo, procesar nuestras hojas Sass. Veamos las más conocidas:

  • Codekit (de Pago) (solo para Mac)
  • Prepros (de Pago) (disponible en Mac, Windows y Linux)
  • Scout (open source) (disponible en Mac, Windows y Linux)
  • Koala (Gratuita) (disponible en Mac, Windows y Linux)

3. Utilizar ventana de comando

Sass esta disponible como una gema de Ruby (Ruby Sass) y una biblioteca de C / C ++ (conocida como LibSass). Ahora veremos cómo configurarlo en estos entornos, comenzando con la versión de Ruby.

1. Ruby Sass

El lenguaje de programación Ruby maneja sus dependencias como gemas y Sass es una de esta. Por lo tanto al instalar esta tendremos un paquete que contiene todo lo necesario para compilar las hojas de estilo Sass a CSS. Así que para instalar la gema Sass, primero necesitarás Ruby.

Una gema de Ruby no es más que un paquete que contiene información de programa (o script) junto con archivos para instalar.

Instalando ruby

  • Mac Os : En este sistema operativo Ruby ya viene preinstalado, así que no hay nada para instalar.
  • Ubuntu Linux : En las distribuciones de Debian o Ubuntu Linux necesita instalar Ruby manualmente:
    sudo apt-get install ruby-full
  • Windows : Para windows vamos a http://rubyinstaller.org. Una vez descarguemos el instalador que necesitamos, dependiendo el sistema de windows que tengas procederemos a la típica instalación de una aplicación en windows de siguiente, siguiente.

Instalando Sass

Una vez Rubí está correctamente configurado podemos iniciar la instalación de gemas, en particular la que nos importa, Sass. Para instalarlo abrimos una ventana de terminal (en Mac OS sería la aplicación Terminal, mientras que en Windows, sería la ventana de linea de comando de windows o la misma de ruby ). Luego escribe el siguiente comando:

gem install sass

En Mac o Linux necesitarás anteponer el comando “sudo”.

sudo gem install sass

Una vez instalado Sass en nuestro sistema podremos verificar la versión instalada en nuestro sistema con la siguiente línea de comando.

sass -v

Esto nos mostrará el número de la versión instalada de Sass.

Listo! Sass ahora está instalado en su máquina y podemos usar los comando que veremos a continuación para compilar sus hojas de estilo.

Ejecutando Sass con Ruby

Ahora que hemos instalado la gema de Sass en Ruby, intentemos usarla. El comando más simple a utilizar es el de compilación simple, este comando acepta un archivo de entrada y un archivo de salida, así:

sass styles.scss styles.css

En el comando anterior le especificamos a Sass que acepte styles.scss como archivo a procesar y genere un archivo styles.css ya procesado.

2. LibSass (con node-sass)

LibSass no se puede utilizar trabajar por sí solo y debe ser empaquetado por otra biblioteca para proporcionar una interfaz para compilar las hojas de estilo. El contenedor más popular para LibSass es node-sass, un paquete de Node.js que compila de Sass a CSS a través de LibSass.

Instalación de Node.js

Node JsPara poder usar node-sass necesitaremos Node.js. La forma más fácil de instalar Node.js es mediante el uso de uno de los instaladores en la página de inicio del proyecto https://nodejs.org. Una vez hecho esto, podrás instalar paquetes de node.

Instalación de node-sass

Node-sass es un paquete Node distribuido a través de npm. Proporciona una interfaz de línea de comando y una API de JavaScript que interactua con el programa. Su primera tarea es instalarlo, ya sea localmente en el proyecto con --save o globalmente con -g

npm install node-sass -g

Ejecutando Sass con node-sass

Las interfaces de línea de comandos de Ruby Sass y node-sass son similares pero no compatibles, por lo que en caso de duda, consulte la documentación de la librería correspondiente.

Compilamos un archivos de scss o sass a css de la siguiente manera. Casi igual que con Ruby Sass:

node-sass styles.scss styles.css

Ahora estamos listos para comenzar a escribir Sass. En los siguientes apartados veremos como comenzar a hacerlo!.

Empezar a trabajar con Sass : Primeros pasos

Una vez instalado Sass en nuestro sistema podemos iniciar la codificación y compilación. como ya hemos dicho, debemos especificar qué archivo Sass debe de ser vigilado por el sistema para que cuando se genere algún cambio este se precompile en un archivo de salida con formato .css Esto se puede hacer usando el siguiente comando. (esto depende de que sistema de procesamiento utilicemos).

De la siguiente forma Sass compila la hoja style.scss a style.css cada vez que se ejecute línea de comando:

sass styles.scss styles.css

Sass viene con una función observadora: Se trata de --watch. Esta actúa cada vez que el sistema detecte un cambio en los archivos de entrada .scss o .sass :

sass --watch styles.scss styles.css

De la anterior forma procesamos un archivo .scss. Pero la mayoría de las veces los estilos se escriben en una gran cantidad de archivos reunidos en una carpeta. Entonces Querrá que Sass compile toda la carpeta sin tener que especificar una lista de archivos manualmente. Esto lo hacemos de la siguiente forma:

sass --watch sass/:styles/.

De la anterior forma le decimos a Sass por medio de Ruby Sass que vigile la carpeta y procese todos los archivos contenidos en ella.

Con Node-Sass hacemos lo siguiente:

node-sass --watch sass/ --output styles/

Lo que hemos hecho anteriormente es procesar archivos sass a css dentro del mismo directorio. Si queremos que los archivos css se procesen y se guarden en otro directorio lo unico que debemos hacer es especificarlo en el comando de ejecución.

node-sass --watch assets/scss/ --output assets/css/

Comentarios en Sass

Si eres de los que al momento de programar documenta todo como buena práctica, sé que tendrás la necesidad de hacerlo en Sass. Los comentarios aunque no influyen en el resultado final, sí que son importantes en cualquier lenguaje de programación, estilos o marcado.

Un comentario es una parte del código que puede explicar los objetivos, indicar correcciones o simplemente hacerle saber a alguien cómo está estructurado.

Aunque este tema de los comentarios no es de carácter obligatorio, si que es una buena práctica que puede ser de beneficio para ti o para cualquier persona que en un futuro intente editar la hoja de código.

Los comentarios en Sass los podemos hacer de dos formas, los comentarios de una sola línea y los comentarios de múltiples líneas:

Comentario de una linea

Estos comentarios de tipo lenguaje de programación comentan la linea y evitan que estos aparezcan en los archivos procesados CSS. Para implementarlos simplemente colocamos al comienzo de cada linea el “doble slash” //...

// comentario de una linea...

Comentario multilíneas

Este estilo de comentarios lo logramos simplemente colocando contenido entre los slash y los asteriscos : /* ... */ Estos puede ser útil para el código pues este tipo de comentarios si se verá en la versión procesada del archivo CSS final, ya sea para indicar la fecha en que se compiló o para dar alguna indicación de uso.

/* comentario multilineas..
este bloque no será tenido en cuenta 
hasta que se cierre el bloque */
Recuerde que los comentarios de programación que adopta Sass //... no se visualizan en el archivo .css final, este solo será visible en la hoja de desarrollo .scss, mientra que los comentarios multilíneas /*...*/ que a su vez son los comentarios nativos de CSS si se verán en archivo .css final. Aunque al utilizar el estilo de salida compressed ningún comentario será visible.

Formato y Estilos de salida del código CSS

Al momento de preprocesar hojas de estilos Sass ya sea por medio de alguna aplicación, task runners o la misma ventana de comando, podemos elegir algunos estilos de salida que tendrán estos archivos finales. Sass permite los estilos de salida : nested, expanded, compact y compressed.

:nested es el estilo predeterminado por lo que especificarlo sería opcional.

Para definir un estilo de salida simplemente lo especificamos en la linea que define el comando que ejecuta el script que procesa el archivo Sass.

Si trabajamos con Ruby de Sass podemos utilizar:

sass --styles *NameStyle

Si trabajamos con Node Sass podemos utilizar:

node-sass --output-styles *NameStyle

Lo único que hacemos es especificar el nombre del estilos y el procesador hará el resto.

Formatos de salida de código:

.lista__tareas {
  ul {
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      padding: 0.5em 0.7em;
      color: tomato;
    }
  }
}

Veamos. Para el anterior código Sass generaremos los estilos de salida disponibles en Sass.

:nested : Genera un código css final anidado.

sass styles.scss styles.css --style nested

:expanded : Estilo expandido parecido a la mayoría de las hojas de estilo normales. Cada propiedad y regla ocupa una línea. Las propiedades están sangradas dentro de las reglas, pero las reglas en sí mismas no.

sass styles.scss styles.css --style expanded

:compact : Estilo compactado, este ocupa mucho menos espacio que los estilos anidados y expandidos. Cada regla CSS ocupa solo una línea con cada propiedad definida en esa línea.

sass styles.scss styles.css --style compact

:compressed : Genera un código css final totalmente comprimido colocando en una línea todo el código generado y omitiendo hasta los comentarios permitidos.

sass styles.scss styles.css --style compressed

Los anteriores ejemplos dan como resultado los siguiente estilo de salida CSS:

NestedExpandedCompactCompressed
.lista__tareas ul {
  margin: 0;
  padding: 0; }
  .lista__tareas ul li {
    display: inline-block;
    padding: 0.5em 0.7em;
    color: tomato; }
.lista__tareas ul {
  margin: 0;
  padding: 0;
}
.lista__tareas ul li {
  display: inline-block;
  padding: 0.5em 0.7em;
  color: tomato;
}
.lista__tareas ul { margin: 0; padding: 0; }
.lista__tareas ul li { display: inline-block; padding: 0.5em 0.7em; color: tomato; }
.lista__tareas ul{margin:0;padding:0}.lista__tareas ul li{display:inline-block;padding:0.5em 0.7em;color:tomato}

Anidación de selectores en Sass

Sass nos permite anidar reglas de estilos dentro reglas en consecuencia a sus selectores padres. Este tipo de estructura simula un poco la estructura definida en el documento HTML donde los elementos contienen otros elementos.

Usar el anidamiento es una excelente manera de organizar los estilos, significa que todos los estilos relacionados estarán en un mismo conjunto o grupo. Este tipo de anidación nos permite escribir estilos de forma más lógica, estructurada y entendible.

Una de las primeras características incorporadas en Sass fue la capacidad de anidar selectores pues esto solucionaba el tema del alcance de los selectores y el tema de darle mas especificidad a algunos selectores sin necesidad de repetir selectores en cada regla definida.

Como funciona la anidación de selectores?

El elemento hijo siempre es indentado dentro de su padre o contenedor principal siguiendo el mismo principio de HTML donde a primera vista se nota el nivel jerárquico de los elementos, Sass da fuerza a este concepto ya que en el clásico CSS esto es imposible.

SCSSCSS
ul.lista {
  padding: 0;
  margin: 0;
  li{
    display: inline;
    a {
      color: #5e5e5e;
      text-decoration: none;
    }
  }
}
ul.lista {
  padding: 0;
  margin: 0;
}
ul.lista li {
  display: inline;
}
ul.lista li a {
  color: #5e5e5e;
  text-decoration: none;
}

Propiedades anidadas

Sass permite también la anidación de propiedades que se definen bajo el mismo nombre (namespace) como por ejemplo: text, Font, background etc:

SCSSCSS
.contenido {
  background: {
    color: #ea4c89;
    size: 16px 16px;
    image: url(sasquatch.png);
    repeat: no-repeat;
    position: top left;
  }
}
.contenido {
  background-color: #ea4c89;
  background-size: 16px 16px;
  background-image: url(sasquatch.png);
  background-repeat: no-repeat;
  background-position: top left;
}

Referenciando a el elemento padre con &

Siguiendo el concepto de la anidación de reglas, Sass nos da la posibilidad de que una regla hija haga referencia a su elemento padre utilizando el ampersand (&), este servirá como marcador referente se su elemento antecesor.

SCSSCSS
li a {
  color: blue;
  &.danger {
    color: red;
  }
  &.success {
    color: green;
  }
  .active &:hover {
    color: #000;
  }
}
li a {
  color: blue;
}
li a.danger {
  color: red;
}
li a.success {
  color: green;
}
.active li a:hover {
  color: #000;
}
Esta referencia no siempre tiene que ir delante del elemento en la declaración de la regla anidada porque al ser este un marcador lo podemos usar donde lo queramos : .success &

Combinadores de selectores

También podemos usar los caracteres combinadores de CSS que dan contexto a los selectores hijos : +, >, y ~

SCSSCSS
.article{
  section {
    margin: 2em;
    + p{
      color: gray;
      margin: 0;
    }
    > p{
      color:#666;
    }
    ~ div {
      display: none;
    }
  }
}
.article section {
  margin: 2em;
}
.article section + p {
  color: gray;
  margin: 0;
}
.article section > p {
  color: #666;
}
.article section ~ div {
  display: none;
}

Uso de variables en Sass

Sass incorpora características importantes que nos dan cierto poder a la hora de generar código CSS, una de ella es el uso de las variables que al igual que en cualquier lenguaje de programación se utilizan para asociar valores a un nombre que luego estará disponible para ser reutilizada.

Las variables en Sass se crean anteponiendo el signo de $ antes del nombre de asignado a la variable, luego dos puntos : para separar el valor asignado a la variable y por ultimo cerramos con punto y coma ;

$color-principal: #333;

cuando el compilador ejecuta y convierte el código SCSS a CSS el valor de la variable tomará el lugar en cada propiedad donde fue vinculada dando así su valor real.

SCSSCSS
// Variables definidas
$color-principal: #333;
$color-links: #ea4c89;

body {
  font-size: 1em;
  color: $color-principal;
  a {
    color: $color-links;
  }
}
body {
  font-size: 1em;
  color: #333;
}
body a {
  color: #ea4c89;
}

Alcance de las variables

En Sass podemos declarar variables locales y globales. Cuando declaramos una variable fuera de cualquier bloque de código esta la podemos usar globalmente, es decir en cualquier parte de nuestra hoja SCSS. Si en cambio son declaradas dentro de reglas especificas solo estará disponible en dicha regla o bloque.

SCSSCSS
body {
  $color-principal: #333;
  $color-links: #ea4c89;
  font-size: 1em;
  color: $color-principal;
  a {
    color: $color-links;
  }
}
.contenedor {
  color: $color-principal;
}
Undefined variable: "$color-principal".

El anterior ejemplo genera un error Undefined variable: "$color-principal" puesto que la variable la definimos dentro del bloque que definen las reglas de estilos al elemento body y a este bloque solo estará limitada.

Convirtiendo variables de bloques en globales

Por defecto cuando una variable en Sass pertenece a un bloque o regla de código solo puede ser accedida y utilizada en dicho bloque. Si la intentamos utilizar el compilador nos dará error como vimos en el ejemplo anterior.

Pero este comportamiento puede ser modificado si colocamos la instrucción !global. Si colocamos esta instrucción en una variable definida en un bloque la vamos a poder utilizar fuera de este. Veamos el ejemplo anterior pero esta vez utilizando la instrucción !global

SCSSCSS
body {
  $color-principal: #333 !global;
  font-size: 1em;
  color: $color-principal;
}
.contenedor {
  color: $color-principal;
}
body {
  font-size: 1em;
  color: #333;
}

.contenedor {
  color: #333;
}

Valores por defecto en variables

En Sass las variables pueden tener un valor por defecto que se ejecutará si no se asigna un valor que lo sobreponga, esto siempre y cuando se defina bajo el mismo nombre de variable.

Para hacer esto agregamos la instrucción !default al final de la declaración.

SCSSCSS
$color-principal: #ea4c89 !default;
$color-principal: #333;

body {
 font-size: 1em;
  color: $color-principal;
}
body {
  font-size: 1em;
  color: #333;
}

Esto puede ser útil para generar un valor definido globalmente y queremos sobreponer el valor en otros archivos SCSS donde nos interese que genere un valor diferente.

Tipos de valores de las variables

La variable puede contener cualquier valor de CSS valido que queramos. Podríamos crear una variable para contener familias de fuentes, grosores de fuentes, bordes, imágenes de fondo, etc. Por ejemplo:

SCSSCSS
$primary-color: orange;
$secondary-color: gold;
$font-stack: 'Open Sans', Helvetica, Sans-Serif;
$border-thick: 10px;
$border-bright: orange;
$border-style: solid;
$article-width: 60%;
$article-padding: 20px;
$article-margin: auto;

body {
  color: $primary-color;
  background: $secondary-color;
  font-family: $font-stack;
}
section {
  border: $border-thick $border-style $border-bright;
  width: $article-width;
  padding: $article-padding;
  margin: $article-margin;
}
body {
  color: orange;
  background: gold;
  font-family: "Open Sans", Helvetica, Sans-Serif;
}

section {
  border: 10px solid orange;
  width: 60%;
  padding: 20px;
  margin: auto;
}

Tipos de datos admitidos

Sass soporta los siguientes tipos de datos como valor de variables:

  • Números (15, 3.5, 50rem)
  • Strings, con y sin comillas (“Open Sans”)
  • Colores (orange, #ffcc00, rgba(105, 255, 0, 0.7))
  • Booleanos (true, false)
  • Nulos (null)
  • Listas de valores, separados por espacios o comas ( 2.5em 10em 0, Arial, sans-serif)
  • Mapas : Maps (key1: value1, key2: value2)

Para finalizar el tema de las variables en Sass, debemos de tener en cuenta las directrices básicas y genéricas a seguir al momento de crear una variable en Sass:

  • No utilizar espacios
  • No comenzar con números
  • No utilizar como primer carácter algo que no sea una letra
  • Podemos utilizar cualquier sistema de notación conocido para declarar variables en programación (camel-case, pascal-case etc.)

Más información: sass-lang.com/documentation/#variables

Tipos de datos en Sass

Los tipos de datos son características esenciales de cualquier lenguajes de programación y en Sass no son una excepción. Estos nos dan formas de poder clasificar datos o valores en ciertas categorías y para diferentes usos.

En Sass hasta el momento se incluyen siete diferentes tipos de datos. Estos son:

Tipo Number : (Números)

Los números son bastante explícitos en Sass, cada vez que escribimos un dígito en numérico este será del tipo de número, incluso si este tiene una unidad asociada. por ejemplo: si especificamos 100 , 33.3% o 200px son todos son serán del tipo númerico. Veamos un ejemplo:

SCSSCSS
.element {
  type_1 : type-of(200);
  type_2 : type-of(200px);
  type_3 : type-of(20.5rem);
}
.element {
  type_1: number;
  type_2: number;
  type_3: number;
}

Como puedes ver en el procesado final, cada valor pasado devuelve que los valores son del tipo number.

La función type-of() nos devuelve el tipo de dato del valor que pasamos en su parámetro.

Con el tipo de datos number podemos hacer operaciones matemáticas pero debemos de tener en cuenta que SassScript reconoce unidades estándar del lenguaje cuando intentamos realizar operaciones con valores numéricos la unidad debe ser la misma o compatible. De lo contrario el proceso dará error al intentar compilarlo.

SCSS
.element {
  type_1 : 10px + 2;   /* 12 */
  type_2 : 10px + 2em; /* Incompatible units: 'em' and 'px' */
}

Tipo String : (Cadena de Caracteres)

Sass considera string a cualquier caracter o cadenas de caracteres que este entre comillas dobles "...", comillas simples '...' o incluso sin comillas. En general, cualquier forma que use se pasará directamente al CSS.

SCSSCSS
$string_1 : "'Myriad Pro', Helvetica, Arial, sans-serif";

.element {
  font-family : $string_1;
  type: type-of( $string_1 );
}
.element {
  font-family: "'Myriad Pro', Helvetica, Arial, sans-serif";
  type: string;
}

Tipo Color : (Colores)

Sass admite las mismas expresiones de color compatibles para especificar colores en CSS: Por ejemplo: hexadecimales, rgb, rgba, hsl y expresiones hsla.

SCSSCSS
.element {
  color_1 : type-of( #ff0000 );
  color_2 : type-of( rgb(100, 39, 153) );
  color_3 : type-of( rgba(100, 39, 153, 75) );
  color_4 : type-of( hsl(0, 30%, 100%) );
  color_5 : type-of( rgba(100, 39, 153, 75) );
  color_6 : type-of( hsla(0, 30%, 100%, 0.3) );
  color_7 : type-of( tomato );
}
.element {
  color_1: color;
  color_2: color;
  color_3: color;
  color_4: color;
  color_5: color;
  color_6: color;
  color_7: color;
}

Todas estas expresiones de color al igual que las palabras clave nativas de colores como “red”, “yellow” etc… vienen bajo el tipo de dato color. Lo que hace Sass es proporcionarle capacidades adicionales por medio de funciones poderosas para que pueda utilizar los colores de manera más eficaz.

Tipo List : (Listas)

Una lista en SassScript es una serie de valores separados por espacios o comas guardado bajo un mismo nombre de variable. Estas son como la versión de Sass en cuanto a los clásicos arreglos de los lenguajes de programación.

En estas listas podemos almacenar cero, uno o varios valores e incluso otras listas. Veamos los tipos que nos devuelve SassScript con los siguientes valores:

SCSSCSS
.element {
  list_1 : type-of( Helvetica Arial sans-serif );
  list_2 : type-of( 10px 8px 12px );
  list_2 : type-of( 10 (10,0) 4 );
}
.element {
  list_1: list;
  list_2: list;
  list_2: list;
}

Tipo Map : (Mapas)

Los mapas de Sass son como matrices asociativas. Este tipo de dato almacena tanto las claves como los valores asociados con esas claves. Su sintaxis es ligeramente diferente de una lista: deben estar separados por comas, y todo el mapa debe estar entre paréntesis:

SCSSCSS
$mainColor: (
  light : #e57373, 
  medium: #f44336, 
  dark  : #b71c1c
);

.element {
  value : type-of( $mainColor );
}
.element {
  value: map;
}

Los mapas de Sass son características del SassScript, estos no los procesa CSS directamente pues no sabría qué hacer con ellos. Para recuperar valores de los maps debemos de utilizar las funciones maps provistas por SassScript, como por ejemplo: map-get(). Este tema de las funciones de los mapas se cubren más adelante en esta guía.

Tipo Null : (Nulos)

El tipo null Es el más básico de todos los tipos de datos en Sass. Este tipo no es ni true ni false, simplemente define un valor vacío.

Como ya he dicho, null se usa comúnmente para definir un estado vacío, normalmente este es el valor que desea establecer al definir una variable sin un valor, solo para evitar que el preprocesador se bloquee.

SCSSCSS
$value: null;

.element {
  value : type-of( $value );
}
.element {
  value: null;
}

Hay algunos puntos a tener en cuenta cuando utilizamos este tipo de dato en Sass:

  1. null tiene que estar en minúsculas para que sea valido, cualquier variante que contenga letras mayúsculas será de tipo string.
  2. No es posible concatenar el valor null con una cadena. Al hacerlo, SassScript lanzará un error.
  3. Aunque el tipo null representa un valor vació, cuando utilizamos este valor con alguna función que mida la longitud del valor el resultado de este es 1.

Tipo Bools : (Boleanos)

Los valores bool existen en casi cualquier lenguaje de programación y para estos solo hay dos valores: true y false

SCSSCSS
$value: true;

.element {
  value : type-of( $value );
}
.element {
  value: bool;
}

Estos no tienen un significado directo en el CSS procesado, pero son útiles en combinación con las directivas de control como por ejemplo @if que veremos en los siguientes bloques.

Operadores en Sass

En este bloque exploraremos las operaciones que nos brinda Sass para trabajar sobre los diferentes tipos de datos que nos ofrece el lenguaje. La mayoría de estos operadores se comportan como era de esperar, pues son operadores clásicos utilizados en casi todos los lenguajes de programación y otros que aunque funcionen se deben tener en cuenta ciertos detalles ya que Sass debe seguir siendo compatible con CSS. O por lo menos esa es la idea.

Operadores de igualdad

Los operadores de igualdad nos permiten establecer igualdad o desigualdad entre los valores operados. Para esto utilizamos los operadores == y !=. Estos nos devuelven el resultado en tipos boleanos.

SCSSCSS
.element {
  value: 10 == 5;
  value: 10 != 5;
}
.element {
  value: false;
  value: true;
}
  • El operador == nos permite especificar la igualdad de los valores comparados.
  • El operador != nos permite especificar la desigualdad de los valores comparados.
Cuando realizamos operaciones comparativas con este preprocesador, SassScript siempre intentará respetar los tipos de datos, es decir, si intentamos comparar datos de diferentes tipos el resultado siempre será negativo.
value: "10" == 10; // false
value: true != "10"; // true

En el ejemplo anterior intentamos comparar un string y un numero y el resultado es false y el segundo nos da true porque comparamos la desigualdad de los tipos.

Operadores de comparación

Además de la comparación de igualdad, SassScript también admite la comparación de dos valores. Para esto utilizamos los operadores <, >, <= y >=. Al igual que los operadores == y !=, Todos estos también devuelven un valor booleano, es decir: true y false.

SCSSCSS
.element {
  value: 5 < 3;  /* Menor que */
  value: 5 > 3;  /* Mayor que */
  value: 3 <= 3; /* Menor o Igual */
  value: 5 >= 3; /* Mayor o Igual */
}
.element {
  value: false;
  value: true;
  value: true;
  value: true;
}
En este caso los operadores de Sass no entran en conflicto con la sintaxis estándar de CSS por lo que no hay condiciones especiales ni sintaxis de qué preocuparse.
Operadores aritméticos

SassScript nos permite realizar operaciones aritméticas y de comparación en valores numéricos. Estos operadores se comportan de la manera que esperamos pues son los operadores básicos y clásicos que utilizamos para operar entre 2 números. Es decir, básicamente SassScript admite todas las operaciones aritméticas estándar para valores numéricos.

SCSSCSS
.element {
  value: 10 + 10;  /* Suma */
  value: 10 - 8;   /* Resta */
  value: 20 * 3;   /* Multiplicación */
  value: (5 / 2);  /* División */
  value: (9 % 3);  /* Módulo */
}
.element {
  value: 20;
  value: 2;
  value: 60;
  value: 2.5;
  value: 0;
}
Sass es compatible con la sintaxis de CSS por lo que hay que tener cierta precaución al momento de utilizar estos operadores aritméticos, en especial operador de división (/) ya que este también se puede utilizar en CSS para separar números. La a esto es rodear parte de la expresión o la expresión completa entre paréntesis.
Operaciones booleanas

Al igual que las operaciones de igualdad, los operadores booleanos devuelven un valor booleano (verdadero o falso). Sasscript implementa tres operadores booleanos: and, or y not.

  • El operador and devuelve verdadero solo si sus operandos son verdaderos.
  • El operador or devuelve verdadero si tan solo alguno de los operandos es verdadero:
  • El operador not se utiliza para inviertir el valor de un dato booleano. Es decir si este es false llegará a ser true.
SCSSCSS
.element {
  value: (true) and (false);
  value: (true) or (false);
  value: not (true);
}
.element {
  value: false;
  value: true;
  value: false;
}
Sass no admite la operación “exclusiva or”, que devuelve verdadero si solo uno de sus operandos es verdadero, pero podemos crear un “exclusivo or” desde las operaciones existentes en el lenguaje.
Operadores de strings

SassScript solo admite un solo operador para las cadenas de caracteres o strings. Esta es la concatenación.

SCSSCSS
.element {
  value: "Open " + "Sans";
}
.element {
  value: "Open Sans";
}
También podemos utilizar las expresiones de string envolviéndolos con el operador de interpolación #{}.

SCSSCSS
$myVar: "Helvetica Nue";

.element {
  value: "5 * 5 es : #{5 * 5}";
  value: "Open " + "Sans, " + $myVar;
}
.element {
  value: "5 * 5 es : 25";
  value: "Open Sans, Helvetica Nue";
}

Mantener el código limpio con Mixins

Si con las variables podemos almacenar valores bajo un nombre, los Mixins me van a permitir definir bloques de códigos que podemos utilizar posteriormente.

Los Mixins son otra de las características esenciales y poderosas de los preprocesadores CSS, estas nos ayudan a escribir código CSS Teniendo en cuenta el principio DRY “Don’t Repeat Yourself” que nos insta a no repetir código.

Los mixins son fragmentos de código que se puede aplicar a selector CSS y en lugar de escribir las mismas reglas una y otra vez en diferentes declaraciones podemos utilizarlos para definir un grupo de estilos que podemos reutilizar.

Definiendo Mixins en Sass

Para definir un mixin todo lo que necesitamos es escribir la directriz @mixin seguido del nombre de mixin y luego los estilo que deseamos vincular al mixin. Una vez que esté definido, lo podemos utilizar donde lo necesitemos, y eso lo hacemos por medio de la directriz @include.

SCSSCSS
@mixin alert {
  position: relative;
  padding: .75rem 1.25rem;
  border-radius: .25rem;
  background-color: #ff0000;
}
.alert {
  @include alert;
}
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  background-color: #ff0000;
}

Cuando el procesador se encuentra con una inclusión mixins la reemplaza con el contenido de esta cambiando las variables por los argumentos pasados.

Mixins con Argumentos

Los @mixin pueden tener argumentos, lo que los hace más flexibles pues podemos personalizar los valores que obtengamos del mixin vinculado, estos van después del nombre del mixin y entre paréntesis.

Lo que especificamos dentro como parámetros son variables que se ejecutarán únicamente dentro del mixin, podemos tener tantas como las que necesitamos únicamente las separamos con un coma.

Mixins con parametros

En el @include que vinculamos en las diferentes reglas es donde pasamos los valores finales que requiere el mixins, estos separados por una coma “,” y siguiendo el orden que hemos dado en la declaración de los parámetros en el mixin. Veamos un ejemplo:

SCSSCSS
// Definimos el Mixin con argumentos
@mixin titulos ($color, $size, $transfr) {
  color: $color;
  margin: 0 0 1em 0;
  font: {
    size: $size;
    weight: 600;
  }
  text-transform: $transfr;
}

section h2 {
  @include titulos(#f0f, 1em, lowercase);
}
.texto-especial {
  @include titulos(#333, 1.3em, uppercase);
}
section h2 {
  color: #f0f;
  margin: 0 0 1em 0;
  font-size: 1em;
  font-weight: 600;
  text-transform: lowercase;
}

.texto-especial {
  color: #333;
  margin: 0 0 1em 0;
  font-size: 1.3em;
  font-weight: 600;
  text-transform: uppercase;
}

Los Mixins también pueden asumir valores por defecto en sus argumentos, esto por si no se pasa ningún valor como argumento se tomarán los valores establecidos por defecto.

SCSSCSS
@mixin titulos ($color:#f0f0f0, $size:1.5rem) {
  color: $color;
  margin: 0 0 1em 0;
  font: {
    size: $size;
    weight: 600;
  }
}

section h2 {
  @include titulos();
}
.texto-especial {
  @include titulos( red );
}
section h2 {
  color: #f0f0f0;
  margin: 0 0 1em 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.texto-especial {
  color: red;
  margin: 0 0 1em 0;
  font-size: 1.5rem;
  font-weight: 600;
}

Pasar Bloques de Contenido a un Mixin

También podemos pasar bloques de estilos a un @mixin, para hacer esto en el interior del mixin se agregamos la directiva @content que será sustituido por el bloque de contenidos que se pasa al mixin.

SCSSCSS
@mixin botones {  
   font-size: 1em;  
   padding: 0.5rem 2rem;  
   color: #fff;  
   @content;  
}

.btn-verde {  
 @include botones {  
   background: green  
 }
}
.btn-azul {  
 @include botones {  
   background: blue  
 }
}
.btn-verde {
  font-size: 1em;
  padding: 0.5rem 2rem;
  color: #fff;
  background: green;
}

.btn-azul {
  font-size: 1em;
  padding: 0.5rem 2rem;
  color: #fff;
  background: blue;
}

También se puede incluir la directiva @content dentro del mixin y pasar todo el contenido incluyendo el selector atreves del @include.

SCSSCSS
@mixin mq($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

#contenedor {
  @include mq(320px) {
    background: red;
    color: #fff;
  }
}
#contenedor {
  @include mq(768px) {
    background: #BFB96A;
    color: #000;
  }
}
@media only screen and (max-width: 320px) {
  #contenedor {
    background: red;
    color: #fff;
  }
}

@media only screen and (max-width: 768px) {
  #contenedor {
    background: #BFB96A;
    color: #000;
  }
}

Los Mixins son muy poderosos en Sass, estos no ayudan a escribir menos código y a su vez lo que escribamos será inteligente y estructurado. sass-lang.com/#defining_a_mixin

Interpolación de Variables en Sass

Interpolar es “Poner algo entre otras cosa” y en Sass este concepto se aplica totalmente, ya que es el proceso de insertar el valor de una variable en otros lugares.

Si queremos construir selectores y propiedades de forma dinámica utilizando las características de una variable la interpolación es la solución, lo que no podremos hacer es crear dinámicamente variables pero si utilizar las que ya estarían establecidas. Lo que hacemos es envolver el nombre de variable a interpolar en #{} y listo. La variable se imprimirá donde sea que la pongamos.

#{$variable}

Veamos un ejemplo:

SCSSCSS
$base:      'principal';
$propiedad: 'radius';
$valor:      4px;

.modulo__#{$base} {
  .btn {
    border-#{$propiedad}: $valor;
    background: rgba(4, 132, 185, 1);
    color: #fff;
  }
}
.modulo__principal .btn {
  border-radius: 4px;
  background: #0484b9;
  color: #fff;
}

Aparentemente el uso de variables interpoladas parece simple hasta lo que hemos visto pero en realidad su uso nos da poderosos resultados, por ejemplo cuando las extendemos en alguna función permitida por Sass los resultados son muy buenos. En el siguiente ejemplo utilizamos la interpolación en un bucle @for también soportado en Sass.

SCSSCSS
@for $i from 1 through 4 {
  .icon--#{$i} {
    background-image: image-url("img/icon-#{$i}.jpg");
  }
}
.icon--1 {
  background-image: image-url("img/icon-1.jpg");
}
.icon--2 {
  background-image: image-url("img/icon-2.jpg");
}
.icon--3 {
  background-image: image-url("img/icon-3.jpg");
}
.icon--4 {
  background-image: image-url("img/icon-4.jpg");
}

como vemos, la variable, en este caso el contador toma su lugar por medio de la interpolación y cada que itera el bucle genera un valor dinámico, en este caso son 4 porque así programamos el loop.

Ahora veamos como las podemos usar la interpolación dentro de un @mixin.

SCSSCSS
@mixin redes($redes, $color) {
  .rsocial--#{$redes} {
    color: $color;
    width: 100px;
    background: url("images/#{$redes}.png");
  }
}

@include redes("twitter", rgb(85, 172, 238));
@include redes("facebook", rgb(59, 89, 152));
@include redes("google", rgb(221, 75, 57));
@include redes("instagram", rgb(18, 86, 136));
@include redes("linkedin", rgb(0, 123, 181));
.rsocial--twitter {
  color: #55acee;
  width: 100px;
  background: url("images/twitter.png");
}
.rsocial--facebook {
  color: #3b5998;
  width: 100px;
  background: url("images/facebook.png");
}
.rsocial--google {
  color: #dd4b39;
  width: 100px;
  background: url("images/google.png");
}
.rsocial--instagram {
  color: #125688;
  width: 100px;
  background: url("images/instagram.png");
}
.rsocial--linkedin {
  color: #007bb5;
  width: 100px;
  background: url("images/linkedin.png");
}

Más información: https://sass-lang.com/documentation/interpolation

Extendiendo Selectores en Sass

Sass permite que selectores hereden bloques de estilos declarados en otros selectores. Esto nos ahorraría el tener que escribir y repetir estilos ya existentes y declarados en algún otro selector, de esta manera escribimos código de estilos siguiendo el principio “DRY”.

Se trata de la directiva @extend que va a permitir la herencia de estilos entre selectores CSS. Veamos un ejemplo:

SCSSCSS
.notificacion {
  border-radius: 5px;
  padding: 5px;
}
.notificacion-error {
  @extend .notificacion;
  Color:#F00;
}
.notificacion-info {
  @extend .notificacion;
  Color:#5589b3;
}
.notificacion, .notificacion-info, .notificacion-error {
  border-radius: 5px;
  padding: 5px;
}
.notificacion-error {
  Color: #F00;
}
.notificacion-info {
  Color: #5589b3;
}

En el ejemplo anterior vimos como por medio de la directriz @extend extendemos los estilos definidos en la regla .notificacion dentro de otras reglas.

lo que a la final hace el compilador es juntar en una misma declaración los selectores que comparten propiedades creando una sola regla, y las que no las deja definidas en solitario.

Ahora, este concepto de herencia no es limitada a la extensión de un selector, podemos tener varios @extend dentro de un selector y así heredar bloques de estilos de múltiples selectores.

SCSSCSS
.notificacion {
  border-radius: 5px;
  padding: 5px;
}
.notificacion--activa {
  background: green;
  color: #fff;
}
.bloque-notificacion {
  @extend .notificacion;
  @extend .notificacion--activa;
  Color:#F00;
}
.notificacion, .bloque-notificacion {
  border-radius: 5px;
  padding: 5px;
}
.notificacion--activa, .bloque-notificacion {
  background: green;
  color: #fff;
}
.bloque-notificacion {
  Color: #F00;
}

Aunque también se pueden escribir los selectores a extender en una misma línea:

SCSS
.bloque-notificacion {
  @extend .notificacion, .notificacion--activa;
  Color:#F00;
}

Algo para tener en cuenta es que los extended aunque parece que cumplen una función similar a los @mixins su funcionamiento y alcance es diferente. Los mixins son mucho más poderoso, comenzando que los mixins son totalmente parametrizables dándonos un mayor alcance y poder.

Con los @extend manejaremos la herencia de estilos entre selectores donde la cascada aplica los estilos como lo hace en el CSS normal, es decir, cuando se aplican o se heredan dos o más propiedades a un selector siempre gana el ultimo aplicado.

Herencias de reglas ya heredadas

Con los @extend también vamos a poder heredar bloques de estilos heredados de otros selectores.

SCSSCSS
.notificacion {
  Border-radius: 50%;
}
.strongText {
  @extend .notificacion;
  Font-weight: bold;
}
.error {
  @extend .strongText;
  Color:#F00;
}
.notificacion, .strongText, .error {
  Border-radius: 50%;
}
.strongText, .error {
  Font-weight: bold;
}
.error {
  Color: #F00;
}

claro, hay algunos huecos al utilizar los @extend. Uno de ellos es que el resultado final, es decir el archivo CSS compilado puede agrupar los selectores vinculados en los @extend de la forma que de pronto no esperemos y más cuando utilizamos el selector muchas veces en una misma página, el otro problema es que no los podemos utilizar dentro de las declaraciones @media.

Marcadores de posición en Sass

En este bloque trataremos el tema de los marcadores de posición con los %placeholder en Sass.

Ya sabemos el uso básico de los @extend. Estos nos permiten pasar propiedades CSS de un selector existente a otro. Esto es muy bueno, pero nos puede interesar también el uso de los placeholder o “marcadores de posición” en Sass.

%placeholder

Los placeholder nos van a permitir crear selectores fantasmas, selectores que solo estarán disponibles en las hojas de desarrollo de Sass.

Para crear un selector de marcador de posición debemos utilizar el símbolo de porcentaje % seguido del nombre del marcador y dentro las diferentes propiedades a utilizar.
Para llamar a este conjunto de reglas dentro de un selector existente, lo hacemos utilizando la directriz @extend.

SCSSCSS
%box {
  padding: 2em;
  background-color: #eee;
  margin: 10px;
  border: 1px solid #aaa;
}
.box-success {
  @extend %box;
  background: green;
}
.box-info {
  @extend %box;
  background: blue;
}
.caja-error {
  @extend %box;
  background: red;
}
.caja-error, .box-info, .box-success {
  padding: 2em;
  background-color: #eee;
  margin: 10px;
  border: 1px solid #aaa;
}
.box-success {
  background: green;
}
.box-info {
  background: blue;
}
.caja-error {
  background: red;
}

Como podemos en el CSS de salida, el selector %box no se ha compilado puesto que fue definido como un placeholder o Marcador de posición y es ignorado por el motor compilador de Sass.

Import y Parciales en Sass

Cuando trabajamos en Sass vamos a poder importar archivos dentro de una hoja de desarrollo Sass, ya sea .scss o .sass, esta característica es heredada del CSS tradicional, pero a diferencia del CSS nativo cuando utilizamos la directriz @import dentro de una hoja Sass esta fusionará los archivos importados compilando un solo archivo CSS final.

Cuando importamos un archivo en Sass este buscara la ruta especificada en el directorio actual y esto lo hacemos utilizando la directiva @import seguido del nombre del archivo a importar dentro de comillas "...".

SCSS
@import "principal.scss";
@import "variables.scss";
@import "mixins.scss";

También podemos utilizar la forma abreviada..

SCSS
@import "principal.scss", "variables.scss", "mixins.scss"

Sass Import

Cabe decir que podemos omitir la extensión en los archivos importados, Sass buscará un archivo con el mismo nombre ya sea con extensión .scss o .sass.

Los @import en Sass son muy útiles porque podemos trabajar en archivos independientes, tener archivos de variables, mixins, funciones y utilizar cualquier metodología estructural para el manejo de estilos y generar un solo archivo .css final. Lo que significaría menor número de conexiones HTTP.

Archivos parciales en Sass

Por defecto Sass genera un archivo CSS a partir de un .scss o .sass, osea que si estamos trabajando con múltiples archivos e importándolos dentro de una hoja de desarrollo final, esto generaría muchos archivos CSS. Esto de pronto no sea de utilidad porque a la final no los vamos a utilizar.

En esta situación es donde entran los archivos parciales o “partials” en Sass. Estos son archivos que se crean solo para desarrollo o como componentes modulares en Sass y a la final el motor compilador los omite no generando un archivo .css

Para crear un archivo parcial solo le debemos colocar el guion al piso o underscore _ antes del nombre que llevara la extensión .scss. Ejem: _modulos.scss

import-partial-sass

E igualmente para llamar a estos archivo parciales utilizamos la directriz @import

SCSS
@import "partials/modulos";
@import "partials/normalize";
// Recuerda que podemos omitir la extensión

Los partials son fáciles de entender y utilizar, estos son ideales para modularizar archivos con cualquier metodología de arquitectura sobre estilos.

La regla @import es muy util en Sass porque esta nos puede ayudar a tener un código mas entendible, fácil de mantener y bien estructurado.

Cabe decir que el import que utilizábamos en CSS y que a su vez era una mala práctica cambia su rol en Sass ya que todo lo que hacemos es importar archivos a una hoja de Sass que solo se ejecutaran en el proceso de desarrollo.

https://sass-lang.com/documentation/at-rules/import

Directiva Condicional @if y @else en Sass

Podemos hacer los mixins u otras estructuras de Sass sean aún más poderosas haciendo que ciertas cosas sucedan solo en circunstancias específicas. Esto lo logramos con la estructura @if.

La directiva @if nos permite extender Sass y escribir bloques de código condicionales de CSS, esta directiva toma una expresión y aplica los estilos asociados a esta después de avaluar si es verdadera o falsa.

SCSSCSS
$estado : false; // Valor boleano

.contenedor {
  @if $estado {
    display: block;
    background: blue;
    padding: 10px;
  }
  @else{
    display: none;
  }
}
.contenedor {
  display: none;
}

En el código anterior la variable $estado es evaluada dentro del contenedor y dependiendo del estado de esta, ya sea positiva o negativa (false o true) se aplicará un bloque de estilo u otro.

También tenemos la directiva @else, esta nos permite indicar algo que pueda ocurrir en caso de no cumplirse la condición dada en @if.

SCSSCSS
$estadoColor: null;

.contenedor {
  @if $estadoColor == red {
    background-color: #f00;
  } @else if $estadoColor == green {
    background-color: #0f0;
  } @else if $estadoColor == blue {
    background-color: #00f;
  } @else {
    background-color: #000;
  }
}
.contenedor {
  background-color: #000;
}

Si la declaración es verdadera se ejecutará lo que esté dentro del bloque de la declaración. Si la declaración es falsa, buscará un @else y ejecutará lo que esta dentro de su bloque.


Ahora, veamos como podemos utilizar estas directivas con los @mixins de Sass que le dan más alcance y la hacen mucho más poderosa.

SCSSCSS
@mixin button($background, $shadow: null) {
  background: $background;
  @if $shadow == null {
    border: 2px solid darken($background, 20%);
  }
  @else {
    box-shadow: $shadow;
  }
}

.flat-button {
  @include button(green); 
}
.floating-button {
  @include button(red, 1px 0px 0px #999)
}
.flat-button {
  background: green;
  border: 2px solid #001a00;
}
.floating-button {
  background: red;
  box-shadow: 1px 0px 0px #999;
}

Más información: https://sass-lang.com/documentation/at-rules/control/if

Estructura Iterativa @for en Sass

La Directiva @for en Sass nos va a permitir generar bloques de código de forma dinámica e ilimitada siguiendo algún patrón establecido y partiendo desde un índice hasta un punto final especificado. Su sintaxis es la siguiente:

@for $var from <start> through/to <end>

No sé si alguna vez te ha tocado definir estilos para 10, 20, 30 reglas donde cada una se diferencia de la otra por valor incremental. Bueno en Sass la directiva @for es ideal para este tipo de trabajo, podemos hacer un bucle o loop que haga todo este trabajo por nosotros y así nos ayuda a seguir el principio DRY.

Veamos un ejemplo muy simple:

SCSSCSS
@for $i from 1 through 4 {
  .caja-#{$i} {
    width: 300px * $i;
  }
}
.caja-1 {
  width: 300px;
}
.caja-2 {
  width: 600px;
}
.caja-3 {
  width: 900px;
}
.caja-4 {
  width: 1200px;
}

Lo que hacemos básicamente es utilizar la palabra clave @for seguido de la variable contadora $i que a su vez nos sirve como índice del bucle, después la palabra from que define donde comienza el loop y después la palabra reservada through que define donde termina el bucle y por su puesto dentro de la estructura el contenido que se generará por medio del bucle.

¿Variable contadora? Si, esta generalmente se le declara como $i solo por convención ya que hace referencia a un índice, aunque puede declararla como desees, por ejemplo $contador. Esta realmente es un marcador de posición que actúa dinámicamente en cada estado del bucle que se incrementa o decrementa en cada iteración del loop.

Variaciones del bucle @for en Sass

cuando utilizamos el loop @for en Sass vamos a tener dos variantes al momento de especificar la estructura. from... through y from... to.

@for $i from 1 through 4
@for $i from 1 to 4

Hay una diferencia sutil en ambos. Básicamente con through incluimos el índice final en el código generado por el loop y con to la omitimos. Los siguientes ejemplos harán esto más claro.

@for : from... through
SCSSCSS
@for $i from 1 through 6 {
  $width: percentage(1 / $i);
  .col-#{$i} {
    width: $width;
  }
}
.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.3333333333%;
}
.col-4 {
  width: 25%;
}
.col-5 {
  width: 20%;
}
.col-6 {
  width: 16.6666666667%;
}
@for : from... to
SCSSCSS
@for $i from 1 to 6 {
  $width: percentage(1 / $i);
  .col-#{$i} {
    width: $width;
  }
}
.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.3333333333%;
}
.col-4 {
  width: 25%;
}
.col-5 {
  width: 20%;
}

Iterar en lista con el loop @for

Los bucles @for son útiles para iterar en las listas en Sass, estas listas son simplemente una serie de elementos almacenados dentro de una variable.

SCSSCSS
$colors: #14132e #ff1800 #565470 #0c067a;

@for $i from 1 through 4 {
	li:nth-child(#{$i}) {
		color: nth($colors, $i);
	}
}
li:nth-child(1) {
  color: #14132e;
}
li:nth-child(2) {
  color: #ff1800;
}
li:nth-child(3) {
  color: #565470;
}
li:nth-child(4) {
  color: #0c067a;
}

Más información: https://sass-lang.com/documentation/at-rules/control/for

Estructura @while en Sass

Al igual que otras directivas de control, la directiva @while toma una expresión y ejecuta el bloque de estilos anidado dentro del bloque siempre y cuando la expresión no se evalúe false.

@while <expression>
La directiva @while es similar a la directiva @for, pero @while se puede usar para ejecutar bucles mucho más complejos de los que la directiva @for puede realizar.

Cuando usamos la directiva @while utilizamos una variable con un valor ya establecido en lugar de un rango de valores. Repitamos el ejemplo anterior con la directiva @for pero esta vez usando @while.

SCSSCSS
$i: 1;

@while $i <= 4 {
  .caja-#{$i} { width: 300px * $i;}
  $i: $i + 1;
}
.caja-1 {
  width: 300px;
}
.caja-2 {
  width: 600px;
}
.caja-3 {
  width: 900px;
}
.caja-4 {
  width: 1200px;
}

El código anterior se puede leer que mientras la variable $i no es mayor o igual que 4, ejecute el bloque de estilos anidado. Este valor se incrementa dentro del bloque de estilos anidado hasta que ya no es menor o igual que 4, que es la condición que se tiene que dar para que devuelva false y luego se detenga.

Al utilizar la directiva @while, si no se proporciona una condición para el fallo, el bucle se ejecutará para siempre. En nuestro ejemplo, aumentamos repetidamente el valor de $i por lo que la condición se estableció para regresar false en algún momento.

Más información: https://sass-lang.com/documentation/at-rules/control/while

Estructura Iterativa @each en Sass

La directiva @each en Sass se utiliza para recorrer listas o mapas e interactuar con cada una de las propiedades especificada en estas. Su sintaxis es:

@each $var in <list/map>

En la sintaxis podemos notar la especificación de una variable : $var, que puede ser cualquier nombre de variable valida. Esta variable se establece en cada elemento de la lista y procesa el bloque de estilos debajo de la directiva utilizando la variable.

SCSSCSS
$users: user1, user2, user3, user4 ;

@each $user in $users {
  .avatar-#{$user} {
    background-image: url("img/users/#{$user}" )
  }
}
.avatar-user1 {
  background-image: url("img/users/user1");
}
.avatar-user2 {
  background-image: url("img/users/user2");
}
.avatar-user3 {
  background-image: url("img/users/user3");
}
.avatar-user4 {
  background-image: url("img/users/user4");
}

Como podemos notar como @each permite recorrer todos los elementos de una lista y en cada iteración podemos elegir que hacer con dicho elemento iterado: por ejemplo, podemos usar la interpolación para crear clases como el ejemplo anterior.

@each con múltiples variables

Cuando utilizamos la directiva @each vamos a poder hacer uso de múltiples variables en la misma declaración para manejar una lista compuesta de listas. Aunque suene complicado realmente no lo es. Míralo en el siguiente ejemplo:

SCSSCSS
@each $user1, $user2, $user3 in (user1, #00f, block),
                                (user2, #ff0, none),
                                (user3, #3da, block) {
  .avatar-#{$user1} {
    background-image: url("img/users/#{$user1}" );
    border: 2px solid $user2;
    display: $user3;
  }
}
.avatar-user1 {
  background-image: url("img/users/user1");
  border: 2px solid #00f;
  display: block;
}
.avatar-user2 {
  background-image: url("img/users/user2");
  border: 2px solid #ff0;
  display: none;
}
.avatar-user3 {
  background-image: url("img/users/user3");
  border: 2px solid #3da;
  display: block;
}

Lo que pasa es que cada una de las variables se establece en un elemento correspondiente de cada lista secundaria u anidada y el bloque de estilos se procesa utilizando estas variables en el orden establecido.

@each con mapas

Aunque este tema lo abordamos mas adelante con mas claridad, podemos adelantar que un mapa en Sass es una lista de pares que contienen palabras claves y valores, estas se usan para agrupar variables similares bajo una misma propiedad.

Como hemos dicho, un mapa se trata como una lista de pares, así que debemos de utilizar estas dos variables a las que se establecerán los pares a medida que se procesa la directiva @each.

SCSSCSS
$users: ( 
  user1:luis, 
  user2:pedro, 
  user3:steven
);

@each $user, $name in $users  {
  .avatar-#{$user} {
    background-image: url('/img/#{$name}.png');
  }
}
.avatar-user1 {
  background-image: url("/img/luis.png");
}
.avatar-user2 {
  background-image: url("/img/pedro.png");
}
.avatar-user3 {
  background-image: url("/img/steven.png");
}

Más información: https://sass-lang.com/documentation/at-rules/control/each

Funciones de Strings en Sass

Si has tratado con las funciones de strings en JavaScript u otro lenguaje de programación de seguro te sentirá cómodo con las funciones que ofrece Sass para el manejo de los strings. La principal diferencia esta en que las cadenas de Sass no son matrices basadas en cero. El primer carácter en una cadena Sass está en el índice 1, no en 0.

A continuación veremos el listado de cada función disponible para los strings en el preprocesador Sass.

Función : unquote

Esta función elimina las comillas de alrededor de una cadena de caracteres o strings si es que esta las llegara a tener.

unquote($string)
SCSSCSS
$value: "Open Sans";

.element {
  value : unquote($value);
}
.element {
  value: Open Sans;
}
Función : quote

Esta función Agrega comillas a un string sin comillas y esta devuelve una cadena entre comillas sin modificar.

quote($string)
SCSSCSS
$value: Open Sans;

.element {
  value : quote($value);
}
.element {
  value: "Open Sans";
}
Función : str-length

Esta función devuelve el número de caracteres presentes en una cadena o string.

str-length($string)
SCSSCSS
$value: "Open Sans";

.element {
  value : str-length($value);
}
.element {
  value: 9;
}
Función : str-insert

Esta función inserta la cadena especificada como $insert en la posición de índice especificada dentro de la cadena o string. Básicamente especificamos el string a tratar, lo que se va a añadir y su posición.

str-insert($string, $insert, $index)
SCSSCSS
$value: "Open";

.element {
  value : str-insert($value, " Sans", -1);
}
.element {
  value: "Open Sans";
}
Función : str-index

Esta función devuelve el índice de la primera aparición de $substring dentro del $string dado o nulo si es que no se encuentra el string dado dentro del string o cadena operada.

str-index($string, $substring)
SCSSCSS
$value: "Open Sans";

.element {
  value : str-index($value, "O");
}
.element {
  value: 1;
}
Función : str-slice

Esta función devuelve una subcadena que comienza en la posición $start-at y que opcionalmente puede terminar en la posición dada en el parámetro $end-at

str-slice($string, $start-at, [$end-at])
SCSSCSS
$value: "Open Sans";

.element {
  value   : str-slice($value, 6);
  value_2 : str-slice($value, 1, 4);
}
.element {
  value: "Sans";
  value_2: "Open";
}
Función : to-upper-case

Esta función devuelve una cadena que contiene el string pasado convertido en mayúsculas.

to-upper-case($string)
SCSSCSS
$value: "Open Sans";

.element {
  value : to-upper-case($value);
}
.element {
  value: "OPEN SANS";
}
Función : to-lower-case

Esta función devuelve una cadena que contiene el string pasado convertido en minúsculas.

to-lower-case($string)
SCSSCSS
$value: "Open Sans";

.element {
  value : to-lower-case($value);
}
.element {
  value: "open sans";
}

Funciones Numéricas en Sass

Al igual que con las funciones de cadena de caracteres, Sass proporciona un conjunto básico de funciones para manipular los valores numéricos. Tenemos que tener en cuenta que en estas podemos proporcionar descriptores de valores de CSS a todas las funciones provistas por el preprocesador, como por ejemplo: “px”, “em” o “rem”. Excepto el porcentaje. Sass ignorará las unidades y no se incluirán en el resultado.

A continuación veremos el listado de cada función disponible para el manejo de números en el preprocesador Sass.

Función : percentage

Esta función Convierte un número sin unidades en un porcentaje; es decir, lo multiplica por 100.

percentage($number)
SCSSCSS
.element {
  value : percentage(1.5);
}
.element {
  value: 150%;
}
Recuerda que al intentar operar valores numéricos con los descriptores de unidades de CSS establecidos en los valores esta función nos pueden devolver un error de compilación. ejemplo: percentage(1.5rem)

Función : round

Esta función redondea un número pasado como parámetro al número entero más cercano.

round($number)
SCSSCSS
.element {
  value   : round(34.25);
  value_2 : round(34.25rem);
}
.element {
  value: 34;
  value_2: 34rem;
}
Función : ceil

Esta función redondea un número con decimales hasta el número entero (superior) más cercano.

ceil($number)
SCSSCSS
.element {
  value   : ceil(34.25);
  value_2 : ceil(34.25rem);
}
.element {
  value: 35;
  value_2: 35rem;
}
Función : floor

Esta función redondea un número con decimales hasta el número entero (inferior) más cercano.

floor($number)
SCSSCSS
.element {
  value   : floor(34.9);
  value_2 : floor(34.9rem);
}
.element {
  value: 34;
  value_2: 34rem;
}
Función : abs

Esta función devuelve el valor absoluto de un número.

abs($number)
SCSSCSS
.element {
  value   : abs(10);
  value_1 : abs(-10px);
}
.element {
  value: 10;
  value_1: 10px;
}
Función : min

Esta función devuelve el valor más pequeño o menor en una lista de números pasados como parámetros.

min($numbers)
SCSSCSS
.element {
  value : min(3, 5, -1, 7, 0);
}
.element {
  value: -1;
}
Función : max

Esta función devuelve el valor mas grande o mayor en una lista de números pasados como parámetros.

max($numbers)
SCSSCSS
.element {
  value : max(3, 5, -1, 7, 0);
}
.element {
  value: 7;
}
Función : random

Esta función devuelve un valor aleatorio mayor que 0 y menor que 1.

random()
SCSSCSS
.element {
  value : random();
}
.element {
  value: 0.56054;
}
Cuando trabajamos con la función random en Sass vamos también a poder especificar un valor limite a el valor aleatorio que genera esta función. Para esto especificamos el limite como opción de parámetro : random($limit) por Ejemplo. random(10)

Funciones de Listas en Sass

Las funciones de la lista Sass le permiten interrogar, manipular y combinar listas en todas las formas. Las listas las especificamos usando las formas especificadas en esta guía, tendremos que rodearlas entre paréntesis para que quede claro que la lista es un argumento único dentro de la función.

Para tener en cuenta: Las listas de Sass son inmutables (no se pueden cambiar). Entonces, todas las funciones de lista en realidad devuelven otra lista, por ejemplo join() devuelve una nueva lista y no altera la lista original.

A continuación veremos el listado de cada función disponible para el manejo de las listas en el preprocesador Sass.

Función : length

Esta función devuelve el número de elementos que contiene una lista de Sass.

length($list)
SCSSCSS
$value: 10px 8px 12px 20px;

.element {
  value : length($value);
}
.element {
  value: 4;
}
Función : nth

Esta función devuelve el item de la lista Sass especificado en su parámetro de acuerdo a su posición.

nth($list, $n)
SCSSCSS
$value: 10px 8px 12px 20px;

.element {
  value : nth($value, 2);
}
.element {
  value: 8px;
}
Función : set-nth

Esta función establece o reemplaza el elemento especificado en una lista de valores de Sass. El primer parámetro $list es la lista a operar, el segundo $n es la posición a reemplazar o insertar y el tercer parámetro $value es el valor que reemplazará o se insertará en la lista operada.

set-nth($list, $n, $value)
SCSSCSS
$value: 10px 8px 12px 20px;

.element {
  value : set-nth($value, 1, 4px);
}
.element {
  value: 4px 8px 12px 20px;
}
Función : join

Esta función Anexa valores a una lista. Básicamente Une dos listas en una. En el caso de la sintaxis anterior Anexa la $list2 al final de la $list1. En cuanto al argumento $separator puede contener los valores coma, espacio o auto. El valor auto o automático es el valor predeterminado y utilizará el separador en la primera lista.

join($list1, $list2, [$separator])
SCSSCSS
$value: 10px 8px;

.element {
  value   : join($value, 15px 25px);
  value_2 : join($value, (4 5 6), auto);
}
.element {
  value: 10px 8px 15px 25px;
  value_2: 10px 8px 4 5 6;
}
Función : append

Esta función agrega un valor al final de una lista. Si se proporciona un argumento separador la lista completa que devuelve la función utilizará ese separador.

append($list1, $val, [$separator])
SCSSCSS
$value: 10px 8px;

.element {
  value   : append(($value), 4px, comma);
  value_2 : append(($value), 4px, space);
}
.element {
  value: 10px, 8px, 4px;
  value_2: 10px 8px 4px;
}
Función : zip

Esta función combina los valores de las listas proporcionadas en una sola lista multidimensional

zip($lists)
SCSSCSS
$value: 10px 8px;

.element {
  value : zip(($value),(red, green));
}
.element {
  value: 10px red, 8px green;
}
Función : index

Esta función devuelve el elemento en la posición de índice especificada en su parámetro ($valor)

index($list, $value)
SCSSCSS
$value: 10px 8px 15px 10px;

.element {
  value : index($value, 15px);
}
.element {
  value: 3;
}
Función : list-separator

Esta función devuelve el separador utilizado en una lista de Sass

list-separator($list)
SCSSCSS
$value   : 10px 8px 20px 22px;
$value_2 : 10px, 20px, 30px, 40px;

.element {
  value : list-separator($value);
  value : list-separator($value_2);
}
.element {
  value: space;
  value: comma;
}

Funciones de mapas en Sass

En Sass el tipo de datos map representa un conjunto de uno o más pares de clave/valor. Además de las funciones específicas de los maps que veremos a continuación, también podemos utilizar cualquiera de las funciones de las lista con los mapas, al final estos serán tratado como un conjunto de listas de dos elementos.

Al igual que las listas, los mapas de Sass son inmutables. Las funciones de mapa que devuelven un mapa devuelven un nuevo mapa y estas no cambian los valores originales.
Función : map-get

Esta función devuelve el valor asociado a la clave especificada como parámetro.

map-get($map, $key)
SCSSCSS
$value : (
  "light"  : #e57373, 
  "medium" : #f44336, 
  "dark"   : #b71c1c
);

.element {
  value : map-get( $value, "medium");
}

Prism Shortcode Error: Custom field not set or empty

Función : map-merge

Esta función fusiona dos mapas y devuelve uno nuevo. Teniendo en cuenta el ejemplo de la sintaxis, este devuelve un mapa que contiene el $map2 anexado al final del $map1

map-merge($map1, $map2)
SCSSCSS
$colors : (
  "light"  : #e57373, 
  "medium" : #f44336, 
  "dark"   : #b71c1c
);
$secundary_colors : (
  "secundary" : #8f8fef
);

$merge: map-merge($colors, $secundary_colors);

.element {
  value : map-get($merge, dark);
  value : map-get($merge, secundary);
}
.element {
  value: #b71c1c;
  value: #8f8fef;
}
Función : map-remove

Esta función devuelve un nuevo mapa con las claves eliminadas o mas bien sin las claves especificadas en los parámetros.

map-remove($map, $keys)
SCSSCSS

Prism Shortcode Error: Custom field not set or empty

Prism Shortcode Error: Custom field not set or empty

Función : map-keys

Esta función devuelve una lista con las claves del mapa especificado en los parámetros de esta.

map-keys($map)
SCSSCSS
$colors : (
  "light"  : #e57373, 
  "medium" : #f44336, 
  "dark"   : #b71c1c
);

.element {
  value : map-keys($colors);
}
.element {
  value: "light", "medium", "dark";
}
Función : map-values

Esta función devuelve una lista con los valores del mapa especificado en los parámetros de esta.

map-values($map)
SCSSCSS
$colors : (
  "light"  : #e57373, 
  "medium" : #f44336, 
  "dark"   : #b71c1c
);

.element {
  value : map-values($colors);
}
.element {
  value: #e57373, #f44336, #b71c1c;
}
Función : map-has-key

Esta función devuelve un valor booleano que indica si el mapa especificado contiene la clave especificada en sus parámetros.

map-has-key($map, $key)
SCSSCSS
$colors : (
  "light"  : #e57373, 
  "medium" : #f44336, 
  "dark"   : #b71c1c
);

.element {
  value : map-has-key($colors, red);
  value : map-has-key($colors, dark);
}
.element {
  value: false;
  value: true;
}

Funciones de selección en Sass

Las funciones de selección en Sass nos permiten manipular los selectores de CSS en una hoja de estilo. Estas funciones son liberales en los formatos que admiten para los argumentos de selección. Estas funciones pueden tomar:

  • Un string de selectores simple: “.abc .def, .ghi .jkl”.
  • Una lista de strings separados por espacios: (“.abc” “.def”)
  • Una lista de strings separados por comas: (“.abc .def”, “.ghi .jkl”)
  • Una lista de strings separados por espacios y estos a su vez separados por comas: ((“.abc” “.def”), (“.ghi” “jkl”))
Las funciones de selección permiten los selectores de marcadores de posición % pero prohíben los selectores de referencia a los padres &

A continuación veremos el listado de cada función disponible para el manejo de selección en el preprocesador Sass.

Función : selector-nest

Esta función devuelve un nuevo selector que contiene una lista anidada de selectores de CSS dependientes de la lista proporcionada.

selector-nest($selectors)
SCSSCSS
.element {
  value : selector-nest('.container', h2, '&:hover a');
}
.element {
  value: .container h2:hover a;
}
Función : selector-append

Esta función devuelve un selector sin combinadores descendientes, es decir, sin espacios en blanco entre ellos. Es decir Anexa los selectores pasados como parámetros sí sin espacios entre ellos.

selector-append($selectors..)
SCSSCSS
.element {
  value : selector-append(".container", ".primary")
}
.element {
  value: .container.primary;
}
Función : selector-replace

Esta función devuelve el nuevo selector especificado en el parámetro $replacement en lugar de los selectores especificados en $original dentro del selector $selector

selector-replace($selector, $original, $replacement)
SCSSCSS
.element {
  value : selector-replace("p.secundary", ".secundary", ".primary");
}
.element {
  value: p.primary;
}
Función : is-superselector

Esta función un valor booleano (true/false) que indica si el selector especificado en parámetro $super coincide con todos los elementos especificados en parámetro $sub

is-superselector($super, $sub)
SCSSCSS
.element {
  value : is-superselector("p", "strong");
  value : is-superselector(".primary", ".primary");
}
.element {
  value: false;
  value: true;
}
Función : simple-selectors

Esta función devuelve una lista de los selectores individuales contenidos en $selector que pasamos como parámetro de la función. Este debe ser una cadena que contiene un selector compuesto. En pocas palabras devuelve los selectores simples que comprenden un selector compuesto.

simple-selectors($selector)
SCSSCSS
.element {
  value : simple-selectors("main.container:before");
}
.element {
  value: main, .container, :before;
}
Función : selector-parse

Esta función devuelve una lista de strings contenidas en el $selector usando el mismo formato que el selector principal o selector padre referenciado &.

selector-parse($selector)
SCSSCSS
.element {
  value : selector-parse(".main aside:hover, .sidebar p");
}
.element {
  value: .main aside:hover, .sidebar p;
}

Funciones de introspección en Sass

Las funciones de introspección nos permiten examinar el estado del código en Sass. Aunque estas no se usan con mucha frecuencia cuando construimos reglas de estilos estas si son útiles para descubrir lo qué está sucediendo en el código cuando algo no funciona de la manera que se esperaba.

A continuación veremos el listado de cada función disponible en Sass.

Función : variable-exists

Esta función devuelve un valor booleano que indica si existe la variable especificada, ya sea globalmente o en el alcance actual donde esta es definida.

variable-exists($name)
SCSSCSS
.element {
  value : variable-exists($value);
}
false
Función : global-variable-exists

Esta función devuelve un valor booleano que indica si la variable especificada existe en el nivel global del proyecto Sass.

global-variable-exists($name)
SCSSCSS
$value : 2rem;

.element {
  value : global-variable-exists($value);
}
true
Función : mixin-exists

Esta función devuelve un valor booleano que indica si existe el mixin especificado como parámetro existe.

mixin-exists($name)
SCSSCSS
@mixin myMixin{
  color: steelblue;
  font-size: 2rem;
}

.element {
  @if mixin-exists(myMixin) {
    value: true;
  }
}
.element {
  value: true;
}
Función : inspect

Esta función devuelve la representación en string de un valor tal cual como se representaría en Sass.

inspect($value)
SCSSCSS
$value : 2rem;
.element {
  value : inspect($value);
}
.element {
  value: 2rem;
}
Función : type-of

Esta función devuelve un string que contiene el tipo de datos Sass del $value pasado como parámetro.

type-of($value)
SCSSCSS
$value : (
  light : #e57373, 
  medium: #f44336, 
  dark  : #b71c1c
);

.element {
  value : type-of($value);
}
.element {
  value: map;
}
Función : unit

Esta función devuelve la unidad asociada con un número. Esta puede devolver un string vacío si el número pasado no tiene asociada una unidad.

unit($number)
SCSSCSS
$value  : 3rem;
$value2 : 20;

.element {
  value : unit($value);
  value : unit($value2);
}
.element {
  value: "rem";
  value: "";
}
Función : unitless

Esta función devuelve un valor booleano que indica si el número especificado como parámetro tiene una unidad asociada.

unitless($number)
SCSSCSS
$value  : 3rem;
$value2 : 20;

.element {
  value : unitless($value);
  value : unitless($value2);
}
.element {
  value: false;
  value: true;
}
Función : comparable

Esta función devuelve un valor booleano que indica si los números especificados como parámetros pueden sumarse, restarse o compararse.

comparable($number1, $number2)
SCSSCSS
.element {
  value : comparable(1em, 4em);
  value : comparable(1em, 3px);
  value : comparable(1, 5);
}
.element {
  value: true;
  value: false;
  value: true;
}
avatar
8 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
CarlosBelénEduardoJohansoSergio Jurado Recent comment authors
Nuevos Antiguos Más votados
Fabio
Fabio

Hola muchas gracias, donde están los archivos del curso de Sass?

Oscar Larios
Oscar Larios

donde descargo tus archivos ya q en tu pagina no muestra un link de descarga de los archivos q utilizaste para la cada uno de los videos y el link q pusiste me redirecciona a tu pagina, por favor apoyame o sino enviame los archivos por mail te lo agradecere muchisimo

Gustavo A
Gustavo A

Amigo donde descargo los archivos del curso Sass, Muchas Gracias

Alvaro
Alvaro

donde estan los archivos??

Sergio Jurado
Sergio Jurado

Comento para ofrecer 2 sugerencias. La primera de ellas es que el texto es, para mi por lo menos, poco legible. Quizás sea el color gris tan claro, y convenga revisarlo de alguna forma para poder corregirlo. La segunda es que el código de la landing page del curso SASS no está disponible para su descarga, me da error cuando intento descargarlo, quizás por el archivo.rar cuando lo mas conveniente sería el .zip en su lugar y que no este contaminado ni tenga problemas. Al menos me haría falta algún tipo de código para poder seguir los archivos del curso,… Leer más »

Eduardo
Eduardo

Gracias por compartir lo que sabes… mejor aún que muchos de los tutoriales que he visto.

Belén
Belén

Genial! Muchas gracias por tu post! Me ayudó a poder instalar en la mac q ninguno explicaba bien como! Saludos!

Carlos
Carlos

Hola buenas, ¿donde puedo descargar el arhivo?
Gracias por hacer el curso 🙂 .