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.

Instalación

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.

Uso

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

Variables

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

Mixings, o pedazos de código reutilizable

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

div{
  @include circle(100px);
}

Herencia

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

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

Nesting

div{
	a{
		&:hover{

		}
	}

}

El código anterior equivale a este:

div{}
div a{}
div a:hover{}

Ejercicio

utilizando las siguientes variables de SASS:

/* colores */
$backColor: #bbd1ff;
$sliderColor: orange;
$boxColor: rgba(0, 0, 0, 0.5);
$footer_color:pink;
$text_color:white;
$alternate_text_color:black;

/* distancias*/
$margin_top:40px;
$padding_box:20px;
$footer_padding:20px;