Adaptando CSS a los programadores

SASS y COMPASS
30 de octubre de 2013 - Escuela Politécnica Superior de la Universidad C...
Adaptando CSS a los programadores SASS y COMPASS

Índice
1.
2.
3.
4.
5.
6.

Introducción
Instalar Sass
Sass básico
Compass...
Adaptando CSS a los programadores SASS y COMPASS

1

Introducción
1. Introducción

Syntactically Awesome Style Sheets
Meta-lenguaje construido sobre CSS que
se utiliza para describir el es...
1. Introducción

no

CSS
es un lenguaje
de programación

simple

CSS es muy
,
no necesitamos usar
ninguna herramienta

Ada...
1. Introducción

no puedes usar variables

no puedes hacer opera-

no se puede debuggear
no necesitas usar la consola

cio...
Adaptando CSS a los programadores SASS y COMPASS

2

Instalar Sass
2. Instalar Saas
Para poder instalar Sass necesitamos tener
instalado Ruby.

• En Mac, Ruby ya está instalado
• Para Windo...
¿Consola?
Pero si yo soy diseñador…
Tengo post-it de colores
Adaptando CSS a los programadores SASS y COMPASS

3

Sass básico
3. Sass básico
Sintáxis

Indentada

#main
color: blue
font-size: 0.3em
#sidebar
border:1px solid red

Anidada entre llaves...
3. Sass básico
Anidamiento
SASS

CSS

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
...
3. Sass básico
Variables
SASS

CSS

$miFont: Helvetica, sans-serif;
$colorPrimario: #333;
$ancho: 960px;
body {
font: 100%...
3. Sass básico
Operadores ( + , - , *, %)
SASS

CSS

.container {
width: 100%;
}

.container {
width: 100%;
}

article {
f...
3. Sass básico
Mixins
SASS

CSS

@mixin caja($ancho, $alto, $radio:10px)
{
-webkit-border-radius: $radio;
-moz-border-radi...
3. Sass básico
Mixins (II)
SASS

CSS

@mixin envuelve {
.wrapper {
border:1px solid #bed1a3;
padding:10px;
float:left;
& +...
3. Sass básico
Funciones
SASS

CSS

@function porcent($target, $container)
{
@return ($target / $container) * 100%;
}

.ca...
3. Sass básico
Condicionales e iteradores
SASS

CSS
h1 {
font-size: 41px;
}

@mixin titulos ($maxSize){
@if $maxSize < 40{...
3. Sass básico
“Partials”
_variables.scss
$ancho: 960px;
$colorPpal : #bed1a3;
$colorLinks : #ff00ff;

SASS

@import "vari...
Adaptando CSS a los programadores SASS y COMPASS

4

Compass
4. Compass
Compass es un framework para trabajar con
Sass.
Consiste es un conjunto de partials,
funciones y mixins
•
•
•
•...
Adaptando CSS a los programadores SASS y COMPASS

5

Instalar Compass
5. Instalar Compass
Para instalar Compass
$ gem install compass

Para crear un nuevo proyecto en Compass:
$ compass create...
Adaptando CSS a los programadores SASS y COMPASS

6

Usando Compass
6. Usando Compass
Compilar
Nos situamos en la carpeta donde se ubica el fichero config.rb
$ compass compile

También podem...
6. Usando Compass
El módulo CSS3

Compass

@import "compass/css3";
.box_gradient {
@include background-image(linear-gradie...
6. Usando Compass
El módulo CSS3
CSS
.box_gradient {
background-image: -webkit-linear-gradient(top,
background-image:
-moz...
6. Usando Compass
Usando CSS Sprites

1 Tener generados los
iconos, individualmente,
con la misma extensión

2 Crear el fi...
6. Usando Compass
Usando CSS Sprites

Podemos indicar la orientación del sprite con “$<map>-layout”
$browsers-layout:horiz...
6. Usando Compass
Usando CSS Sprites
CSS
.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie,
.browsers-op...
6. Usando Compass
Extensiones

Otra ventaja de Compass es la posibilidad de crear extensiones que
pueden ser compartidas
F...
Adaptando CSS a los programadores SASS y COMPASS

7

¿Preguntas?
Esto es todo
Muchas gracias :)

Luis Calvo Díaz (@LuisCalvoDiaz)
Senior Front-end developer
lcalvo@paradigmatecnologico.co...
Upcoming SlideShare
Loading in …5
×

Adaptando CSS a los programadores: SASS y Compass

1,545 views

Published on

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/

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

No Downloads
Views
Total views
1,545
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Adaptando CSS a los programadores: SASS y Compass

  1. 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. 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. 3. Adaptando CSS a los programadores SASS y COMPASS 1 Introducción
  4. 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. 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. 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. 7. Adaptando CSS a los programadores SASS y COMPASS 2 Instalar Sass
  8. 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
  9. 9. ¿Consola? Pero si yo soy diseñador… Tengo post-it de colores
  10. 10. Adaptando CSS a los programadores SASS y COMPASS 3 Sass básico
  11. 11. 3. Sass básico Sintáxis Indentada #main color: blue font-size: 0.3em #sidebar border:1px solid red Anidada entre llaves #main { color: blue; font-size: 0.3em; } Adaptando CSS a los programadores SASS y COMPASS
  12. 12. 3. Sass básico Anidamiento SASS CSS nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } .home & { color: #fff; } } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav a:hover { text-decoration: underline; } .home nav a { color: #fff; } Adaptando CSS a los programadores SASS y COMPASS
  13. 13. 3. Sass básico Variables SASS CSS $miFont: Helvetica, sans-serif; $colorPrimario: #333; $ancho: 960px; body { font: 100% $miFont; color: $colorPrimario; } aside { $ancho: $ancho / 2; $alto: 100px; width: $ancho; height: $alto; } footer { width: $ancho; //height: $alto; } body { font: 100% Helvetica, sans-serif; color: #333333; } aside { width: 480px; height: 100px; } footer { width: 480px; } Adaptando CSS a los programadores SASS y COMPASS
  14. 14. 3. Sass básico Operadores ( + , - , *, %) SASS CSS .container { width: 100%; } .container { width: 100%; } article { float: left; width: 600px / 960px * 100%; } article { float: left; width: 62.5%; } aside { float: right; width: 300px / 960px * 100%; } aside { float: right; width: 31.25%; } Adaptando CSS a los programadores SASS y COMPASS
  15. 15. 3. Sass básico Mixins SASS CSS @mixin caja($ancho, $alto, $radio:10px) { -webkit-border-radius: $radio; -moz-border-radius: $radio; -ms-border-radius: $radio; -o-border-radius: $radio; border-radius: $radio; widht: $ancho; height: $alto; float: left; } .caja { @include caja(320px,100px,5px) } .caja, .cajaDere { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; widht: 320px; height: 100px; float: left; } .cajaDere { float: right; } .cajaDere { @extend .caja; float: right; } Adaptando CSS a los programadores SASS y COMPASS
  16. 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. 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
  18. 18. 3. Sass básico Condicionales e iteradores SASS CSS h1 { font-size: 41px; } @mixin titulos ($maxSize){ @if $maxSize < 40{ $maxSize : 40; } @else { $maxSize : $maxSize; } h2 { font-size: 37px; } @for $i from 1 through 5 { $size:($i * 4); $fontTam : $maxSize - $size; h#{$i} { font-size: $maxSize - $size + px; } h3 { font-size: 33px; } h4 { font-size: 29px; } } } h5 { font-size: 25px; } @include titulos(45); Adaptando CSS a los programadores SASS y COMPASS
  19. 19. 3. Sass básico “Partials” _variables.scss $ancho: 960px; $colorPpal : #bed1a3; $colorLinks : #ff00ff; SASS @import "variables"; @import "header"; @import "footer“; Permiten: • estructurar estilos modularmente _header.scss • centralizar variables/mixins/funciones CSS header { • mejorar la organización de nuestro CSS width: $ancho; } _footer.scss footer { background: $colorPpal; } header { width: 960px; } footer { background: #bed1a3; } Adaptando CSS a los programadores SASS y COMPASS
  20. 20. Adaptando CSS a los programadores SASS y COMPASS 4 Compass
  21. 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. 22. Adaptando CSS a los programadores SASS y COMPASS 5 Instalar Compass
  23. 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. 24. Adaptando CSS a los programadores SASS y COMPASS 6 Usando Compass
  25. 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. 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. 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. 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. 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";
  30. 30. 6. Usando Compass Usando CSS Sprites CSS .browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari { background: url('/images/browsers-sad8e949931.png') no-repeat; } .browsers-chrome { background-position: 0 0; } .browsers-firefox { background-position: 0 -128px; } .browsers-ie { background-position: 0 -256px; } .browsers-opera { background-position: 0 -384px; } .browsers-safari { background-position: 0 -512px; } Adaptando CSS a los programadores SASS y COMPASS
  31. 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. 32. Adaptando CSS a los programadores SASS y COMPASS 7 ¿Preguntas?
  33. 33. Esto es todo Muchas gracias :) Luis Calvo Díaz (@LuisCalvoDiaz) Senior Front-end developer lcalvo@paradigmatecnologico.com

×