FRONT-END BASICSfor developers

Cosas que deberías saber sobre Front-end,aunque te ganes el pan como Developer :)

♣ / Nadal Soler @nadalsol

FRONT-END BASICS FOR DEVELOPERS1. 2. 3. 4.

Grid SystemResponsive Web Design (RWD)Sass (Syntactically Awesome Stylesheets)Dudas, preguntas, bostezos…

GRID SYSTEMSorry… ¿Grid qué?Sin retícula no hay películaVentajas / ¿Desventajas?Cómo usar el GridRecursos

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.

SIN RETÍCULA NO HAY PELÍCULACualquier Diseñador y Front-end Developer debería usar un gridfrente a diseños complejos.Facilita la composición y evita incoherencias al aplicar la Guía deEstilos.

, , , , , …Inuit CSS 960gs Gumby Framework 1140 Grid Bootstrap Zen Grids

VENTAJAS / ¿DESVENTAJAS?

VENTAJASMejor organización de la información.Mayor control sobre la composición de página (ningún elementopuede desbordar* el grid acordado).Mayor versatilidad sobre el layout (2 cols, 3 cols…).Diseño más consistente entre páginas (homogeneidad = mejorexperiencia de usuario).Fácil implementación y mantenimiento (los diseños de nuevaspáginas/secciones deben ceñirse al grid).Pequeñas mejoras en SEO y accesibilidad, al poder "empujar"contenidos (classes push y pull).

* Salvo contadas excepciones (algunos banners, fixed bars, modal windows, etc…).

¿DESVENTAJAS? I DON'T THINK SO…Puede generar mayor densidad de código HTML (más <div>s y

classes).Nombres de classes "poco semánticos", como container_16,

grid_8, span8, row…

En proyectos pequeños, mucho código CSS que quizás nuncausaremos.¿Es esto grave? I don't think so… Los beneficios superan las"desventajas".

CÓMO USAR EL GRID1. Utiliza la class container_12 para el grid de 12 columnas y

container_16 para la versión de 16 columnas.

<div class="container_12"> <div class="grid_4"> <p>I like French Fries</p> </div> <div class="grid_4"> <p>Of course, I mean Freedom Fries</p> </div> <div class="grid_4"> <p>Mr. Potato is cool!</p> </div></div>

<div class="container_16"> <div class="grid_12"> <p>I like French Fries</p> </div> <div class="grid_4"> <p>Of course, I mean Freedom Fries</p> </div></div>

CÓMO USAR EL GRID2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos decolumna. Para rellenar una fila completa, asegúrate que las columnas

sumen 12 ó 16.

ejemplo: grid_4 + grid_2 + grid_6 = 12

<div class="container_16"> <div class="grid_12"> <p>I like French Fries</p> </div> <div class="grid_4"> <p>Of course, I mean Freedom Fries</p> </div></div>

CÓMO USAR EL GRID3. Utiliza push y pull para posicionar items en la página de forma

independiente, a pesar de su posición en el HTML.

<div class="container_12"> <div class="grid_6 push_3"><p>logo</p></div> <div class="grid_3 pull_6"><p>text column</p></div> <div class="grid_3"><p>text column</p></div> <div class="grid_12"><p>big box</p></div></div>

CÓMO USAR EL GRID4. Utiliza las classes prefix y suffix para crear espacios vacíos en el

layout.

En este ejemplo podemos ver como crear un espacio vacío de tres columnas después de un elemento, mediante el usode la class suffix_3.

<div class="container_12"> <div class="grid_6 suffix_3"> <p>class="grid_6 suffix_3"</p> </div> <div class="grid_3"> <p>class="grid_3"</p> </div> <div class="grid_12"> <p>big box</p> </div></div>

CÓMO USAR EL GRID5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los

márgenes de columnas en grids anidados.

En el ejemplo vemos como crear sub-divisiones dentro de columnas, anidando grids.

<div class="container_16"> <div class="grid_8"> <div class="grid_4 alpha"> <p>grid_4 inside grid_8 (alpha)</p> </div> <div class="grid_4 omega"> <p>grid_4 inside grid_8 (omega)</p> </div> </div> <div class="grid_8"> <p>grid_8</p> </div></div>

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 anchosde 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 deforma independiente, a pesar de su posición en el HTML.

4. Utiliza las classes prefix y suffix para crear espacios vacíos en ellayout.

5. Utiliza las classes alpha ("first") y omega ("last") para eliminar losmárgenes de columnas en grids anidados.

RECURSOS

Todos los ejemplos vistos en esta presentación están basados en . Otros grid system pueden usar nombres declasses distintos.

The Grid SystemThe 960 Grid System Made Easy960gsVariable Grid SystemFluid 960 Grid Systemmos-golden Grid System

960gs

RESPONSIVE WEB DESIGN (RWD)Responsive Architecture¿WTF is RWD?Ingredientes para RWDRecursos

RESPONSIVE ARCHITECTUREActualmente 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…).

RESPONSIVE ARCHITECTURE¿TIENE SENTIDO?

Del libro , de Ethan Marcotte.

“Fragmentar nuestro contenido a través de diferentesexperiencias "dispositivo optimizadas" es un

propósito insostenible. La alternativa a esto se llamaResponsive Architecture: crear sitios no sólo más

flexibles, sino que también se adapten al medio quelos renderiza.”

"Responsive Web Design"

¿WTF IS:NOT RWD?No es el nombre de la banda de moda, ni de ninguna revista detendencias.Una web con RWD no es una web móvil ya que los contenidos yperformance no están optimizados.Para hacer una web móvil deberíamos usar *, para servir loscontenidos adecuados al medio: "copys" resumidos, imágenes máspequeñas y optimizadas, funcionalidad básica, etc…

* Server-Side Device Detection Techniques.

SSDDT

¿WTF IS RWD?

La finalidad del RWD es hacer que la web se visualicecorrectamente en distintos contextos (dispositivos), conindependencia 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 para ofrecer unaexperiencia completa: diseño adaptable + contenido adecuado yoptimizado.

“Responsive Web Design = Diseño WebAdaptable/Adaptativo/Responsivo”

SSDDT

INGREDIENTES PARA RWD1. 2. *3.

* No sólo imágenes sino cualquier otro media: videos, flash, carousels…

Grid flexibleImágenes flexiblesCSS3 Media Queries

GRID FLEXIBLE“Retícula fluida o elástica, que se adapta a cambios

de resolución de pantalla y dimensiones delviewport.”

GRID FLEXIBLECARACTERÍSTICAS

Flexible Typesetting, o fuentes escalables en medidas relativas (em).Evitar usar px!

GRID FLEXIBLECARACTERÍSTICAS

Grid (columnas) y espacios horizontales (widths, margins, paddings) enporcentajes (%).

GRID FLEXIBLEEN 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 undiseño.

GRID FLEXIBLE*, en

* Redimensiona la ventana del navegadorpara ver como se comporta.

Flexible Grid (demo) A List Apart

IMÁGENES FLEXIBLES“Imágenes elásticas, que se escalan según cambios

de resolución de pantalla y dimensiones delviewport.”

IMÁGENES FLEXIBLES¿CÓMO HACER UNA IMAGEN FLEXIBLE?

Encapsular-la dentro de un contenedor de bloque (p.e. un <span> condisplay:block).Definir un ancho en porcentaje (%) a dicho contenedor, para que estesea flexible. El valor del porcentaje determinará su ancho en funciónde su padre.Opcionalmente el contenedor puede ir flotado.Establecer display:block y max-width:100% a la imagen. Dejar susatributos HTML width y height vacíos.

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

<span class="flexImg wp25 floatR"> <img src="img/responsive_sample_l.jpg" alt=" " /></span>

.flexImg { /* The flexible image wrapper, could be <a> or <span>. Should be combined with a percentage width class */ display:block;}.flexImg img { display:block; max-width:100%;}.wp25 { width:25%;}.floatR { float:right;}

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

IMÁGENES FLEXIBLESSi necesitamos que la imagen sea un enlace podemos sustituir el tag <span> por un <a> (usando el mismo CSS que

en el ejemplo anterior):

<a href="#" class="flexImg wp25 floatR"> <img src="img/responsive_sample_l.jpg" alt=" " /></a>

.flexImg { /* The flexible image wrapper, could be <a> or <span>. Should be combined with a percentage width class */ display:block;}.flexImg img { display:block; max-width:100%;}.wp25 { width:25%;}.floatR { float:right;}

IMÁGENES FLEXIBLESEjemplos con tamaños de imagen distintos:

*

* Redimensiona la ventana del navegador para ver como se comporta el layout e imágenes flexibles, junto con losmedia queries.

Responsive Web Design (demo)

CSS3 MEDIA QUERIES

Del libro , de Ethan Marcotte.

“Ningún diseño, fijo o fluido, escala bien más allá delcontexto para el que fue originalmente diseñado.”

"Responsive Web Design"

CSS3 MEDIA QUERIESPROBLEMAS COMUNES LAYOUTS FLEXIBLES

Imágenes irreconocibles (demasiado pequeñas o recortadas poroverflow:hidden).Márgenes demasiado grandes.Lineas de texto demasiado cortas (o demasiado largas).Elementos de navegación rotos dificultando legibilidad.Otros problemas…

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

CSS3 MEDIA QUERIES¿QUÉ SON Y PARA QUÉ SIRVEN?

Son un robusto mecanismo, creado por la W3C, para identificar no sólolos tipos de media, sino también para inspeccionar las característicasfísicas de los dispositivos y navegadores que renderizan el contenido.

¿Sigues sin saber de qué va esto?

mediaqueri.es

Robot or Not?

CSS3 MEDIA QUERIESDISTINTAS NOMENCLATURAS

Se pueden encadenar múltiples queries juntas mediante la keyword “and”

@media screen and (min-width:1024px) { body { font-size:100%; }}

<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />

@import url("wide.css") screen and (min-width:1024px);

@media screen and (min-device-width:480px) and (orientation:landscape) { … }

CSS3 MEDIA QUERIESCAPACIDADES DE LOS DISPOSITIVOS A DETECTAR

widthheightdevice-widthdevice-heightorientationand many more…

Lista completa en .W3C Media Queries - Features

CSS3 MEDIA QUERIESCONSIDERACIONES

Recaudar información detallada sobre los dispositivos ynavegadores de tu target, saber qué características de los mediaqueries 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 detoda la pantalla.Añadir este meta tag en el HTML:

Esto hace que el ancho del viewport del navegador sea igual al ancho de la pantalla del dispositivo, y establece elnivel de zoom al 100%. Con esto logramos mayor consistencia con el tamaño actual del dispositivo.

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

CSS3 MEDIA QUERIESCOMPATIBILIDAD

Algunos navegadores aún no las soportan*, aunque existen scripts parasolucionarlo:

*

css3-mediaqueries-jsrespond.js

When can I use CSS3 Media Queries?

CSS3 MEDIA QUERIESEJEMPLO PRÁCTICO

/* Small screen */@media screen and (max-width:600px),screen and (max-device-width:480px) { /* our CSS here... */}

/* Still small (but scaling up) */@media screen and (min-width:600px) { /* our CSS here... */}

/* Desktop */@media screen and (min-width:860px) { /* our CSS here... */}

/* Wide screen */@media screen and (min-width:1200px) { /* our CSS here... */}

CSS3 MEDIA QUERIESLO QUE NO MOLA :(

Según Jason Grigsby en su artículo :

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 descargarinnecesariamente.El redimensionado es "CPU and memory intensive" por parte delnavegador.

Utilizar Media Queries para servir distintas imágenes no es lo ideal(aunque las escondamos vía CSS muchos navegadores las descargande 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.

CSS Media Query for Mobile is Fool’s Gold

CSS3 MEDIA QUERIESRESPONSIVE WEB DESIGN STILL ROCKS!

“Planear el diseño para tamaños diferentes y pensarmodularmente acerca de bloques y como ubicarlos

según tamaño de pantalla, es bueno.”

RECURSOS, de Ethan Marcotte.

, de SmashingMagazine.

, de Opera Software.. Rapid Prototyping of Fluid Layouts, Adaptive CSS and

Responsive Design., de Jason Grigsby.

, de Net Magazine.

Responsive Web DesignDeveloping RWD With Opera Mobile Emulator

Opera Mobile EmulatorProtoFluid

CSS Media Query for Mobile is Fool’s Gold50 fantastic tools for responsive web design

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 ☚