My slides -in spanish- about some Frontend Basics: * Grid System * Responsive Web Design * Sass (Syntactically Awesome Stylesheets)

1. FRONT-END BASICS
for developers
Cosas que deberías saber sobre Front-end,
aunque te ganes el pan como Developer :)
♣ Nadal Soler / @nadalsol

2. FRONT-END BASICS FOR DEVELOPERS
1. Grid System
2. Responsive Web Design (RWD)
3. Sass (Syntactically Awesome Stylesheets)
4. Dudas, preguntas, bostezos…

3. GRID SYSTEM
Sorry… ¿Grid qué?
Sin retícula no hay película
Ventajas / ¿Desventajas?
Cómo usar el Grid
Recursos

4. SORRY… ¿GRID QUÉ?
El concepto Grid System no es nuevo (diseño editorial).
Se basa en una retícula (grid) como elemento para mantener orden,
proporción y composición.
Esta estructura/base se conoce como Layout.

5. SIN RETÍCULA NO HAY PELÍCULA
Cualquier Diseñador y Front-end Developer debería usar un grid
frente a diseños complejos.
Facilita la composición y evita incoherencias al aplicar la Guía de
Estilos.
Inuit CSS , 960gs , Gumby Framework , 1140 Grid , Bootstrap , Zen Grids …

6. VENTAJAS / ¿DESVENTAJAS?

7. VENTAJAS
Mejor organización de la información.
Mayor control sobre la composición de página (ningún elemento
puede desbordar* el grid acordado).
Mayor versatilidad sobre el layout (2 cols, 3 cols…).
Diseño más consistente entre páginas (homogeneidad = mejor
experiencia de usuario).
Fácil implementación y mantenimiento (los diseños de nuevas
páginas/secciones deben ceñirse al grid).
Pequeñas mejoras en SEO y accesibilidad, al poder "empujar"
contenidos (classes p s y p l ).
uh ul
* Salvo contadas excepciones (algunos banners, fixed bars, modal windows, etc…).

8. ¿DESVENTAJAS? I DON'T THINK SO…
Puede generar mayor densidad de código HTML (más < i > y dvs
classes).
Nombres de classes "poco semánticos", como c n a n r 1 ,
otie_6
g i _ , s a 8r w
rd8 pn, o…
En proyectos pequeños, mucho código CSS que quizás nunca
usaremos.
¿Es esto grave? I don't think so… Los beneficios superan las
"desventajas".

9. CÓMO USAR EL GRID
1. Utiliza la class container_12 para el grid de 12 columnas y
container_16 para la versión de 16 columnas.
<i cas"otie_2>
dv ls=cnanr1"
<i cas"rd4>
dv ls=gi_"
<> lk Fec Fis/>
pI ie rnh re<p
<dv
/i>
<i cas"rd4>
dv ls=gi_"
<>fcus,Ima FedmFis/>
pO ore en reo re<p
<dv
/i>
<i cas"rd4>
dv ls=gi_"
<>r Ptt i co!/>
pM. oao s ol<p
<dv
/i>
<dv
/i>
<i cas"otie_6>
dv ls=cnanr1"
<i cas"rd1"
dv ls=gi_2>
<> lk Fec Fis/>
pI ie rnh re<p
<dv
/i>
<i cas"rd4>
dv ls=gi_"
<>fcus,Ima FedmFis/>
pO ore en reo re<p
<dv
/i>
<dv
/i>

10. CÓMO USAR EL GRID
2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos de
columna. Para rellenar una fila completa, asegúrate que las columnas
sumen 12 ó 16.
<i cas"otie_6>
dv ls=cnanr1"
<i cas"rd1"
dv ls=gi_2>
<> lk Fec Fis/>
pI ie rnh re<p
<dv
/i>
<i cas"rd4>
dv ls=gi_"
<>fcus,Ima FedmFis/>
pO ore en reo re<p
<dv
/i>
<dv
/i>
ejemplo: grid_4 + grid_2 + grid_6 = 12

11. CÓMO USAR EL GRID
3. Utiliza push y pull para posicionar items en la página de forma
independiente, a pesar de su posición en el HTML.
<i cas"otie_2>
dv ls=cnanr1"
<i cas"rd6ps_"<>oo/>/i>
dv ls=gi_ uh3>plg<p<dv
<i cas"rd3pl_"<>etclm<p<dv
dv ls=gi_ ul6>ptx oun/>/i>
<i cas"rd3>ptx clm<p<dv
dv ls=gi_"<>et oun/>/i>
<i cas"rd1"<>i bx/>/i>
dv ls=gi_2>pbg o<p<dv
<dv
/i>

12. CÓMO USAR EL GRID
4. Utiliza las classes prefix y suffix para crear espacios vacíos en el
layout.
<i cas"otie_2>
dv ls=cnanr1"
<i cas"rd6sfi_"
dv ls=gi_ ufx3>
<>ls=gi_ sfi_"/>
pcas"rd6 ufx3<p
<dv
/i>
<i cas"rd3>
dv ls=gi_"
<>ls=gi_"/>
pcas"rd3<p
<dv
/i>
<i cas"rd1"
dv ls=gi_2>
<>i bx/>
pbg o<p
<dv
/i>
<dv
/i>
En este ejemplo podemos ver como crear un espacio vacío de tres columnas después de un elemento, mediante el uso
de la class suffix_3.

13. CÓMO USAR EL GRID
5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los
márgenes de columnas en grids anidados.
<i cas"otie_6>
dv ls=cnanr1"
<i cas"rd8>
dv ls=gi_"
<i cas"rd4apa>
dv ls=gi_ lh"
<>rd4isd gi_ (lh)/>
pgi_ nie rd8 apa<p
<dv
/i>
<i cas"rd4oea>
dv ls=gi_ mg"
<>rd4isd gi_ (mg)/>
pgi_ nie rd8 oea<p
<dv
/i>
<dv
/i>
<i cas"rd8>
dv ls=gi_"
<>rd8/>
pgi_<p
<dv
/i>
<dv
/i>
En el ejemplo vemos como crear sub-divisiones dentro de columnas, anidando grids.

14. CÓMO USAR EL GRID (RESUMEN)
1. Utiliza la class container_12 para el grid de 12 columnas y
container_16 para la versión de 16 columnas.
2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos de
columna. Para rellenar una fila completa, asegúrate que los anchos
de columnas sumen 12 ó 16 (p.e. grid_4 + grid_2 + grid_6 = 12).
3. Utiliza las classes push y pull para posicionar items en la página de
forma independiente, a pesar de su posición en el HTML.
4. Utiliza las classes prefix y suffix para crear espacios vacíos en el
layout.
5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los
márgenes de columnas en grids anidados.

15. RECURSOS
The Grid System
The 960 Grid System Made Easy
960gs
Variable Grid System
Fluid 960 Grid System
mos-golden Grid System
Todos los ejemplos vistos en esta presentación están basados en 960gs . Otros grid system pueden usar nombres de
classes distintos.

16. RESPONSIVE WEB DESIGN (RWD)
Responsive Architecture
¿WTF is RWD?
Ingredientes para RWD
Recursos

17. RESPONSIVE ARCHITECTURE
Actualmente diseñamos para más dispositivos que nunca (mobile,
desktop, tablet, smart tv…).
Cada medio es distinto (ancho mínimo de pantalla, densidad de pixel,
n° de colores, fuentes, navegador…).

18. RESPONSIVE ARCHITECTURE
¿TIENE SENTIDO?
“Fragmentar nuestro contenido a través de diferentes
experiencias "dispositivo optimizadas" es un
propósito insostenible. La alternativa a esto se llama
Responsive Architecture: crear sitios no sólo más
flexibles, sino que también se adapten al medio que
los renderiza.”
Del libro "Responsive Web Design" , de Ethan Marcotte.

19. ¿WTF IS:NOT RWD?
No es el nombre de la banda de moda, ni de ninguna revista de
tendencias.
Una web con RWD no es una web móvil ya que los contenidos y
performance no están optimizados.
Para hacer una web móvil deberíamos usar SSDDT *, para servir los
contenidos adecuados al medio: "copys" resumidos, imágenes más
pequeñas y optimizadas, funcionalidad básica, etc…
* Server-Side Device Detection Techniques.

20. ¿WTF IS RWD?
“Responsive Web Design = Diseño Web
Adaptable/Adaptativo/Responsivo”
La finalidad del RWD es hacer que la web se visualice
correctamente en distintos contextos (dispositivos), con
independencia del tamaño de pantalla o resolución del mismo,
mejorando la experiencia de cada tipo de usuario (mobile, desktop,
smart tv, whatever…).
El RWD se puede combinar con las SSDDT para ofrecer una
experiencia completa: diseño adaptable + contenido adecuado y
optimizado.

21. INGREDIENTES PARA RWD
1. Grid flexible
2. Imágenes flexibles *
3. CSS3 Media Queries
* No sólo imágenes sino cualquier otro media: videos, flash, carousels…

22. GRID FLEXIBLE
“Retícula fluida o elástica, que se adapta a cambios
de resolución de pantalla y dimensiones del
viewport.”

23. GRID FLEXIBLE
CARACTERÍSTICAS
Flexible Typesetting, o fuentes escalables en medidas relativas (em).
Evitar usar px!

24. GRID FLEXIBLE
CARACTERÍSTICAS
Grid (columnas) y espacios horizontales (widths, margins, paddings) en
porcentajes (%).

25. GRID FLEXIBLE
EN DEFINITIVA… THINK FLEXIBLE!
Romper con el hábito de traducir los pixels de Photoshop a CSS.
Focalizar nuestra atención en las proporciones que hay trás un
diseño.

26. GRID FLEXIBLE
Flexible Grid (demo) *, en A List Apart
* Redimensiona la ventana del navegador
para ver como se comporta.

27. IMÁGENES FLEXIBLES
“Imágenes elásticas, que se escalan según cambios
de resolución de pantalla y dimensiones del
viewport.”

28. IMÁGENES FLEXIBLES
¿CÓMO HACER UNA IMAGEN FLEXIBLE?
Encapsular-la dentro de un contenedor de bloque (p.e. un <span> con
display:block).
Definir un ancho en porcentaje (%) a dicho contenedor, para que este
sea flexible. El valor del porcentaje determinará su ancho en función
de su padre.
Opcionalmente el contenedor puede ir flotado.
Establecer display:block y max-width:100% a la imagen. Dejar sus
atributos HTML width y height vacíos.

29. IMÁGENES FLEXIBLES
Ejemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:
<pncas"lxm w2 fot"
sa ls=feIg p5 laR>
<m sc"m/epniesml_.p"at""/
ig r=igrsosv_apeljg l= >
<sa>
/pn
.lxm {/ Tefeil iaewapr cudb <>o <pn.Sol b cm
feIg * h lxbe mg rpe, ol e a r sa> hud e o
bndwt apretg wdhcas*
ie ih ecnae it ls /
dslybok
ipa:lc;
}
.lxm ig{
feIg m
dslybok
ipa:lc;
mxwdh10;
a-it:0%
}
.p5{
w2
wdh2%
it:5;
}
.laR{
fot
fotrgt
la:ih;
}

30. IMÁGENES FLEXIBLES
Ejemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:

31. IMÁGENES FLEXIBLES
Si necesitamos que la imagen sea un enlace podemos sustituir el tag < p n por un < >
sa> a (usando el mismo CSS que
en el ejemplo anterior):
< he=# cas"lxm w2 fot"
a rf"" ls=feIg p5 laR>
<m sc"m/epniesml_.p"at""/
ig r=igrsosv_apeljg l= >
<a
/>
.lxm {/ Tefeil iaewapr cudb <>o <pn.Sol b cm
feIg * h lxbe mg rpe, ol e a r sa> hud e o
bndwt apretg wdhcas*
ie ih ecnae it ls /
dslybok
ipa:lc;
}
.lxm ig{
feIg m
dslybok
ipa:lc;
mxwdh10;
a-it:0%
}
.p5{
w2
wdh2%
it:5;
}
.laR{
fot
fotrgt
la:ih;
}

32. IMÁGENES FLEXIBLES
Ejemplos con tamaños de imagen distintos:
Responsive Web Design (demo) *
* Redimensiona la ventana del navegador para ver como se comporta el layout e imágenes flexibles, junto con los
media queries.

33. CSS3 MEDIA QUERIES
“Ningún diseño, fijo o fluido, escala bien más allá del
contexto para el que fue originalmente diseñado.”
Del libro "Responsive Web Design" , de Ethan Marcotte.

34. CSS3 MEDIA QUERIES
PROBLEMAS COMUNES LAYOUTS FLEXIBLES
Imágenes irreconocibles (demasiado pequeñas o recortadas por
overflow:hidden).
Márgenes demasiado grandes.
Lineas de texto demasiado cortas (o demasiado largas).
Elementos de navegación rotos dificultando legibilidad.
Otros problemas…

35. CSS3 MEDIA QUERIES
¿Cómo crear un diseño que pueda adaptarse a cambios de resolución
de pantalla y dimensiones del viewport?
¿Cómo hacer diseños más responsive?
LAYOUTS FLEXIBLES
+
MEDIA QUERIES

36. CSS3 MEDIA QUERIES
¿QUÉ SON Y PARA QUÉ SIRVEN?
Son un robusto mecanismo, creado por la W3C, para identificar no sólo
los tipos de media, sino también para inspeccionar las características
físicas de los dispositivos y navegadores que renderizan el contenido.
¿Sigues sin saber de qué va esto?
mediaqueri.es
Robot or Not?

37. CSS3 MEDIA QUERIES
DISTINTAS NOMENCLATURAS
@ei sre ad(i-it:04x {
mda cen n mnwdh12p)
bd {
oy
fn-ie10;
otsz:0%
}
}
<ikrl"tlset he=wd.s"mda"cenad(i-it:04x"/
ln e=syehe" rf"iecs ei=sre n mnwdh12p) >
@motul"iecs)sre ad(i-it:04x;
ipr r(wd.s" cen n mnwdh12p)
Se pueden encadenar múltiples queries juntas mediante la keyword “and”
@ei sre ad(i-eiewdh40x ad(retto:adcp){…}
mda cen n mndvc-it:8p) n oinainlnsae

38. CSS3 MEDIA QUERIES
CAPACIDADES DE LOS DISPOSITIVOS A DETECTAR
width
height
device-width
device-height
orientation
and many more…
Lista completa en W3C Media Queries - Features .

39. CSS3 MEDIA QUERIES
CONSIDERACIONES
Recaudar información detallada sobre los dispositivos y
navegadores de tu target, saber qué características de los media
queries soportan, y testear acorde.
Width y height hacen referencia al viewport o ventana del navegador,
mientras que device-width y device-height miden las dimensiones de
toda la pantalla.
Añadir este meta tag en el HTML:
<eanm=vepr"cnet"nta-cl=.,wdhdvc-it"/
mt ae"iwot otn=iiilsae10 it=eiewdh >
Esto hace que el ancho del viewport del navegador sea igual al ancho de la pantalla del dispositivo, y establece el
nivel de zoom al 100%. Con esto logramos mayor consistencia con el tamaño actual del dispositivo.

40. CSS3 MEDIA QUERIES
COMPATIBILIDAD
Algunos navegadores aún no las soportan*, aunque existen scripts para
solucionarlo:
css3-mediaqueries-js
respond.js
* When can I use CSS3 Media Queries?

41. CSS3 MEDIA QUERIES
EJEMPLO PRÁCTICO
/ Salsre *
* ml cen /
@ei sre ad(a-it:0p)
mda cen n mxwdh60x,
sre ad(a-eiewdh40x {
cen n mxdvc-it:8p)
/ orCShr..*
* u S ee. /
}
/ Silsal(u saigu)*
* tl ml bt cln p /
@ei sre ad(i-it:0p){
mda cen n mnwdh60x
/ orCShr..*
* u S ee. /
}
/ Dstp*
* eko /
@ei sre ad(i-it:6p){
mda cen n mnwdh80x
/ orCShr..*
* u S ee. /
}
/ Wd sre *
* ie cen /
@ei sre ad(i-it:20x {
mda cen n mnwdh10p)
/ orCShr..*
* u S ee. /
}

42. CSS3 MEDIA QUERIES
LO QUE NO MOLA :(
Según Jason Grigsby en su artículo CSS Media Query for Mobile is Fool’s Gold :
Se añade más código CSS (en la web mobile la velocidad importa!).
Dejar que el navegador escale las imágenes es una mala idea:
Imágenes grandes = Grandes ficheros a descargar
innecesariamente.
El redimensionado es "CPU and memory intensive" por parte del
navegador.
Utilizar Media Queries para servir distintas imágenes no es lo ideal
(aunque las escondamos vía CSS muchos navegadores las descargan
de todos modos).
Las Media Queries no optimizan el HTML o el JavaScript.
Las Media Queries no estan bien soportadas.
Ignoran el contexto mobile.
Tener una web mobile separada es bueno.

43. CSS3 MEDIA QUERIES
RESPONSIVE WEB DESIGN STILL ROCKS!
“Planear el diseño para tamaños diferentes y pensar
modularmente acerca de bloques y como ubicarlos
según tamaño de pantalla, es bueno.”

44. RECURSOS
Responsive Web Design , de Ethan Marcotte.
Developing RWD With Opera Mobile Emulator , de Smashing
Magazine.
Opera Mobile Emulator , de Opera Software.
ProtoFluid . Rapid Prototyping of Fluid Layouts, Adaptive CSS and
Responsive Design.
CSS Media Query for Mobile is Fool’s Gold , de Jason Grigsby.
50 fantastic tools for responsive web design , de Net Magazine.

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

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

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

48. SASS
OTRA GRAN VENTAJA
“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.”
En definitiva, Sass ayuda a mantener un diseño consistente.

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

50. SASS VS. LESS
¿CUÁL ESCOGER?
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 de JavaScript para procesar el código y volcar el CSS modificado hacia el
navegador. 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.

51. SASS BÁSICO
INSTALACIÓN
Para correr Sass, necesitas tener Ruby instalado.
Windows: instalar mediante Ruby Installer o similar.
Mac: desde terminal: s d g m i s a l s s .
uo e ntl as
Linux: utilizar el package manager y desde linea de comandos: g m
e
isalss.
ntl as

52. SASS BÁSICO
COMPILACIÓN
Crear fichero Sass, con extensión . c s
ss.
Compilar el directorio s s / CSS y printarlo por consola: s s
as a as
ts.cs
etss
Compilar el directorio s s / CSS en un nuevo fichero . s : s s
as a cs as
ts.csts.s
etss etcs
Algunos frameworks, como Ruby on Rails , detectan cambios en
ficheros . c s los compilan automáticamente a . s .
ss y cs
Si no usamos frameworks usar el comando w t hque detecta los
ac,
cambios en los ficheros de nuestra carpeta s s / los compila en
as y
ficheros . s en la carpeta especificada (c s ):
cs s/
ss -wthsyehesss:tlset/s
as -ac tlset/assyehescs

53. SASS BÁSICO
ALTERANDO LA SALIDA CSS
Al compilar nuestro Sass se generan los CSS. Estos se pueden formatear de distintos modos:
ss -syense
as -tl etd / aiao(eal)
/ ndd dfut.
ss -syeepne
as -tl xadd / sprlgbe
/ ue eil.
ss -syecmat
as -tl opc / uasl lnaprdcaain
/ n oa ie o elrcó.
ss -syecmrse / sprcmat (iiid.
as -tl opesd / ue opco mnfe)
Ejemplo. Compilar el fichero Sass a CSS en un nuevo fichero CSS comprimido:
ss ts.csts.s -syecmrse
as etss etcs -tl opesd

54. SASS BÁSICO
COMPILANDO CON SCOUT
Scout es una GUI que nos permite importar nuestro proyecto, especificando una carpeta de origen (p.e. "sass") y de
salida (p.e. "css").
Scout detecta cualquier cambio en los ficheros . c sy actualiza los . s de salida.
ss cs

55. SASS BÁSICO
/* COMENTARIOS */
Usar comentarios de una sola linea para que aparezcan sólo en los ficheros Sass:
/ Hl!Et cmnai sl aaeeáe e fceo.cs
/ oa se oetro óo prcr n l ihr ss
Usar comentarios estándar de CSS para que estos se compilen en el CSS final:
/ Aé!Et cmnai aaeeáe e .s fnl*
* du se oetro prcr n l cs ia /

56. SASS BÁSICO
ÁMBITO (SCOPE) DE LOS SELECTORES
Sass soluciona la repetición de código mediante el anidado (nesting).
CSS "scopeado":
.noo
ifbx {it:0p;
wdh20x}
.noo .esg
ifbx msae {odr1xsldrd}
bre:p oi e;
.noo .esg .il
ifbx msae tte {oo:e;
clrrd}
.noo .sr
ifbx ue {odr2xsldbak}
bre:p oi lc;
.noo .sr.il
ifbx ue tte {oo:lc;
clrbak}
Sass:
.noo {
ifbx
wdh20x
it:0p;
.esg {
msae
bre:p sldrd
odr1x oi e;
.il {
tte
clrrd }}
oo:e;
.sr{
ue
bre:p sldbak
odr2x oi lc;
.il {
tte
clrbak }}}
oo:lc;

57. SASS BÁSICO
DEFINIENDO VARIABLES
Las variables ($ a _ a e son útiles para evitar la repetición de valores en nuestros CSS.
vrnm)
$rmr_oo:#6;
piayclr 39
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.
Se pueden establecer variables por defecto con el tag ! e a l después de la asignación. Al usar una variable, se
dfut
usa la asignación por defecto si no hay otras asignaciones de esa variable.

58. 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:
wdh 1p *05
it: 2x .;
Otro ejemplo:
$aewdh 50x
pg_it: 0p;
wdh $aewdh*01
it: pg_it .;

59. SASS BÁSICO
CREANDO THEMES CON COLORES AVANZADOS
Cambiar la paleta de color de un site entero siempre es un engorro. Con Sass esto se puede hacer fácilmente
mediante funciones para aclarar y oscurecer colores, saturar y desaturar, entre muchas otras… Ejemplos:
Aclarar/Oscurecer colores:
#ae{
pg
clr lgtn#369 2%;}
oo: ihe(369, 0)
Saturar/Desaturar colores:
$anclr #369
mi_oo: 369;
#ae{
pg
clr strt(mi_oo,3%;}
oo: auae$anclr 0)

60. SASS BÁSICO
@IMPORTANDO
Importando centralizamos llamada a distintos ficheros.
Lo hacemos con @ m o t
i p r seguido por el nombre del fichero Sass que
queramos importar, p.e. @ m o t " e t (extensión . c s
ipr ts" ss o
. a s necesaria).
s s no
Para que un fichero Sass no genere el correspondiente fichero CSS
escribiremos "_ delante del nombre del fichero (p.e. _ e t s s ).
" ts.cs
Cualquier variable o mixin que usemos en la hoja de estilos importada
podrá usarse en el fichero padre.

61. SASS BÁSICO
@IMPORTANDO
Fichero _ o o s s s :
clr.cs
$anclr #369
mi_oo: 369;
/ ALTMR CLR G HR.
/ O OE OOS O EE
Fichero w d h . c s
itsss:
$anwdh 70x
mi_it: 2p;
/ ALTMR WDH G HR.
/ O OE ITS O EE
Imports en fichero principal*:
@mot"oos;
ipr clr"
@mot"its;
ipr wdh"
* Al hacer @ m o t es necesario incluir el guión bajo ni la extensión de _ o o s s s .
i p r no clr.cs

62. 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.f n 1 ).
ot4
Con Sass podemos usar variables, en lugar de repetir la misma
declaración de f n - a i y
o t f m l una 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
ipr.
@mot

63. SASS BÁSICO
CONSTRUYENDO UNA LIBRERÍA FONT FAMILY
Ejemplo
Fichero f n _ a i y s s :
otfml.cs
$evtc:"evtc nu" ail hleia sn-ei;
hleia hleia ee, ra, evtc, assrf
$eea gnv,thm,sn-ei;
gnv: eea aoa assrf
$uia "uiagad" "uiasn uioe,
lcd: lcd rne, lcd as ncd"
"uiasn" lcd,sn-ei;
lcd as, uia assrf
Import en fichero principal:
@mot"otfml"
ipr fn_aiy;

64. SASS AVANZADO
MANTENIENDO LA SEMÁNTICA CON @EXTEND
Mantener la semántica es una filosofía donde todo se nombra de forma lógica:
.lebto
bu_utn / icret (obesgnapco *
* norco nmr eú set) /
.hcotbto
ceku_utn / cret (obesgnfnin *
* orco nmr eú ucó) /
¿Qué ocurre si tenemos un grupo de atributos -por ejemplo un botón azul- que necesitamos aplicar a múltiples
botones con distintas funciones?
.hcotbto {
ceku_utn / obé…*
* in /
bcgon-oo:le
akrudclrbu;
bre:p sldbak
odr1x oi lc; .hcotbto,
ceku_utn
} .ee_utn
rstbto,
.ee_utn{
rstbto .edbto {
sn_utn
bcgon-oo:le
akrudclrbu; bcgon-oo:le
akrudclrbu;
bre:p sldbak
odr1x oi lc; bre:p sldbak
odr1x oi lc;
} }
.edbto {
sn_utn
bcgon-oo:le
akrudclrbu;
bre:p sldbak
odr1x oi lc;
}

65. SASS AVANZADO
MANTENIENDO LA SEMÁNTICA CON @EXTEND
Aquí es donde entra @ x e dque clona los atributos de una c a s i y los añade a otro:
etn, ls o d
.lebto {
bu_utn
bcgon:#369
akrud 369;
fn-egt bl;
otwih: od
clr wie
oo: ht;
pdig 5x }
adn: p;
.hcotbto {
ceku_utn
@xed.lebto;}
etn bu_utn
Esto se compila como:
.lebto,.hcotbto {
bu_utn ceku_utn
bcgon:#369
akrud 369;
fn-egt bl;
otwih: od
clr wie
oo: ht;
pdig 5x }
adn: p;

66. SASS AVANZADO
MANTENIENDO LA SEMÁNTICA CON @EXTEND
e t n permite modificar los estilos clonados.
@xed
Por ejemplo, si necesitamos hacer que el c e k u _ u t n más oscuro que el b u _ u t n
h c o t b t o sea l e b t o original
hacemos:
.hcotbto {
ceku_utn
@xed.lebto;
etn bu_utn
clr dre(369,1%;
oo: akn#369 0)
}

67. SASS AVANZADO
MANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINS
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 b u _ e t luego aplicarlo a una c a s
letx y l s con nombre
más específico, como p o u t t t e
r d c _ i l ).
Es bueno tener los mixins en una hoja de estilos a parte, para luego
importarlos desde la hoja principal.

68. SASS AVANZADO
MANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINS
Un mixin se define de la siguiente forma (m x n t x . c s
i i _ e t s s ):
@ii bu_et{
mxn letx
clr #369
oo: 369;
fn-aiy hleia ail sn-ei;
otfml: evtc, ra, assrf
fn-ie 2p;}
otsz: 0x
Para usarlo haremos (m x n u e s s ):
ii_s.cs
.rdc_il {
pouttte
@nld bu_et }
icue letx;
Esto se compila como:
.rdc_il {
pouttte
clr #369
oo: 369;
fn-aiy hleia ail sn-ei;
otfml: evtc, ra, assrf
fn-ie 2p;}
otsz: 0x

69. SASS AVANZADO
LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES
Con @ x e d valores se mantienen, mientras que los mixins
e t n los
pueden incluir argumentos o parámetros que permiten variar los
valores.
Definir un mixin con atributos variables:
@ii bu_et$ie {
mxn letx(sz)
clr #369
oo: 369;
fn-aiy hleia ail sn-ei;
otfml: evtc, ra, assrf
fn-ie $ie
otsz: sz;
fn-ain:salcp;}
otvrat ml-as
.rdc_il {
pouttte
@nld bu_et(5x;}
icue letx 1p)

70. SASS AVANZADO
LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES
Definir un mixin con un valor por defecto:
@ii bu_et$ie 2p){
mxn letx(sz: 0x
clr #369
oo: 369;
fn-aiy hleia ail sn-ei;
otfml: evtc, ra, assrf
fn-ie $ie
otsz: sz;
fn-ain:salcp;}
otvrat ml-as
Usar el mixin con y sin valor por defecto:
.rdc_il {
pouttte
@nld bu_et }
icue letx;
.rdc_il {
pouttte
@nld bu_et(0p) }
icue letx 10x;

71. SASS AVANZADO
LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES
El ejemplo anterior se compila, respectivamente, como:
.rdc_il {
pouttte
clr #369
oo: 369;
fn-aiy hleia ail sn-ei;
otfml: evtc, ra, assrf
fn-ie 2p;
otsz: 0x
fn-ain:salcp;}
otvrat ml-as
.rdc_il {
pouttte
clr #369
oo: 369;
fn-aiy hleia ail sn-ei;
otfml: evtc, ra, assrf
fn-ie 10x
otsz: 0p;
fn-ain:salcp;}
otvrat ml-as

72. 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 # }
{.
$anm:vlo
crae ov;
.e_{crae {
rd#$anm}
clr #0;
oo: f0
}
Esto se compila como:
.e_ov {
rdvlo
clr #0;
oo: f0
}

73. SASS AVANZADO
SI TE REPITES MÁS QUE EL AJO, USA @EACH
e c ayuda a mantener nuestro Sass DRY. Es un modo de copiar el
@ah
mismo estilo para un montón de variables.
@ah$ebri to,jny cln pi {
ec mme n hm on, oi, hl
.{mme}pcue{
#$ebr_itr
bcgon-mg:ul"iae#$ebr.p";}}
akrudiae r(/mg/{mme}jg)
Esto se compila como:
.hmpcue{
to_itr
bcgon-mg:ul"iaeto.p";}
akrudiae r(/mg/hmjg)
.on_itr {
jnypcue
bcgon-mg:ul"iaejnyjg) }
akrudiae r(/mg/on.p";
.oi_itr {
clnpcue
bcgon-mg:ul"iaeclnjg) }
akrudiae r(/mg/oi.p";
.hlpcue{
pi_itr
bcgon-mg:ul"iaepi.p";}
akrudiae r(/mg/hljg)

74. SASS AVANZADO
DETERMINANDO CONDICIONES CON @IF
i permite escribir condiciones, muy útil cuando escribimos mixins reusables y funciones.
@f
@ii cutyclr$onr){
mxn onr_oo(cuty
@f$onr = fac {
i cuty = rne
clr bu;}
oo: le
@lei $onr = san{
es f cuty = pi
clr ylo;}
oo: elw
@lei $onr = iay{
es f cuty = tl
clr gen }
oo: re;
@le{
es
clr rd }}
oo: e;
.nln {@nld cutyclregad;}
egad icue onr_oo(nln)
.rne{@nld cutyclrfac) }
fac icue onr_oo(rne;
Esto se compila como:
.nln {clr rd }
egad oo: e;
.rne{clr bu;}
fac oo: le

75. SASS AVANZADO
CAMBIANDO EL ASPECTO CON @MEDIA ANIDADO
Cambiar el estilo en base al dispositivo.
Usando @ e i en estilo anidado:
mda
.an{
mi
clr #369
oo: 369;
fn-ie 1p;
otsz: 5x
@ei pit{
mda rn
fn-ie 1p;}}
otsz: 0x
Esto se compila como:
.an{
mi
clr #369
oo: 369;
fn-ie 1p;}
otsz: 5x
@ei pit{
mda rn
.an{
mi
fn-ie 1p;}}
otsz: 0x

76. SASS AVANZADO
CAMBIANDO EL ASPECTO CON @MEDIA ANIDADO
Haciendo el site portrait-specific…
.an{
mi
clr #369
oo: 369;
fn-ie 1p;
otsz: 5x
@ei sre ad(a-it:30x {
mda cen n mxwdh 2p)
fn-ie 3p;}}
otsz: 5x
…o landscape-specific.
.an{
mi
clr #369
oo: 369;
fn-ie 1p;
otsz: 5x
@ei sre ad(i-it:31x ad(a-it:40x {
mda cen n mnwdh 2p) n mxwdh 8p)
fn-ie 2p;}}
otsz: 5x

77. COMPASS
Librería de mixins, funciones y otras extensiones
útiles para Sass.
Una vez instalado Ruby, procedemos a instalar Compass:
gmudt -sse
e pae -ytm
gmisalcmas
e ntl ops
Para compilar nuestras hojas de estilo usaremos - c m a s
-ops:
ss -cmasmfl.csmfl.s
as -ops yiess yiecs
ss -cmas-wth
as -ops -ac

78. COMPASS
CONFIGURACIÓN DE UN PROYECTO
Compass configura ficheros y carpetas por defecto.
Crear proyecto: $ c m a s c e t p o e t n m
> ops rae rjc_ae
Compilar: $ c m a s c m i e p o e t n m
> ops opl rjc_ae
Una vez generado tu proyecto, coloca tus ficheros Sass en la carpeta
s s /El CSS compilado se coloca automáticamente en la carpeta
as.
cs.
s/
Cambiar configuración: editar fichero c n i . b
ofgr.
Vigilar cambios proyecto entero: c m a s w t h
ops ac.

79. COMPASS
LAS VENTAJAS DE "LA BRÚJULA"
Facilita mucho el desarrollo, ahorrando tiempo
y esfuerzo en desarrollo.
Compass.app
GUI de Compass, para los "no amantes" de la consola.

80. RECURSOS
Pragmatic Guide to Sass , de Hampton Catlin y Michael Lintorn
Catlin.
Sass Language y Sass Script Functions , página oficial.
Sass vs. LESS , de CSS-Tricks.
An Introduction To LESS, And Comparison To Sass , de Smashing
Magazine.
Compass, an open-source CSS Authoring Framework , página oficial.
Sass, Compass, and Assetic in 10 minutes .
mooxins: CSS3 mixins for Sass(scss) .

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