Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a SaSS

Betabeers
August 28, 2012
1.8k

Introducción a SaSS

Betabeers

August 28, 2012
Tweet

Transcript

  1. ¿y si...? :root { ! var-main-color: blue; } h1 {

    ! color: $main-color; } CSS Variables Module Level 1 Editor's Draft 15 June 2012 http://dev.w3.org/csswg/css-variables/ ¿variables? ¿while? ¿for? ¿foreach? ¿class? ¿funciones? viernes 27 de julio de 12
  2. 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
  3. sintaxis SaSS vs. SCSS SaSS una sintaxis indentada similar a

    haml ya no tiene soporte SCSS bloques definidos en llaves idéntica a CSS ¡nos quedamos con scss! viernes 27 de julio de 12
  4. nested rules #navbar { width: 80%; height: 23px; ul {

    list-style-type: none; } li { float: left; a { font-weight: bold; } } } Anidar selectores: #navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; } CSS SCSS viernes 27 de julio de 12
  5. nested rules a { color: #ce4dd6; &:hover { color: #ffb3ff;

    } &:visited { color: #c458cb; } } Definir pseudoselectores con el operador ‘&’ de SaSS CSS SCSS a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited { color: #c458cb; } viernes 27 de julio de 12
  6. variables :) SCSS $width: 960px; $margen: 12px; .wrapper { width:

    $width - $margen; margin: $margen * 2; padding: $margen; border-radius: $margen; } SCSS $color: #333; tr { color: $color - #111; } tr { color: darken($color, 25%); } viernes 27 de julio de 12
  7. @import mi proyecto style.scss @import “reset”; @import “vars”; @import “mixins”;

    body { background-color: $bgcolor; color: $color; wrapper { width: $width; } } . .. _mixins.scss _reset.scss _vars.scss style.scss viernes 27 de julio de 12
  8. mixins ! CSS SCSS .boton { border-radius: 5px; -moz-border-radius: 5px;

    -webkit-border-radius: 5px; behavior: url(radius.htc); /* ... */ } .widget { border-radius: 5px; -moz-border-radius: 5px; -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); } .boton { @include borderRadius(5px); } .widget { @include borderRadius(5px); } viernes 27 de julio de 12
  9. extend !! SCSS SCSS .boton { @include border-radius(5px); } .guardar

    { @extend .boton; background-color: #369; } .borrar { @extend .boton; background-color: #a00; } viernes 27 de julio de 12
  10. extend !! SCSS SCSS .boton { @include border-radius(5px); } .guardar

    { @extend .boton; background-color: #369; } .borrar { @extend .boton; background-color: #a00; } viernes 27 de julio de 12
  11. 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
  12. y mucho más for @for $i from 1 through 3

    { .item-#{$i} { width: 2em * $i; } } @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } each while $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } viernes 27 de julio de 12
  13. y más, y más Depuración y control de errores: @debug

    @warn formatos de salida: :nested :expanded :compact :compressed viernes 27 de julio de 12
  14. Frameworks! Foundation 3 tiene una edición escrita en Sass +

    Compass http://foundation.zurb.com/docs/gem-install.php 320 and Up incluye varias opciones de preprocesado (LESS, SaSS, SaSS + Compass, ScSS, ScSS + Compass ...) http://stuffandnonsense.co.uk/projects/320andup/ Compass Basado en SaSS, se puede instalar como gem http://compass-style.org/ viernes 27 de julio de 12
  15. Para saber más... Pragmatic guide to SaSS http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass SaSS Reference

    http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html viernes 27 de julio de 12