Front end basics - Sass

949 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
6 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
949
En SlideShare
0
De insertados
0
Número de insertados
15
Acciones
Compartido
0
Descargas
25
Comentarios
0
Recomendaciones
6
Insertados 0
No insertados

No hay notas en la diapositiva.

Front end basics - Sass

  1. 1. FRONT-END BASICSSASS & Compass/ ♣ Octubre 2012Nadal Soler @nadalsol
  2. 2. SASSFilosofía y definiciónSass vs. LESSSass básicoSass avanzadoCompassRecursos
  3. 3. SASSFILOSOFÍA PRINCIPALDel libro , deHampton Catlin y Michael Lintorn Catlin.“ DRY—Dont Repeat YourselfReducir la repetición de código en las hojas de estilo,ahorrando tiempo y esfuerzo. ”Pragmatic Guide to SASS
  4. 4. SASS… WHAT?SYNTACTICALLYAWESOME STYLESHEETSLenguaje 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 sepuedeusar la línea decomandos (consola), algun web-framework plugin,o alguna GUI como o .Scout CodeKit
  5. 5. SASSOTRA GRAN VENTAJAEn definitiva, Sass ayuda a mantenerun diseño consistente.“Tener una paleta de color con un número fijo deopciones a escoger ayuda a no volverse loco con loscolores y a no desviarse del estilo marcado.”
  6. 6. 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 esprocesado server-side.”
  7. 7. SASS VS. LESS¿CUÁLESCOGER?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 deJavaScript para procesar el código y volcar el CSS modificado hacia elnavegador. Una solución es usar LESS solo en entorno dedesarrollo y una vezterminado, copiar y pegar el códigogenerado, minificarlo y meterlo en un fichero CSS.
  8. 8. SASS BÁSICOINSTALACIÓNPara 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: geminstall sass.RubyRuby Installer
  9. 9. SASS BÁSICOCOMPILACIÓNCrear fichero Sass, con extensión .scss.Compilar el directorio sass/a CSS y printarlo por consola: sasstest.scssCompilar el directorio sass/a CSS en un nuevo fichero .css: sasstest.scss test.cssAlgunos frameworks, como , detectan cambios enficheros .scssy los compilan automáticamente a .css.Si no usamos frameworks usar el comando watch, que detecta loscambios en los ficheros de nuestra carpeta sass/y los compila enficheros .cssen la carpeta especificada (css/):sass --watch stylesheets/sass:stylesheets/cssRuby on Rails
  10. 10. SASS BÁSICOALTERANDO LA SALIDA CSSAl 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. 11. SASS BÁSICOCOMPILANDO CON SCOUTes una GUI quenos permiteimportar nuestro proyecto, especificando una carpeta deorigen (p.e. "sass")y desalida (p.e. "css").detecta cualquier cambio en los ficheros .scssy actualiza los .cssdesalida.ScoutScout
  12. 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. 13. SASS BÁSICOÁMBITO (SCOPE)DE LOSSELECTORESSass 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. 14. SASS BÁSICODEFINIENDO VARIABLESLas 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 hojasde estilos.Locales: se definen dentro de un selector y se aplican sólo dentro dedicho selector y sus hijos.Sepueden establecer variables pordefecto con el tag!defaultdespués dela asignación. Al usar una variable, seusa la asignación por defecto si no hay otras asignaciones deesa variable.$primary_color: #369;
  15. 15. SASS BÁSICOCALCULANDO UN LAYOUTSass permite hacer cáculos “al vuelo”, pudiéndose realizar lasoperaciones típicas mediante los operadores habituales deprogramación (+, -, *, /).Ejemplo:Otro ejemplo:width: 12px * 0.5;$page_width: 500px;width: $page_width * 0.1;
  16. 16. SASS BÁSICOCREANDO THEMESCON COLORESAVANZADOSCambiar la paleta decolor deun siteentero siemprees un engorro. Con Sass esto sepuedehacer fácilmentemediantefunciones 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. 17. SASS BÁSICO@IMPORTANDOImportando centralizamos llamada a distintos ficheros.Lo hacemos con @importseguido por el nombre del fichero Sass quequeramos importar, p.e. @import "test"(extensión .scsso.sassno 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.
  18. 18. SASS BÁSICO@IMPORTANDOFichero _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. 19. SASS BÁSICOCONSTRUYENDO UNA LIBRERÍA FONT FAMILYCon 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-familyuna 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.
  20. 20. SASS BÁSICOCONSTRUYENDO UNA LIBRERÍA FONT FAMILYEjemploFichero 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. 21. SASS AVANZADOMANTENIENDO LA SEMÁNTICA CON @EXTENDMantener 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ú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;}
  22. 22. SASS AVANZADOMANTENIENDO LA SEMÁNTICA CON @EXTENDAquí 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. 23. SASS AVANZADOMANTENIENDO LA SEMÁNTICA CON @EXTEND@extendpermite modificar los estilos clonados.Por ejemplo, si necesitamos hacer queel checkout_buttonsea más oscuro queel blue_buttonoriginalhacemos:.checkout_button {@extend .blue_button;color: darken(#336699, 10%);}
  24. 24. SASS AVANZADOMANTENIENDO ELCÓDIGO LIMPIO CON LOSMIXINSUn 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_texty luego aplicarlo a una classcon nombremás específico, como product_title).Es bueno tener los mixins en una hoja de estilos a parte, para luegoimportarlos desde la hoja principal.
  25. 25. SASS AVANZADOMANTENIENDO ELCÓDIGO LIMPIO CON LOSMIXINSUn 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. 26. SASS AVANZADOLLEVANDO LOSMIXINSMÁSALLÁ CON VARIABLESCon @extendlos valores se mantienen, mientras que los mixinspueden incluir argumentos o parámetros que permiten variar losvalores.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. 27. SASS AVANZADOLLEVANDO LOSMIXINSMÁSALLÁ CON VARIABLESDefinir 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. 28. SASS AVANZADOLLEVANDO LOSMIXINSMÁSALLÁ CON VARIABLESEl 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. 29. SASS AVANZADOINTERPOLACIÓNInterpolación significa "pon esto aquí". Nos permite generardinámicamente el nombre de una propiedad o selector, escribiendo lavariable entre #{}.Esto secompila como:$carname: volvo;.red_#{$carname} {color: #f00;}.red_volvo {color: #f00;}
  30. 30. SASS AVANZADOSITE REPITESMÁSQUE ELAJO, USA @EACH@eachayuda a mantener nuestro Sass DRY. Es un modo de copiar elmismo 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. 31. SASS AVANZADODETERMINANDO 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. 32. SASS AVANZADOCAMBIANDO ELASPECTO CON @MEDIA ANIDADOCambiar 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. 33. SASS AVANZADOCAMBIANDO ELASPECTO CON @MEDIA ANIDADOHaciendo 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. 34. COMPASSLibrerí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 --systemgem install compasssass --compass myfile.scss myfile.csssass --compass --watch
  35. 35. COMPASSCONFIGURACIÓN DE UN PROYECTOCompass 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 carpetacss/.Cambiar configuración: editar fichero config.rb.Vigilar cambios proyecto entero: compass watch.
  36. 36. COMPASSLASVENTAJASDE "LA BRÚJULA"Facilita mucho el desarrollo, ahorrando tiempoy esfuerzo en desarrollo.GUI deCompass, para los "no amantes" dela consola.Compass.app
  37. 37. RECURSOS, de Hampton Catlin y Michael LintornCatlin.y , página oficial., de CSS-Tricks., de SmashingMagazine., página oficial...Pragmatic Guide to SassSass Language Sass Script FunctionsSass vs. LESSAn Introduction To LESS, And Comparison To SassCompass, an open-source CSS Authoring FrameworkSass, Compass, and Assetic in 10 minutesmooxins: CSS3 mixins for Sass(scss)
  38. 38. DUDAS, PREGUNTAS, BOSTEZOS…☛ The End ☚

×