FRONT-END BASICSSASS & Compass

/ ♣ Octubre 2012Nadal Soler @nadalsol

SASS

Filosofía y definiciónSass vs. LESSSass básicoSass avanzadoCompassRecursos

SASSFILOSOFÍA PRINCIPAL

Del libro , de Hampton Catlin y Michael Lintorn Catlin.

“ DRY—Don't Repeat YourselfReducir la repetición de código en las hojas de estilo,

ahorrando tiempo y esfuerzo. ”

Pragmatic Guide to SASS

SASS… WHAT?SYNTACTICALLY AWESOME STYLESHEETS

Lenguaje de pre-procesado server-side, que añade reglas anidadas,variables, mixins,…Se traduce en CSS estándar, bien formateado*.Es un método alternativo de escribir CSS.El CSS tradicional puede ser complicado de leer: Sass soluciona esto.No reemplaza al CSS tradicional, pero nos ayuda a escribir hojas deestilo limpias y semánticas.Dos sintaxis distintas para escribir Sass: SCSS y SASS original. Noscentraremos en la primera (SCSS).

* Para procesarlo se puede usar la línea de comandos (consola), algun web-framework plugin,o alguna GUI como o .Scout CodeKit

SASSOTRA GRAN VENTAJA

En definitiva, Sass ayuda a mantener un diseño consistente.

“Tener una paleta de color con un número fijo deopciones a escoger ayuda a no volverse loco con los

colores y a no desviarse del estilo marcado.”

SASS VS. LESSDIFERENCIAS

* LESS es una librería JavaScript (client-side).

“La mayor diferencia entre Sass y LESS* es el modo enque son procesados. Sass corre sobre Ruby y es

procesado server-side.”

SASS VS. LESS¿CUÁL ESCOGER?

Aunque Sass es mejor en unos cuantos aspectos, ambos presentangrandes similitudes.Ambos son pre-procesados.La documentación de LESS es mejor pero, por otro lado, Sass pareceque está ganando terreno.Muchos desarrolladores no escogen LESS por su impacto negativosobre la performance*.

* Tiempo adicional requerido por el motor de JavaScript para procesar el código y volcar el CSS modificado hacia elnavegador. Una solución es usar LESS solo en entorno de desarrollo y una vez terminado, copiar y pegar el código

generado, minificarlo y meterlo en un fichero CSS.

SASS BÁSICOINSTALACIÓN

Para correr Sass, necesitas tener instalado.

Windows: instalar mediante o similar.Mac: desde terminal: sudo gem install sass.

Linux: utilizar el package manager y desde linea de comandos: gem

install sass.

Ruby

Ruby Installer

SASS BÁSICOCOMPILACIÓN

Crear fichero Sass, con extensión .scss.

Compilar el directorio sass/ a CSS y printarlo por consola: sass

test.scss

Compilar el directorio sass/ a CSS en un nuevo fichero .css: sass

test.scss test.css

Algunos frameworks, como , detectan cambios enficheros .scss y los compilan automáticamente a .css.

Si no usamos frameworks usar el comando watch, que detecta los

cambios en los ficheros de nuestra carpeta sass/ y los compila en

ficheros .css en la carpeta especificada (css/):

sass --watch stylesheets/sass:stylesheets/css

Ruby on Rails

SASS BÁSICOALTERANDO LA SALIDA CSS

Al compilar nuestro Sass se generan los CSS. Estos se pueden formatear de distintos modos:

Ejemplo. Compilar el fichero Sass a CSS en un nuevo fichero CSS comprimido:

sass --style nested // anidado (default).

sass --style expanded // super legible.

sass --style compact // una sola linea por declaración.

sass --style compressed // super compacto (minified).

sass test.scss test.css --style compressed

SASS BÁSICOCOMPILANDO CON SCOUT

es una GUI que nos permite importar nuestro proyecto, especificando una carpeta de origen (p.e. "sass") y desalida (p.e. "css").

detecta cualquier cambio en los ficheros .scss y actualiza los .css de salida.

Scout

Scout

SASS BÁSICO/* COMENTARIOS */

Usar comentarios de una sola linea para que aparezcan sólo en los ficheros Sass:

Usar comentarios estándar de CSS para que estos se compilen en el CSS final:

// Hola! Este comentario sólo aparecerá en el fichero .scss

/* Adéu! Este comentario aparecerá en el .css final */

SASS BÁSICOÁMBITO (SCOPE) DE LOS SELECTORES

Sass soluciona la repetición de código mediante el anidado (nesting).

CSS "scopeado":

Sass:

.infobox {width:200px;}

.infobox .message {border:1px solid red;}

.infobox .message .title {color:red;}

.infobox .user {border:2px solid black;}

.infobox .user .title {color:black;}

.infobox { width:200px; .message { border:1px solid red; .title { color:red; } } .user { border:2px solid black; .title { color:black; } } }

SASS BÁSICODEFINIENDO VARIABLES

Las variables ($var_name) son útiles para evitar la repetición de valores en nuestros CSS.

Las variables pueden ser globales o locales:

Globales: se definen en su propia linea y se aplican a todas las hojasde estilos.Locales: se definen dentro de un selector y se aplican sólo dentro dedicho selector y sus hijos.

Se pueden establecer variables por defecto con el tag !default después de la asignación. Al usar una variable, seusa la asignación por defecto si no hay otras asignaciones de esa variable.

$primary_color: #369;

SASS BÁSICOCALCULANDO UN LAYOUT

Sass permite hacer cáculos “al vuelo”, pudiéndose realizar lasoperaciones típicas mediante los operadores habituales de

programación (+, -, *, /).

Ejemplo:

Otro ejemplo:

width: 12px * 0.5;

$page_width: 500px;width: $page_width * 0.1;

SASS BÁSICOCREANDO THEMES CON COLORES AVANZADOS

Cambiar la paleta de color de un site entero siempre es un engorro. Con Sass esto se puede hacer fácilmentemediante funciones para aclarar y oscurecer colores, saturar y desaturar, entre muchas otras… Ejemplos:

Aclarar/Oscurecer colores:

Saturar/Desaturar colores:

#page {color: lighten(#336699, 20%); }

$main_color: #336699;#page {color: saturate($main_color, 30%); }

SASS BÁSICO@IMPORTANDO

Importando centralizamos llamada a distintos ficheros.Lo hacemos con @import seguido por el nombre del fichero Sass que

queramos importar, p.e. @import "test" (extensión .scss o

.sass no necesaria).

Para que un fichero Sass no genere el correspondiente fichero CSSescribiremos "_" delante del nombre del fichero (p.e. _test.scss).

Cualquier variable o mixin que usemos en la hoja de estilos importadapodrá usarse en el fichero padre.

SASS BÁSICO@IMPORTANDO

Fichero _colors.scss:

Fichero widths.scss:

Imports en fichero principal*:

* Al hacer @import no es necesario incluir el guión bajo ni la extensión de _colors.scss.

$main_color: #336699;// A LOT MORE COLORS GO HERE.

$main_width: 720px;// A LOT MORE WIDTHS GO HERE.

@import "colors";@import "widths";

SASS BÁSICOCONSTRUYENDO UNA LIBRERÍA FONT FAMILY

Con CSS tradicional hay que especificar una misma familia defuentes una y otra vez, o bién usar classes no semánticas(p.e.font14).

Con Sass podemos usar variables, en lugar de repetir la mismadeclaración de font-family una y otra vez.

Podemos declarar estas variables al principio de nuestra hoja deestilos, o bién ponerlas en un fichero a parte e importarlas con@import.

SASS BÁSICOCONSTRUYENDO UNA LIBRERÍA FONT FAMILY

Ejemplo

Fichero font_family.scss:

Import en fichero principal:

$helvetica: "helvetica neue", arial, helvetica, sans-serif;

$geneva: geneva, tahoma, sans-serif;

$lucida: "lucida grande", "lucida sans unicode","lucida sans", lucida, sans-serif;

@import "font_family";

SASS AVANZADOMANTENIENDO LA SEMÁNTICA CON @EXTEND

Mantener la semántica es una filosofía donde todo se nombra de forma lógica:

¿Qué ocurre si tenemos un grupo de atributos -por ejemplo un botón azul- que necesitamos aplicar a múltiplesbotones con distintas funciones?

.blue_button /* incorrecto (nombre según aspecto) */

.checkout_button /* correcto (nombre según función) */

.checkout_button { background-color:blue; border:1px solid black;}.reset_button { background-color:blue; border:1px solid black;}.send_button { background-color:blue; border:1px solid black;}

/* o bién… */

.checkout_button,

.reset_button,

.send_button { background-color:blue; border:1px solid black;}

SASS AVANZADOMANTENIENDO LA SEMÁNTICA CON @EXTEND

Aquí es donde entra @extend, que clona los atributos de una class o id y los añade a otro:

Esto se compila como:

.blue_button { background: #336699; font-weight: bold; color: white; padding: 5px; }

.checkout_button { @extend .blue_button; }

.blue_button, .checkout_button { background: #336699; font-weight: bold; color: white; padding: 5px; }

SASS AVANZADOMANTENIENDO LA SEMÁNTICA CON @EXTEND

@extend permite modificar los estilos clonados.

Por ejemplo, si necesitamos hacer que el checkout_button sea más oscuro que el blue_button originalhacemos:

.checkout_button { @extend .blue_button; color: darken(#336699, 10%);}

SASS AVANZADOMANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINS

Un mixin es un fragmento de Sass que puede ser fácilmente aplicadoa otro selector, evitando la repetición de código.Ayudan a mantener el código semántico (p.e. podemos definir unmixin como blue_text y luego aplicarlo a una class con nombre

más específico, como product_title).

Es bueno tener los mixins en una hoja de estilos a parte, para luegoimportarlos desde la hoja principal.

SASS AVANZADOMANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINS

Un mixin se define de la siguiente forma (mixin_text.scss):

Para usarlo haremos (mixin_use.scss):

Esto se compila como:

@mixin blue_text { color: #336699; font-family: helvetica, arial, sans-serif; font-size: 20px; }

.product_title { @include blue_text; }

.product_title { color: #336699; font-family: helvetica, arial, sans-serif; font-size: 20px; }

SASS AVANZADOLLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES

Con @extend los valores se mantienen, mientras que los mixins

pueden incluir argumentos o parámetros que permiten variar losvalores.

Definir un mixin con atributos variables:

@mixin blue_text($size) { color: #336699; font-family: helvetica, arial, sans-serif; font-size: $size; font-variant: small-caps; }

.product_title { @include blue_text (15px); }

SASS AVANZADOLLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES

Definir un mixin con un valor por defecto:

Usar el mixin con y sin valor por defecto:

@mixin blue_text($size: 20px) { color: #336699; font-family: helvetica, arial, sans-serif; font-size: $size; font-variant: small-caps; }

.product_title { @include blue_text; }

.product_title { @include blue_text (100px); }

SASS AVANZADOLLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES

El ejemplo anterior se compila, respectivamente, como:

.product_title { color: #336699; font-family: helvetica, arial, sans-serif; font-size: 20px; font-variant: small-caps; }

.product_title { color: #336699; font-family: helvetica, arial, sans-serif; font-size: 100px; font-variant: small-caps; }

SASS AVANZADOINTERPOLACIÓN

Interpolación significa "pon esto aquí". Nos permite generardinámicamente el nombre de una propiedad o selector, escribiendo la

variable entre #{}.

Esto se compila como:

$carname: volvo;

.red_#{$carname} { color: #f00;}

.red_volvo { color: #f00;}

SASS AVANZADOSI TE REPITES MÁS QUE EL AJO, USA @EACH

@each ayuda a mantener nuestro Sass DRY. Es un modo de copiar el

mismo estilo para un montón de variables.

Esto se compila como:

@each $member in thom, jonny, colin, phil { .#{$member}_picture { background-image: url("/image/#{$member}.jpg"); } }

.thom_picture { background-image: url("/image/thom.jpg"); }.jonny_picture { background-image: url("/image/jonny.jpg"); }.colin_picture { background-image: url("/image/colin.jpg"); }.phil_picture { background-image: url("/image/phil.jpg"); }

SASS AVANZADODETERMINANDO CONDICIONES CON @IF

@if permite escribir condiciones, muy útil cuando escribimos mixins reusables y funciones.

Esto se compila como:

@mixin country_color($country) { @if $country == france { color: blue; } @else if $country == spain { color: yellow; } @else if $country == italy { color: green; } @else { color: red; } }

.england { @include country_color(england); }

.france { @include country_color(france); }

.england { color: red; }

.france { color: blue; }

SASS AVANZADOCAMBIANDO EL ASPECTO CON @MEDIA ANIDADO

Cambiar el estilo en base al dispositivo.

Usando @media en estilo anidado:

Esto se compila como:

.main { color: #336699; font-size: 15px; @media print { font-size: 10px; } }

.main { color: #336699; font-size: 15px; } @media print { .main { font-size: 10px; } }

SASS AVANZADOCAMBIANDO EL ASPECTO CON @MEDIA ANIDADO

Haciendo el site portrait-specific…

…o landscape-specific.

.main { color: #336699; font-size: 15px; @media screen and (max-width: 320px) { font-size: 35px; } }

.main { color: #336699; font-size: 15px; @media screen and (min-width: 321px) and (max-width: 480px) { font-size: 25px; } }

COMPASSLibrería de mixins, funciones y otras extensiones

útiles para Sass.

Una vez instalado Ruby, procedemos a instalar Compass:

Para compilar nuestras hojas de estilo usaremos --compass:

gem update --systemgem install compass

sass --compass myfile.scss myfile.csssass --compass --watch

COMPASSCONFIGURACIÓN DE UN PROYECTO

Compass configura ficheros y carpetas por defecto.Crear proyecto: $> compass create project_nameCompilar: $> compass compile project_nameUna vez generado tu proyecto, coloca tus ficheros Sass en la carpetasass/. El CSS compilado se coloca automáticamente en la carpeta

css/.

Cambiar configuración: editar fichero config.rb.

Vigilar cambios proyecto entero: compass watch.

COMPASSLAS VENTAJAS DE "LA BRÚJULA"

Facilita mucho el desarrollo, ahorrando tiempoy esfuerzo en desarrollo.

GUI de Compass, para los "no amantes" de la consola.

Compass.app

RECURSOS, de Hampton Catlin y Michael Lintorn

Catlin. y , página oficial.

, de CSS-Tricks., de Smashing

Magazine., página oficial.

..

Pragmatic Guide to Sass

Sass Language Sass Script FunctionsSass vs. LESSAn Introduction To LESS, And Comparison To Sass

Compass, an open-source CSS Authoring FrameworkSass, Compass, and Assetic in 10 minutesmooxins: CSS3 mixins for Sass(scss)

DUDAS, PREGUNTAS, BOSTEZOS…

☛ The End ☚