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.

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

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

Este código:

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

Se puede sustituir por este:

div{
	a{
		&:hover{

		}
	}

}

Ejercicio

utilizando las siguientes variables de SASS:

/* colores */
$backColor: #bbd1ff;
$sliderColor: paleGreen;
$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;

Realizar el siguiente ejercicio.