Sass

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

¿Qué es Sass?

Sass es un preprocesador que te permite usar funciones que aún no existen en CSS, como variables, anidamiento, mixins, herencia y otras ingeniosas ventajas.

Temario

​​​​1. Variables
​​​​2. Anidamiento (Nesting)
​​​​3. Módulos
​​​​4. Mixins
​​​​5. Herencia
​​​​6. Operadores
​​​​7. Compilar Sass

Variables

En Sass se pueden crear variables para ser utilizadas en diversas líneas, selectores y propiedades dentro del archivo Sass. Para crear una variable en Sass debe declararse con la ayuda del símbolo $. A continuación un ejemplo:

$primary-color: #061539
$title-font: 'Berkshire Swash', cursive

nav 
    background-color: $primary-color
    font-family: $title-font

En el ejemplo anterior, a diferencia de CSS en Sass se omiten los ; además, en los selectores se omiten las llaves {} para encapsular el código CSS. En lugar de {} se utiliza la identación para asociar las líneas de código Sass a un selector.

Mapping

Por otra parte, es posible realizar un mapeo de variables para definir una serie de variables asociadas. Por ejemplo, podemos realizar una variable de mapeo para los colores a utilizar en nuestra aplicación:

$colors: (
    primary: #001b2c,
    secondary: #103753,
    accent: #0978b4
)

nav
    background-color: map-get($colors, primary)
    color: map-get($colors, secondary)

En el ejemplo anterior, declaramos una variable $colors de tipo map con 3 colores, posteriormente en el selector nav accedimos a la propiedad primary y secondary de la variable colors, con la ayuda de la palabra reservada map-get que recibe como primer parámetro el nombre de la variable y como segundo parámetro el nombre de la propiedad.

Anidamiento (Nesting)

Otra de las ventajas de Sass es la posibilidad de anidar selectores en el código. Lo anterior supone una ventaja más visual, ya que en muchas ocasiones se cuenta con elementos HTML que contienen etiquetas hijo, es en esos casos donde podemos utilizar el anidamiento de selectores. Aquí un ejemplo:

ul
    li
        background-color: $primary-color
        color: $theme-color
        font-size: 1em
    
    a
        text-decoration: underline
        color: $secondary-color

Módulos (Modules)

Con Sass es posible partir el código entre diversos archivos, para después unirlo en un solo archivo, para ello, se usan los módulos, con modulos es posible insertar el código Sass de un archivo dentro de otro con el uso de la palabra reservada @use seguido del nombre del archivo. Aquí un ejemplo:

//cards.sass
$primary-color: #D432A2
$theme-color: white

.card
    border-radious: 5px
    background-color: $primary-color
    color: $theme-color
    
//styles.sass
@use 'cards'
ul
    border-color: cards.$primary-color
    color: black

En el ejemplo anterior, se tienen dos archivos Sass diferentes, el primero contiene dos variables y el código del selector correspondiente a la clase .card. Por otra parte, se tiene otro archivo en el cual se inserta el código del primer archivo con la ayuda de la palabra reservada @use. Dentro del segundo archivo, se utiliza la variable declarada en el primer archivo dentro del código de ul en la parte del border-color se hace referencia a la variable primary-color.

Mixins

En algunas ocasiones algunos con CSS nos vemos forzados a declarar líneas de código para especificar atributos para diferentes navegadores. Con Sass existe la posibilidad de realizar una especie de función la cual recibe parámetros y dentro de ella se realizan acciones en Sass. Por ejemplo:

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
  
.box
  +transform(rotate(30deg))

Herencia (Extend/Inheritance)

Sass provee la posibilidad de utilizar el concepto de Programación Orientada a Objetos como lo es la herencia. Es decir, puedes agregar código Sass de un selector dentro de otro selector. Aquí un ejemplo:

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333
  
.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

En el ejemplo anterior, se creo una placeholder class con la ayuda del símbolo %, las placeholder class sirven como modelo referencia para replicar el código en diferentes clases de Sass. Con la palabra reservada @extend se indica que un selector recibe como herencia el código de la placeholder class.

Operadores (Operators)

Sass nos da la posibilidad de trabajar con operadores matemáticos para efectuar cálculos matemáticos como la suma, resta, multiplicación o división. En CSS se puede asociar medidas de tamaño para el heigh o width con pixeles (px) o porcentajes (%). Con la ayuda de operadores podemos realizar calculos con base en medidas preestablecidas. Aquí un ejemplo:

nav
    width: 450px / 200px * 100%

Compilar Sass

Como mencionamos al principio Sass es un precompilador de código CSS, es decir, al final el código Sass se convertirá a código CSS. Para ello, es necesario compilar el código Sass con la ayuda de su compilador asociado. Para acceder al compilador es necesario instalar el compilador, puedes realizarlo mediante npm con el comando:
npm install -g sass
Posteriormente, una vez que se instale el compilador Sass podemos compilar el código Sass con el comando:
sass <nobreDelArchivoSass.sass> <nombreDelArchivoCSS.css>