Curso de SASS

¿Para qué sirve?

SASS (Syntactically Awesome Style Sheets) permite convertir el CSS en algo dinámico, añadiendo la posibilidad de definir variables y funciones.

Características

SASS dispone de dos formatos diferentes para la sintaxis:

.sass:
- Es más antiguo.
- No utiliza llaves ni punto y coma final

body background: #000 font-size: 62.5%

.scss:
- Es la versión 3 del preprocesador.
- Permite utilizar llaves e incorporar código clásico.

En el presente curso estudiaremos el código correspondiente a la extensión SCSS

En este enlace podemos ver la hoja de estilos resultante de ejecutar código SASS.

Ejecución

Método 1. Ejecutar como extensión de Visual Studio Code

Esta es la opción más sencilla. Instalamos Una extensión y generamos el fichero css en la misma ubicación que el fichero scss. Aunque se puede personalizar la ubicación del fichero css de destino, si este es nuestro objetico, sería más recomendable utilizar el segundo método.

1. Instalamos la extensión Live Sass Compile.

2. Creamos un fichero con extensión .SCSS

3. Activamos la extensión (barra de tareas ubicada en la esquina inferior derecha de la pantalla) para que vaya observando los cambios que hacemos en el documento .scss y generando el documento .css automáticamente.

Método 2. Ejecutar utilizando el módulo node-sass

Instalamos el paquete de sass:

npm i sass

Configuramos la ejecución del método en el siguiente fichero:

/package.json

   "scripts": {
    "sass": "sass --watch --quiet ./src/scss/style.scss ./src/style.css"
  }

Variables en SASS

$brand: #F98355;
body{
	color:$brand;
}

Nesting

div{
	a{
		&:hover{

		}
	}

}

Mixings, o pedazos de código reutilizable

@mixin circle($width) {
  width: $width;
  height: $width;
  border-radius: 100%;
  background:black;
}

div{
  @include circle(100px);
}

Herencia en SASS

.featured{
	background:#000;
	width:100px;
	height:100px;
	padding:10px;
}

div{
  @extend .featured;
  color:orange;
  font-family:sans-serif;
}

@Import

style.scss

@import "./colors";

Los ficheros importados deben empezar por guion bajo.

_colors.scss

$bgColor: red;
$blue: blue;

Operaciones

No te olvides de poner los espacios en blanco a ambos lados del símbolo de restar.

$n :2;
.box:nth-child(#{$n - 1}) {
    background: transparent;
    margin-top: #{$n*6}rem;
}

.box:nth-child(3) {
   background: transparent;
   margin-top: 12rem; 
}

$n :2;

.box:nth-child(#{$n}) {
    background: transparent;
    margin-top: #{($n - 1)*6}rem;
}

$n :2;

.box:nth-child(2) {
  background: transparent;
  margin-top: 6rem; }