una introducción rápida a                            Sintactically Awsome Stylesheets                                     ...
¿y si...?                :root {                ! var-main-color: blue;                              ¿variables?          ...
Sass es un intérprete de sintaxis escrito                            en Ruby que nos permite utilizar                     ...
instalación                            gem install sass                            mv style.css style.scss                ...
sintaxis                            SaSS vs. SCSS         SaSS                                             SCSS         un...
nested rules                                                                         CSS            Anidar selectores:    ...
nested rules            Definir pseudoselectores            con el operador ‘&’ de SaSS                                    ...
variables :)           SCSS                                              SCSS              $width: 960px;             $col...
@import          mi proyecto                           style.scss             .                  @import “reset”;         ...
mixins !          CSS            .boton {              border-radius: 5px;              -moz-border-radius: 5px;          ...
extend !!        SCSS                                                     SCSS          .boton {                         ....
extend !!        SCSS                                                     SCSS          .boton {                         ....
functions !!!! :)_        SCSS          $grid-width: 40px;          $gutter-width: 10px;          @function grid-width($n)...
y mucho más        for                               while                                          $i: 6;          @for $...
y más, y más                            Depuración y control de errores:                            @debug                ...
Frameworks!                                                                                                  Compass      ...
Para saber más...                            SaSS Reference                            http://sass-lang.com/docs/yardoc/fil...
muchas gracias                                 Gotardo González                                          27 / 7 / 2012vier...
Upcoming SlideShare
Loading in …5
×

Introducción a SASS

1,099 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,099
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a SASS

  1. 1. una introducción rápida a Sintactically Awsome Stylesheets gotardo gonzálezviernes 27 de julio de 12
  2. 2. ¿y si...? :root { ! var-main-color: blue; ¿variables? } ¿while? ¿for? h1 { ¿foreach? ! color: $main-color; ¿class? } ¿funciones? CSS Variables Module Level 1 Editors Draft 15 June 2012 http://dev.w3.org/csswg/css-variables/viernes 27 de julio de 12
  3. 3. Sass es un intérprete de sintaxis escrito en Ruby que nos permite utilizar recursos propios de los lenguajes de programación para facilitarnos la escritura y mantenimiento del código CSS.viernes 27 de julio de 12
  4. 4. instalación gem install sass mv style.css style.scss sass --watch style.scss:style.cssviernes 27 de julio de 12
  5. 5. sintaxis SaSS vs. SCSS SaSS SCSS una sintaxis indentada bloques definidos en llaves similar a haml idéntica a CSS ya no tiene soporte ¡nos quedamos con scss!viernes 27 de julio de 12
  6. 6. nested rules CSS Anidar selectores: #navbar { width: 80%; height: 23px; SCSS } #navbar ul { #navbar { list-style-type: none; width: 80%; } height: 23px; #navbar li { ul { list-style-type: none; } float: left; li { } float: left; a { font-weight: bold; } #navbar li a { } font-weight: bold; } }viernes 27 de julio de 12
  7. 7. nested rules Definir pseudoselectores con el operador ‘&’ de SaSS CSS SCSS a { color: #ce4dd6; } a:hover { color: #ffb3ff; a { } color: #ce4dd6; &:hover { color: #ffb3ff; } a:visited { &:visited { color: #c458cb; } color: #c458cb; } }viernes 27 de julio de 12
  8. 8. variables :) SCSS SCSS $width: 960px; $color: #333; $margen: 12px; tr { .wrapper { color: $color - #111; width: $width - $margen; } margin: $margen * 2; padding: $margen; tr { border-radius: $margen; color: darken($color, 25%); } }viernes 27 de julio de 12
  9. 9. @import mi proyecto style.scss . @import “reset”; .. @import “vars”; _mixins.scss @import “mixins”; _reset.scss _vars.scss body { style.scss background-color: $bgcolor; color: $color; wrapper { width: $width; } }viernes 27 de julio de 12
  10. 10. mixins ! CSS .boton { border-radius: 5px; -moz-border-radius: 5px; SCSS -webkit-border-radius: 5px; behavior: url(radius.htc); @mixin borderRadius($radius) { border-radius: 5px; /* ... */ -moz-border-radius: 5px; } -webkit-border-radius: 5px; behavior: url(radius.htc); .widget { } border-radius: 5px; -moz-border-radius: 5px; .boton { -webkit-border-radius: 5px; @include borderRadius(5px); behavior: url(radius.htc); } /* ... */ .widget { } @include borderRadius(5px); }viernes 27 de julio de 12
  11. 11. extend !! SCSS SCSS .boton { .guardar { @include border-radius(5px); @extend .boton; } background-color: #369; } .borrar { @extend .boton; background-color: #a00; }viernes 27 de julio de 12
  12. 12. extend !! SCSS SCSS .boton { .guardar { @include border-radius(5px); @extend .boton; } background-color: #369; } .borrar { @extend .boton; background-color: #a00; }viernes 27 de julio de 12
  13. 13. functions !!!! :)_ SCSS $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } Sayonara, <div class=”grid-5”>viernes 27 de julio de 12
  14. 14. y mucho más for while $i: 6; @for $i from 1 through 3 { @while $i > 0 { .item-#{$i} { .item-#{$i} { width: 2em * $i; width: 2em * $i; } } } $i: $i - 2; } each @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url(/images/#{$animal}.png); } }viernes 27 de julio de 12
  15. 15. y más, y más Depuración y control de errores: @debug @warn formatos de salida: :nested :expanded :compact :compressedviernes 27 de julio de 12
  16. 16. Frameworks! Compass Basado en SaSS, se puede instalar como gem http://compass-style.org/ 320 and Up incluye varias opciones de preprocesado (LESS, SaSS, SaSS + Compass, ScSS, ScSS + Compass ...) http://stuffandnonsense.co.uk/projects/320andup/ Foundation 3 tiene una edición escrita en Sass + Compass http://foundation.zurb.com/docs/gem-install.phpviernes 27 de julio de 12
  17. 17. Para saber más... SaSS Reference http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Pragmatic guide to SaSS http://pragprog.com/book/pg_sass/pragmatic-guide-to-sassviernes 27 de julio de 12
  18. 18. muchas gracias Gotardo González 27 / 7 / 2012viernes 27 de julio de 12

×