1. ¿Para qué sirve?
  2. Características.
  3. Instalación
  4. Uso
  5. Variables
  6. Mixings, o pedazos de código reutilizable
  7. Herencia
  8. Nesting
  9. Ejercicio

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

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.

icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?