My slides -in spanish- about "Sass & Compass".

1. FRONT-END BASICS
SASS & Compass
/ ♣ Octubre 2012Nadal Soler @nadalsol

2. SASS
Filosofía y definición
Sass vs. LESS
Sass básico
Sass avanzado
Compass
Recursos

3. SASS
FILOSOFÍA PRINCIPAL
Del libro , deHampton Catlin y Michael Lintorn Catlin.
“ DRY—Don't Repeat Yourself
Reducir la repetición de código en las hojas de estilo,
ahorrando tiempo y esfuerzo. ”
Pragmatic Guide to SASS

4. SASS… WHAT?
SYNTACTICALLYAWESOME 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 de
estilo limpias y semánticas.
Dos sintaxis distintas para escribir Sass: SCSS y SASS original. Nos
centraremos en la primera (SCSS).
* Para procesarlo sepuedeusar la línea decomandos (consola), algun web-framework plugin,
o alguna GUI como o .Scout CodeKit

5. SASS
OTRA GRAN VENTAJA
En definitiva, Sass ayuda a mantenerun diseño consistente.
“Tener una paleta de color con un número fijo de
opciones a escoger ayuda a no volverse loco con los
colores y a no desviarse del estilo marcado.”

6. SASS VS. LESS
DIFERENCIAS
* LESS es una librería JavaScript (client-side).
“La mayor diferencia entre Sass y LESS* es el modo en
que son procesados. Sass corre sobre Ruby y es
procesado server-side.”

7. SASS VS. LESS
¿CUÁLESCOGER?
Aunque Sass es mejor en unos cuantos aspectos, ambos presentan
grandes similitudes.
Ambos son pre-procesados.
La documentación de LESS es mejor pero, por otro lado, Sass parece
que está ganando terreno.
Muchos desarrolladores no escogen LESS por su impacto negativo
sobre la performance*.
* Tiempo adicional requerido por el motor deJavaScript para procesar el código y volcar el CSS modificado hacia el
navegador. Una solución es usar LESS solo en entorno dedesarrollo y una vezterminado, copiar y pegar el código
generado, minificarlo y meterlo en un fichero CSS.

8. SASS BÁSICO
INSTALACIÓ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

9. SASS BÁSICO
COMPILACIÓ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 en
ficheros .scssy 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 .cssen la carpeta especificada (css/):
sass --watch stylesheets/sass:stylesheets/css
Ruby on Rails

10. SASS BÁSICO
ALTERANDO LA SALIDA CSS
Al compilar nuestro Sass segeneran los CSS. Estos sepueden formatearde 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

11. SASS BÁSICO
COMPILANDO CON SCOUT
es una GUI quenos permiteimportar nuestro proyecto, especificando una carpeta deorigen (p.e. "sass")y de
salida (p.e. "css").
detecta cualquier cambio en los ficheros .scssy actualiza los .cssdesalida.
Scout
Scout

12. SASS BÁSICO
/* COMENTARIOS*/
Usar comentarios de unasolalineapara queaparezcan sólo en los ficheros Sass:
Usar comentarios estándardeCSS para queestos secompilen en el CSS final:
// Hola! Este comentario sólo aparecerá en el fichero .scss
/* Adéu! Este comentario aparecerá en el .css final */

13. SASS BÁSICO
ÁMBITO (SCOPE)DE LOSSELECTORES
Sass soluciona la repetición decódigo medianteel 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; } } }

14. SASS BÁSICO
DEFINIENDO VARIABLES
Las variables ($var_name)son útiles para evitar la repetición devalores en nuestros CSS.
Las variables pueden ser globales o locales:
Globales: se definen en su propia linea y se aplican a todas las hojas
de estilos.
Locales: se definen dentro de un selector y se aplican sólo dentro de
dicho selector y sus hijos.
Sepueden establecer variables pordefecto con el tag!defaultdespués dela asignación. Al usar una variable, se
usa la asignación por defecto si no hay otras asignaciones deesa variable.
$primary_color: #369;

15. SASS BÁSICO
CALCULANDO UN LAYOUT
Sass permite hacer cáculos “al vuelo”, pudiéndose realizar las
operaciones típicas mediante los operadores habituales de
programación (+, -, *, /).
Ejemplo:
Otro ejemplo:
width: 12px * 0.5;
$page_width: 500px;
width: $page_width * 0.1;

16. SASS BÁSICO
CREANDO THEMESCON COLORESAVANZADOS
Cambiar la paleta decolor deun siteentero siemprees un engorro. Con Sass esto sepuedehacer fácilmente
mediantefunciones paraaclarary oscurecercolores, saturary 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%); }

17. SASS BÁSICO
@IMPORTANDO
Importando centralizamos llamada a distintos ficheros.
Lo hacemos con @importseguido por el nombre del fichero Sass que
queramos importar, p.e. @import "test"(extensión .scsso
.sassno necesaria).
Para que un fichero Sass no genere el correspondiente fichero CSS
escribiremos "_" delante del nombre del fichero (p.e. _test.scss).
Cualquier variable o mixin que usemos en la hoja de estilos importada
podrá usarse en el fichero padre.

18. SASS BÁSICO
@IMPORTANDO
Fichero _colors.scss:
Fichero widths.scss:
Imports en fichero principal*:
* Al hacer @importno 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";

19. SASS BÁSICO
CONSTRUYENDO UNA LIBRERÍA FONT FAMILY
Con CSS tradicional hay que especificar una misma familia de
fuentes 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 misma
declaración de font-familyuna y otra vez.
Podemos declarar estas variables al principio de nuestra hoja de
estilos, o bién ponerlas en un fichero a parte e importarlas con
@import.

20. SASS BÁSICO
CONSTRUYENDO 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";

21. SASS AVANZADO
MANTENIENDO LA SEMÁNTICA CON @EXTEND
Mantener la semánticaes una filosofía dondetodo se nombrade formalógica:
¿Quéocurresi tenemos un grupo deatributos -por ejemplo un botón azul- quenecesitamos aplicar a múltiples
botones 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;
}

22. SASS AVANZADO
MANTENIENDO LA SEMÁNTICA CON @EXTEND
Aquí es dondeentra @extend, queclonalos atributos deuna classo idy los añadea otro:
Esto secompila 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; }

23. SASS AVANZADO
MANTENIENDO LA SEMÁNTICA CON @EXTEND
@extendpermite modificar los estilos clonados.
Por ejemplo, si necesitamos hacer queel checkout_buttonsea más oscuro queel blue_buttonoriginal
hacemos:
.checkout_button {
@extend .blue_button;
color: darken(#336699, 10%);
}

24. SASS AVANZADO
MANTENIENDO ELCÓDIGO LIMPIO CON LOSMIXINS
Un mixin es un fragmento de Sass que puede ser fácilmente aplicado
a otro selector, evitando la repetición de código.
Ayudan a mantener el código semántico (p.e. podemos definir un
mixin como blue_texty luego aplicarlo a una classcon nombre
más específico, como product_title).
Es bueno tener los mixins en una hoja de estilos a parte, para luego
importarlos desde la hoja principal.

25. SASS AVANZADO
MANTENIENDO ELCÓDIGO LIMPIO CON LOSMIXINS
Un mixinsedefinedela siguienteforma (mixin_text.scss):
Para usarlo haremos (mixin_use.scss):
Esto secompila 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; }

26. SASS AVANZADO
LLEVANDO LOSMIXINSMÁSALLÁ CON VARIABLES
Con @extendlos valores se mantienen, mientras que los mixins
pueden incluir argumentos o parámetros que permiten variar los
valores.
Definir un mixincon 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); }

27. SASS AVANZADO
LLEVANDO LOSMIXINSMÁSALLÁ CON VARIABLES
Definir un mixincon un valorpordefecto:
Usar el mixincon y sin valorpordefecto:
@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); }

28. SASS AVANZADO
LLEVANDO LOSMIXINSMÁSALLÁ CON VARIABLES
El ejemplo anterior secompila, 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; }

29. SASS AVANZADO
INTERPOLACIÓN
Interpolación significa "pon esto aquí". Nos permite generar
dinámicamente el nombre de una propiedad o selector, escribiendo la
variable entre #{}.
Esto secompila como:
$carname: volvo;
.red_#{$carname} {
color: #f00;
}
.red_volvo {
color: #f00;
}

30. SASS AVANZADO
SITE REPITESMÁSQUE ELAJO, USA @EACH
@eachayuda a mantener nuestro Sass DRY. Es un modo de copiar el
mismo estilo para un montón de variables.
Esto secompila 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"); }

31. SASS AVANZADO
DETERMINANDO CONDICIONESCON @IF
@ifpermiteescribir condiciones, muy útil cuando escribimos mixins reusables y funciones.
Esto secompila 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; }

32. SASS AVANZADO
CAMBIANDO ELASPECTO CON @MEDIA ANIDADO
Cambiar el estilo en base al dispositivo.
Usando @mediaen estilo anidado:
Esto secompila como:
.main {
color: #336699;
font-size: 15px;
@media print {
font-size: 10px; } }
.main {
color: #336699;
font-size: 15px; }
@media print {
.main {
font-size: 10px; } }

33. SASS AVANZADO
CAMBIANDO ELASPECTO CON @MEDIA ANIDADO
Haciendo el siteportrait-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; } }

34. COMPASS
Librería de mixins, funciones y otras extensiones
útiles para Sass.
Una vezinstalado Ruby, procedemos a instalarCompass:
Para compilar nuestras hojas deestilo usaremos --compass:
gem update --system
gem install compass
sass --compass myfile.scss myfile.css
sass --compass --watch

35. COMPASS
CONFIGURACIÓN DE UN PROYECTO
Compass configura ficheros y carpetas por defecto.
Crear proyecto: $> compass create project_name
Compilar: $> compass compile project_name
Una vez generado tu proyecto, coloca tus ficheros Sass en la carpeta
sass/. El CSS compilado se coloca automáticamente en la carpeta
css/.
Cambiar configuración: editar fichero config.rb.
Vigilar cambios proyecto entero: compass watch.

36. COMPASS
LASVENTAJASDE "LA BRÚJULA"
Facilita mucho el desarrollo, ahorrando tiempo
y esfuerzo en desarrollo.
GUI deCompass, para los "no amantes" dela consola.
Compass.app

37. 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 Functions
Sass vs. LESS
An Introduction To LESS, And Comparison To Sass
Compass, an open-source CSS Authoring Framework
Sass, Compass, and Assetic in 10 minutes
mooxins: CSS3 mixins for Sass(scss)

38. DUDAS, PREGUNTAS, BOSTEZOS…
☛ The End ☚