Primeros pasos en Sass
Comentarios en SassVariables en SassTipos de variables

<< Sass @import, use >>

Comentarios en Sass

Cuando comentamos nuestra hoja de estilo .scss, podemos usar tanto // como /* */, sin embargo, cuando la compilamos, sólo aparecen los comentarios que han sido introducidos con /* */, aquellos que tenían // desaparecen en el CSS que ha sido generado por el compilador. Por ejemplo:

/* Archivo style.css */
// Este comentario
// dejará de aparece
// al compilarlo 

/* Este comentario sí aparecerá */

Variables en Sass

Las variables en Sass comienzan por el símbolo $ seguido del nombre, por ejemplo: $bg-header: rgb(63, 81, 181);

Por tanto, aquí tenemos una variable definida y con un valor asignado, en este caso es un color. Con nuestro código de Sass, podemos llamar a $base simplemente con su nombre en cualquier punto de nuestra hoja de estilos, de forma que el nombre de nuestra variable en el código, será sustituido por el valor que le habíamos dado previamente cuando lo compilemos y generemos el fichero css.

$bg-header: rgb(63, 81, 181);
*{
  margin: 0;
  padding: 0;
}
header{
  background: $bg-header;
  h1{
    color: white;
  }
}

Normalmente si definimos una variable, ésta puede ser utilizada posteriormente modificando el valor que le habíamos dado antes, de forma que el valor anterior es sobrescrito.

$titulo-article: "Deja de comer pipas";

h2::before{
  $titulo-article : "Shakira is back";
  content: $titulo-article;
}

Al compilar el anterior archivo, el valor que tiene content es 'Shakira is back', ya que la variable $titulo-article fue sobrescrita, pasando de tener el valor de 'Deja de comer pipas' por 'Shakira is back'. Sin embargo si la segunda variable la hubiéramos definido así:

$bg-header: rgb(63, 81, 181);
$titulo-article: "Deja de comer pipas";
*{
  margin: 0;
  padding: 0;
}
header{
  background: $bg-header;
  h1{
    color: white;
  }
}
h2::before{
  $titulo-article: "Shakira is back" !default;
  content: $titulo-article;
}

Lo que estaría haciendo sería comprobar si la variable $titulo tiene un valor previo, y en el caso de no tenerlo le daría el valor 'Shakira is back'.

Si por ejemplo estamos utilizando una definición modular en Sass como puede ser un archivo para dar estilos a los botones (un partial), si un valor no es definido previamente y tiene la característica de !default, éste será usado por defecto.

// Si no está definido en otro lado será usado por defecto
$rounded: 3px !default; 

.btn-a{
      border-radius: $rounded;
      color: #777;
};
.btn-b{
      border-radius: $rounded;
      color: #222;
}

Por tanto, si estamos en nuestro archivo aplicacion.scss, y declaramos una variable que tenemos también en el archivo que importamos, lo que estamos haciendo es sobrescribir la variable que importaríamos por la que tenemos en nuestro “raíz”.

$rounded: 5px;
@import "buttons";

Tipos de variables

En Sass, podemos almacenar distintos tipos de valores como booleanos (cierto/falso), números con o sin unidades, colores, strings, listas y nulos.

Booleanos

$rounded: false;
$shadow: true;

Números (con o sin unidades)

$rounded: 4px;
$line-height: 1.5;
$font-size: 3rem;

Colores

$base: purple;
$border: rgba(0,255,0,0.5);
$shadow: #333;

Strings (con o sin comillas)

$header: 'Helvetia Neue';
$callout: Arial;
$message: "Loading…";

Listas

$authors: Rosa, Pablo, Jose, Lucia;

Mapas

$font-wights: ("regular": 400, "medium": 500);

Null

$shadow: null

<< Sass @import, use >>