gotardo gonzálezSintactically Awsome Stylesheets

una introducción rápida a

viernes 27 de julio de 12

¿y si...?

:root { ! var-main-color: blue;}

h1 { ! color: $main-color;}

CSS Variables Module Level 1Editor's Draft 15 June 2012http://dev.w3.org/csswg/css-variables/

¿variables?¿while?

¿for?¿foreach?

¿class?¿funciones?

viernes 27 de julio de 12

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

instalación

gem install sass

mv style.css style.scss

sass --watch style.scss:style.css

viernes 27 de julio de 12

sintaxisSaSS vs. SCSS

SaSS

una sintaxis indentadasimilar a hamlya no tiene soporte

SCSSbloques definidos en llaves

idéntica a CSS

¡nos quedamos con scss!

viernes 27 de julio de 12

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

nested rules

a { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; }}

Definir pseudoselectores con el operador ‘&’ de SaSS

CSSSCSS

a { color: #ce4dd6; }

a:hover { color: #ffb3ff; }

a:visited { color: #c458cb;}

viernes 27 de julio de 12

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

@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.scssstyle.scss

viernes 27 de julio de 12

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

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

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

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

y mucho másfor@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

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

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/

CompassBasado en SaSS, se puede instalar como gem

http://compass-style.org/

viernes 27 de julio de 12

Para saber más...

Pragmatic guide to SaSShttp://pragprog.com/book/pg_sass/pragmatic-guide-to-sass

SaSS Referencehttp://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

viernes 27 de julio de 12

muchas graciasGotardo González

27 / 7 / 2012

viernes 27 de julio de 12