Tutorial de Sass

18 de /diciembre12 de /2015

9m 7s

sass

0 comentarios

5047

Sass es un preprocesador css que nos permite definir los estilos css de forma más limpia y productiva e introducir conceptos similares a la programación como las variables o las funciones en nuestras hojas de estilo además de otras carácteristicas como el anidamiento. la herencia o los mixins.

Instalación en Windows

Lo primero que tenemos que hacer es instalar Ruby desde el siguiente enlace:
rubyinstaller.org

Una vez instalado abrimos la consola de Ruby (se encuentra en el menú de inicio – todos los programas, en la carpeta de Ruby) y ejecutamos
gem install sass
y a continuación
gem install compass

Instalación en Mac y Linux

En Mac y Linux, Ruby viene por defecto pre-instalado en el sistema, si nuestra distribución Linux no tiene instalado Ruby, lo instalamos ejecutando:
sudo apt-get install ruby

Por último ejecutamos:
sudo gem install sass

Como trabajar con Sass

Para trabajar con Sass necesitamos compilar el código, principalmente trabajaremos desde el archivo sass(.scss) y compilaremos el código
a un archivo css(.css).

.scss > Compilador > .css

Para realizar este proceso tenemos que usar una serie de comandos de Sass, estos son los más importantes:

sass nombre_archivo.scss nombre_archivo_compilado.css
Compila un archivo .scss a .css

sass –watch nombre_archivo.scss:nombre_archivo_compilado.css
Vuelve a compilar un archivo cada vez que se produzca algún cambio.

sass –watch directorio_A:directorio_A/directorio_B
Vuelve a compilar cada vez que se produzca algún cambio en algún archivo del directorio “A” y los compila en el directorio “B”.

sass –help
Muestra en consola la ayuda y documentación disponible de sass.

Trabajando con Sass

Ya sabemos como compilar los archivos con Sass, vamos a crear un ejemplo para comprobar como funciona.

Debemos crear los siguientes archivos:

index.html
style.scss
style.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>

style.scss

.menu {
li {
font-weight: bold;
a {
color: #333333;
}
}
}

A continuación nos situamos en la ruta con la consola de Ruby(Interactive Ruby) y ejecutamos:
sass –watch style.scss:style.css
para que se compile el archivo cada vez que se produzca algún cambio, automaticamente Sass compila el archivo .scss, el resultado del archivo “style.css” después de compilarse es el siguiente:

.menu li {
font-weight: bold;
}
.menu li a {
color: #333333;
}

Anidar reglas

En el ejemplo anterior hemos visto como anidábamos unos selectores dentro de otros, Sass nos permite anidar estos selectores y los compila precediendolos con su selector padre, veamos un ejemplo, vamos escribir las siguientes reglas en el archivo “style.scss”:


li {
text-transform: uppercase;
}
.menu {
li {
font-weight: bold;
}
}

Al guardar los cambios el código se compila de la siguiente forma:

li {
text-transform: uppercase; 
}
.menu li {
font-weight: bold; 
}

Anidar propiedades

Sass nos permite ademas anidar algunas propiedades como background, font o margin:

.menu {
font: {
family: Arial;
size: 3em;
}
margin: {
right: 2%;
left: 3%;
}
background: {
color: #FFFFFF;
image: url(images/image.png);
}
}

Al guardar los cambios el código se compila de la siguiente forma:


.menu {
font-family: Arial;
font-size: 3em;
margin-right: 2%;
margin-left: 3%;
background-color: #FFFFFF;
background-image: url(images/image.png); 
}

El carácter “&”

Este carácter se reemplaza por el selector padre y selectores ascendentes si existen.


.enlace a {
color: #FFFFFF;
&:hover {
color: #222222;
}
&:visited {
color: #999999;
}
}

Resultado


.enlace a {
color: #FFFFFF;
 
}
.enlace a:hover {
color: #222222; 
}
.enlace a:visited {
color: #999999;
 
}

Variables

Esta es una de las carácteristicas que mas me gustan de Sass, practicamente es el mismo uso de las variables que hacemos en lenguajes de programación como Javascript o PHP:


$cinco: 5px;
$blanco: #FFFFFF;
.boton {
border-radius: $cinco;
color: $blanco;
}

Resultado

.boton {
border-radius: 5px;
color: #FFFFFF;
}

Variables globales y locales

Quizás es muy atrevido llamar a las variables de Sass de este modo, pero es lógico por su parecido a las variables de muchos entornos de programación.

Si declaramos la variable fuera del contexto de cualquier regla, esta se utiliza de modo global y la podemos reutilizar en toda la hoja de estilos, si la variable es declarada dentro del contexto de una regla se utilizará de modo local, afectando solamente a la regla dentro de la cual ha sido definida, veamos un ejemplo, el siguiente código nos mostraría un error al compilar:


$cinco: 5px;
div {
$blanco: #FFFFFF;
.boton1 {
border-radius: $cinco;
color: $blanco;
}
}
.boton2 {
border-radius: $cinco;
color: $blanco;
}

Resultado


/*
Error: Undefined variable: "$blanco".
on line 11 of style.scss
...

La variable “$blanco” ha sido declarada en la línea 3 dentro del contexto de las reglas de “div”, por lo tanto forma parte de ese contexto, como una variable local en la línea 6 ha sido definida correctamente, pero no puede definirse fuera de ese contexto, que es el error que nos advierte Sass en la línea 11.

Mixins

Esta carácteristica es mas potente que la anterior, los mixins son como super conjuntos de reglas css, dentro de los cuales podemos definir reglas y otras carácteristicas de Sass, los creamos con la sintaxis
@mixin NOMBRE_MIXIN {
…
}

Y los definimos con la sintaxis
@include NOMBRE_MIXIN {
…
}

Veamos un ejemplo en el que incluiremos dos variables, las incluiremos en el mixin y posteriormente definiremos el mixin para los enlaces:

$blanco: #FFFFFF;
$negro : #000000;
@mixin enlaces {
margin: {
left: 5px;
right: 5px;
}
color: $negro;
&:hover {
color: $blanco;
}
}
a {
@include enlaces;
}

El resultado de la compilación sería el siguiente

a {
margin-left: 5px;
margin-right: 5px;
color: #000000; 
}
a:hover {
color: #FFFFFF; 
}

Interpolación

Gracias a esta carácteristica de Sass, podemos usar las variables en los selectores y las propiedades

$limpiar: clear;
div.#{$limpiar} {
#{$limpiar}: both;
}

Este es el resultado al compilar

div.clear {
clear: both; 
}

Importar archivos con @import

Esta regla es el mismo concepto que en css, podemos importar archivos .scss y .css al archivo .scss principal, tal y como lo hace la versión de Bootstrap 4, que ha cambiado su procesador Less por Sass a partir de esta versión. No es necesario incluir la extensión del archivo, aunque si es recomendable ya que por defecto Sass importará el archivo con extensión .scss, al compilar con Sass se creará un único archivo .css

@import "navbar.scss";
@import "section.scss";
@import "aside.scss";
@import "footer.scss";

También podemos importar archivos dentro de una regla

div {
@import "estilosdiv.scss";	
}

@media

Este concepto, al igual que @import, es practicamente igual que en css, en Sass lo anidamos dentro de la regla

.navbar li {
display: inline;
@media (max-width: 450px) {
display: block;
}
}

Resultado

.navbar li {
display: inline; 
}
@media (max-width: 450px) {
.navbar li {
display: block; 
} 
}

Heredar reglas con @extend

Con esta regla podemos heredar los estilos de otro selector de la siguiente forma:

.bordegrueso {
border-width: 6px;
}
.bordecontenedor {
@extend .bordegrueso;
border-color: #333333;
}

Resultado

.bordegrueso, .bordecontenedor {
border-width: 6px; 
}
.bordecontenedor {
border-color: #333333; 
}

Comentarios

Podemos incluir comentarios en Sass de dos modos diferentes, si lo hacemos del mismo modo que los incluimos en css (/**/) se compilarán en el archivo css, si usamos la sintaxis (//) no se compilarán en el archivo css, veamos un ejemplo:

/* Este comentario SI se compila */
// Este comentario NO se compila

Resultado

/* Este comentario SI se compila */

Hasta aquí hemos visto las características más importantes y más usadas de Sass, con lo que hemos visto hasta ahora podemos usar Sass de modo muy profesional, Sass es mucho más amplio y posee otras características más avanzadas como funciones, expresiones y directivas de control que veremos en futuros artículos, aunque no es necesario dominar todos los conceptos de Sass ni todos se usan habitualmente, el hecho de usar un preprocesador css ya es hacernos un gran favor a nosotros mismos, si descargamos la versión de Bootstrap 4 podemos hacernos una idea más clara de lo que podemos hacer con Sass viendo su carpeta “scss”, esto en un proyecto de gran envergadura nos ofrece una mayor productividad y un mayor control sobre los estilos, ahorrandonos muchas horas tanto en el desarrollo como en el mantenimiento.

Valoraciones

Sé el primero en valorar

Ver más de sass

Tutorial de Sass

Instalación en Windows

Instalación en Mac y Linux

Como trabajar con Sass

Trabajando con Sass

Anidar reglas

Anidar propiedades

El carácter “&”

Variables

Variables globales y locales

Mixins

Interpolación

Importar archivos con @import

@media

Heredar reglas con @extend

Comentarios

Cancelar la respuesta

Quizás te interese ...

Modificar las variables de Bootstrap con Sass

Directivas de control en Sass