SASS

SASS es una tecnología que te permitirá ser mucho más rápido y eficiente a la hora de generar tus hojas de estilos, permitiendote insertar código dinámico (variables, funciones) como si estuviesen hechas con Javascript o cualquier otro lenguaje de programación.

Ejercicios

Recursos

Videos

A lo largo del curso de SASS encontrarás estos iconos, que son enlaces a los diferentes recursos del curso (ejercicios, ejemplos, ficheros descargables y videos premium).

Índice del curso de SASS

¿Para qué sirve?
Características.
Instalación
Uso
Variables
Mixings, o pedazos de código reutilizable
Herencia
Nesting
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:

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

Aviso Legal

Los derechos de propiedad intelectual sobre el presente documento son titularidad de D. Pablo Monteserín Fernández Administrador, propietario y responsable de pablomonteserin.com. El ejercicio exclusivo de los derechos de reproducción, distribución, comunicación pública y transformación pertenecen a la citada persona.

Queda totalmente prohibida la reproducción total o parcial de las presentes diapositivas fuera del ámbito privado (impresora doméstica, uso individual, sin ánimo de lucro).

La ley que ampara los derechos de autor establece que: “La introducción de una obra en una base de datos o en una página web accesible a través de Internet constituye un acto de comunicación pública y precisa la autorización expresa del autor”.

El contenido de esta obra está protegido por la Ley, que establece penas de prisión y/o multa, además de las correspondientes indemnizaciones por daños y perjuicios, para quienes reprodujesen, plagiaren, distribuyeren o comunicaren públicamente, en todo o en parte, o su transformación, interpretación o ejecución fijada en cualquier tipo de soporte o comunicada a través de cualquier medio.

El usuario que acceda a este documento no puede copiar, modificar, distribuir, transmitir, reproducir, publicar, ceder, vender los elementos anteriormente mencionados o un extracto de los mismos o crear nuevos productos o servicios derivados de la información que contiene.

Cualquier reproducción, transmisión, adaptación, traducción, modificación, comunicación al público, o cualquier otra explotación de todo o parte del contenido de este documento, efectuada de cualquier forma o por cualquier medio, electrónico, mecánico u otro, están estrictamente prohibidos salvo autorización previa por escrito de Pablo Monteserín.

El autor de la presente obra podría autorizar a que se reproduzcan sus contenidos en otro sitio web u otro soporte (libro, revista, e-book, etc.) siempre y cuando se produzcan dos condiciones:

Se solicite previamente por escrito mediante email al correo pablomonteserin@pablomonteserin.com.

En caso de aceptación, no se modifiquen los textos y se cite la fuente con absoluta claridad.

Una parte de las imágenes utilizadas en este documento no son propiedad de Pablo Monteserín, por lo que, si alguna de estas imágenes estuviera sujeta a derechos de autor, o a algún otro tipo de derecho que impida su publicación en este documento, una vez que el autor, Pablo Monteserín, tenga conocimiento del hecho, procederá a la retirada inmediata de la imagen protegida por los derechos pertinentes.

Pablo Monteserín

Cursos de páginas web