¿Qué es SASS y como utilizarlo?

Que es sass y como utilizarlo

SASS es un lenguaje de de estilo en cascada. Se utiliza como herramienta para preprocesar CSS.

Con SASS podemos dinamizar la forma de realizar estilos CSS, optimizando el tiempo, trabajo y cantidad de código a escribir.

En este artículo te voy a enseñar lo básico de SASS para que comiences a sumergirte en este mundo.

¿Qué extensiones utiliza SASS?

Como cualquier otro lenguaje de programación, utiliza archivos con extensiones.

  • .scss
  • .sass

la diferencia más común es que uno te permite utilizar llaves ( {} ) y te ahora el trabajo de colocar punto y coma ( ; )

¿Cómo usar las variables?

Las variables, te permite crear variables para almacenar información y utilizarlas en tus propiedades CSS

Las variables se declaran muy similares a las propiedades css, pero con con algunas diferencias.

$my-color: #c6538c;
$dark: rgba( $my-color, 0.88);

.alert {
  border: 1px solid $dark;
}

Creé la variable $my-color, y en la variable $dark, utilizé la función rgba para generar un nuevo color con opacidad y se lo he añadido como como a nuestra propiedad border en CSS

¿Cómo usas los mapas?

Los maps en sass es una forma de utilizar «llave» «valor», para después consultar el valor correspondiente por su llave.

Para crear un mapa declaramos una variable y entre paréntesis colocamos la <llave>:<valor> se separados por comas

Es muy similar a la programación orientada a objetos. Veamos un ejemplo:

$colors : (
  "warning": #ffa726,
  "danger":  #ef5350,
  "success": #66bb6a,
);

Para consultar un valor se utiliza la funcion get-map, que recibe 2 parametos, el mapa y la llave.

.color-success{
  color: map-get( $colors, "success" )
}

Aprende más

¿Cómo usar los bucles en SASS?

Los bucles es un forma útil de iterar sobre los mapas. Podemos obtener la llave y el valor, y utilizarlo en las propiedades e incluso dinamizar el nombre de los elementos

La sintaxis es la siguiente @each <llave>, <valor > in <mapa> { } y dentro de las llaves colocamos nuestros elementos y propiedades.

@each $name, $color in $colors {
  .color-#{$name}{
    color: $color
  }
}

¿Cómo utilizar las funciones?

Las funciones como cualquier otro lenguaje de programación, te permite ejecutar un bloque de código para implementar lógica según se requiera.

Para declarar una función utilizamos @function y utilizamos @return para retornar el resultado

La sintaxis es @function <nombre-funcion> ( [,<params>] ) { @return }

@function  color-alpa($color, $alpa) {
  @return rgba($color, $alpa);
}

@each $name, $color in $colors {
  .color-#{$name}{
    color: color-alpha( $color, 0.8 )
  }
}

Es un ejemplo eh! ya se que la función puede que sea innecesaria, pero es una manera simple de explicarlo

Aprender más

¿Cómo utilizar mixin?

Los mixin es la forma útil de predefinir propiedades e incluirlas en los elementos. Para crear un mixin solo tienes que utilizar la sintaxis @mixin <nombre> { }, y entre las llaves colocamos nuestras propiedades. Para utilizarlas utilizamos la sintaxis @include <nombre>;

En este ejemplo vamos a utilizar un mixin para que nuestros elementos estén centrados verticalmente y horizontalmente con flex

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-flex{
  @include center-flex;
  width: 300px;
  height: 300px;
}

Artículos que podrían gustarte