Seminario "Adaptando CSS a los programadores: SASS y Compass", presentado por Luis Calvo el 30 de octubre 2013 en la Universidad CEU San Pablo de Madrid.
Mas información: http://www.paradigmatecnologico.com/seminarios/adaptando-css-a-los-programadores-sass-y-compass/
1. Adaptando CSS a los programadores
SASS y COMPASS
30 de octubre de 2013 - Escuela Politécnica Superior de la Universidad CEU San Pablo
Luis Calvo Díaz (@LuisCalvoDiaz)
2. Adaptando CSS a los programadores SASS y COMPASS
Índice
1.
2.
3.
4.
5.
6.
Introducción
Instalar Sass
Sass básico
Compass
Instalar Compass
Usando Compass
Luis Calvo Díaz (@LuisCalvoDiaz)
Senior Front-end developer
lcalvo@paradigmatecnologico.com
3. Adaptando CSS a los programadores SASS y COMPASS
1
Introducción
4. 1. Introducción
Syntactically Awesome Style Sheets
Meta-lenguaje construido sobre CSS que
se utiliza para describir el estilo de un
documento de manera limpia y estructurada
Nos ayuda a reducir la repetición de
código y a ser más productivos
Don’t repeat
yourself!!
Adaptando CSS a los programadores SASS y COMPASS
5. 1. Introducción
no
CSS
es un lenguaje
de programación
simple
CSS es muy
,
no necesitamos usar
ninguna herramienta
Adaptando CSS a los programadores SASS y COMPASS
6. 1. Introducción
no puedes usar variables
no puedes hacer opera-
no se puede debuggear
no necesitas usar la consola
ciones entre valores
Adaptando CSS a los programadores SASS y COMPASS
7. Adaptando CSS a los programadores SASS y COMPASS
2
Instalar Sass
8. 2. Instalar Saas
Para poder instalar Sass necesitamos tener
instalado Ruby.
• En Mac, Ruby ya está instalado
• Para Windows http://rubyinstaller.org
Tras instalar Ruby abrimos la consola y
tecleamos:
$ gem install sass
Para procesar y generar el css:
$ sass --watch estilos.scss:estilos.css
Adaptando CSS a los programadores SASS y COMPASS
16. 3. Sass básico
Mixins (II)
SASS
CSS
@mixin envuelve {
.wrapper {
border:1px solid #bed1a3;
padding:10px;
float:left;
& + .wrapper {
margin-left:15px;
}
@content;
}
}
@include envuelve {
h1 {
font-size:20px;
}
div {
width:15%;
p {
line-height:15px;
}
}
}
.wrapper {
border: 1px solid #bed1a3;
padding: 10px;
float: left;
}
.wrapper + .wrapper {
margin-left: 15px;
}
.wrapper h1 {
font-size: 20px;
}
.wrapper div {
width: 15%;
}
.wrapper div p {
line-height: 15px;
}
Adaptando CSS a los programadores SASS y COMPASS
17. 3. Sass básico
Funciones
SASS
CSS
@function porcent($target, $container)
{
@return ($target / $container) * 100%;
}
.caja {
width: 50%;
}
.caja {
width: porcent(480px, 960px)
}
Hay un buen número de Funciones predefinidas en Sass.
Más detalles en http://sass-lang.com/documentation/Sass/Script/Functions.html
Adaptando CSS a los programadores SASS y COMPASS
21. 4. Compass
Compass es un framework para trabajar con
Sass.
Consiste es un conjunto de partials,
funciones y mixins
•
•
•
•
•
•
CSS3
Helpers
Layout
Reset
Typography
Utilities
Más detalles en
http://compass-style.org/reference/compass/
Adaptando CSS a los programadores SASS y COMPASS
22. Adaptando CSS a los programadores SASS y COMPASS
5
Instalar Compass
23. 5. Instalar Compass
Para instalar Compass
$ gem install compass
Para crear un nuevo proyecto en Compass:
$ compass create <nombreDelProyecto>
Compass genera las carpetas para los archivos .scss / .css así como
un archivo config.rb con parámetros de compilación y uso.
config.rb
css_dir = "css" # Carpeta en donde guardar los .css
sass_dir = "sass" # Carpeta en donde guardar los .scss
images_dir = "images" # Carpeta en donde glas imagenes
output_style = :expanded # :expanded, :nested, :compact, :compressed
Adaptando CSS a los programadores SASS y COMPASS
24. Adaptando CSS a los programadores SASS y COMPASS
6
Usando Compass
25. 6. Usando Compass
Compilar
Nos situamos en la carpeta donde se ubica el fichero config.rb
$ compass compile
También podemos hacer que “vigile” por si hay cambios:
$ compass watch
Si Compass está ha compilado o está “vigilando” no es necesario
hacerlo con Sass
Adaptando CSS a los programadores SASS y COMPASS
26. 6. Usando Compass
El módulo CSS3
Compass
@import "compass/css3";
.box_gradient {
@include background-image(linear-gradient(top, #444, #999));
}
.box_transition {
@include transition(all 0.3s ease-out);
}
.box_shadow {
@include box-shadow(0px 0px 4px #fff);
}
Adaptando CSS a los programadores SASS y COMPASS
27. 6. Usando Compass
El módulo CSS3
CSS
.box_gradient {
background-image: -webkit-linear-gradient(top,
background-image:
-moz-linear-gradient(top,
background-image:
-ms-linear-gradient(top,
background-image:
-o-linear-gradient(top,
background-image:
linear-gradient(top,
}
.box_transition {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.box_shadow {
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
#444444,
#444444,
#444444,
#444444,
#444444,
#999999);
#999999);
#999999);
#999999);
#999999);
Más mixins del módulo CSS3 en:
http://compass-style.org/reference/compass/css3/
Adaptando CSS a los programadores SASS y COMPASS
28. 6. Usando Compass
Usando CSS Sprites
1 Tener generados los
iconos, individualmente,
con la misma extensión
2 Crear el fichero .scss
@import "compass/utilities/sprites"
@import "browsers/*.png";
Adaptando CSS a los programadores SASS y COMPASS
29. 6. Usando Compass
Usando CSS Sprites
Podemos indicar la orientación del sprite con “$<map>-layout”
$browsers-layout:horizontal;
@import "browsers/*.png";
$browsers-layout:vertical;
@import "browsers/*.png";
Adaptando CSS a los programadores SASS y COMPASS
$browsers-layout:diagonal;
@import "browsers/*.png";
31. 6. Usando Compass
Extensiones
Otra ventaja de Compass es la posibilidad de crear extensiones que
pueden ser compartidas
Fancy buttons
960 grid
Susy (responsive grid)
Compass Recipes
compass-magick
Patterner
compass-html5-boilerplate
compass-twitter-bootstrap
compass-css-lightbox
Adaptando CSS a los programadores SASS y COMPASS
32. Adaptando CSS a los programadores SASS y COMPASS
7
¿Preguntas?
33. Esto es todo
Muchas gracias :)
Luis Calvo Díaz (@LuisCalvoDiaz)
Senior Front-end developer
lcalvo@paradigmatecnologico.com