¿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.

Instalación

Por consola

En windows:

Primero habrá que instalar ruby. Podemos descargarlo desde este enlace.

npm install -g sass

En Mac

sudo gem install compass

En linux

sudo apt-get -y install ruby &&
sudo su -c "gem install sass"

También es posible utilizar sass mediante aplicaciones, en lugar de mediante la línea de comando.

Ejecutar SASS desde la consola

Es necesario que el fichero .scss exista de antemano.

No es necesario que el fichero .css exista de antemano.

sass --watch filename.scss:filename.css

Como extensión de Visual Studio Code

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.

Configurando un módulo de npm

package.json

  {
  "watch": {
    "sass": {
      "patterns": [
        "src"
      ],
      "extensions": [
        "scss"
      ],
      "quiet": true
    }
  },
  "scripts": {
    "start": "npm-watch",
    "sass": "node-sass --include-path scss ./src/scss/style.scss ./src/style.css",
    "sass-watch": "npm-watch sass"
  },
  "dependencies": {
    "node-sass": "^7.0.1",
    "npm-watch": "^0.11.0"
  }
}

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; }

Accede a tu cuenta