Adaptando CSS a los programadores: SASS y Compass

33
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)

description

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/

Transcript of Adaptando CSS a los programadores: SASS y Compass

Page 1: Adaptando CSS a los programadores: SASS y Compass

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)

Page 2: Adaptando CSS a los programadores: SASS y Compass

1. Introducción 2. Instalar Sass 3. Sass básico 4. Compass 5. Instalar Compass 6. Usando Compass

Índice

Adaptando CSS a los programadores SASS y COMPASS

Luis Calvo Díaz (@LuisCalvoDiaz) Senior Front-end developer [email protected]

Page 3: Adaptando CSS a los programadores: SASS y Compass

Introducción

Adaptando CSS a los programadores SASS y COMPASS

1

Page 4: Adaptando CSS a los programadores: SASS y Compass

Don’t repeat

yourself!!

1. Introducción

Adaptando CSS a los programadores SASS y COMPASS

Syntactically Awesome Style Sheets

Meta-lenguaje construido sobre CSS que

se utiliza para describir el estilo de un

documento de manera limpia y estructu-

rada

Nos ayuda a reducir la repetición de

código y a ser más productivos

Page 5: Adaptando CSS a los programadores: SASS y Compass

1. Introducción

Adaptando CSS a los programadores SASS y COMPASS

CSS no es un lenguaje

de programación

CSS es muy simple,

no necesitamos usar

ninguna herramienta

Page 6: Adaptando CSS a los programadores: SASS y Compass

1. Introducción

Adaptando CSS a los programadores SASS y COMPASS

no puedes usar variables

no puedes hacer opera-

ciones entre valores

no se puede debuggear

no necesitas usar la consola

Page 7: Adaptando CSS a los programadores: SASS y Compass

Instalar Sass

Adaptando CSS a los programadores SASS y COMPASS

2

Page 8: Adaptando CSS a los programadores: SASS y Compass

2. Instalar Saas

Adaptando CSS a los programadores SASS y COMPASS

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:

Para procesar y generar el css:

$ gem install sass

$ sass --watch estilos.scss:estilos.css

Page 9: Adaptando CSS a los programadores: SASS y Compass

¿Consola?

Pero si yo soy diseñador…

Tengo post-it de colores

Page 10: Adaptando CSS a los programadores: SASS y Compass

Sass básico

Adaptando CSS a los programadores SASS y COMPASS

3

Page 11: Adaptando CSS a los programadores: SASS y Compass

3. Sass básico

Sintáxis

Adaptando CSS a los programadores SASS y COMPASS

Indentada Anidada entre llaves

#main

color: blue

font-size: 0.3em

#sidebar

border:1px solid red

#main {

color: blue;

font-size: 0.3em;

}

Page 12: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Anidamiento

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;

}

SASS CSS

Page 13: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Variables

$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;

}

SASS CSS

Page 14: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Operadores ( + , - , *, %)

.container {

width: 100%;

}

article {

float: left;

width: 600px / 960px * 100%;

}

aside {

float: right;

width: 300px / 960px * 100%;

}

.container {

width: 100%;

}

article {

float: left;

width: 62.5%;

}

aside {

float: right;

width: 31.25%;

}

SASS CSS

Page 15: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Mixins

@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)

}

.cajaDere {

@extend .caja;

float: right;

}

.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;

}

SASS CSS

Page 16: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Mixins (II)

@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;

}

SASS CSS

Page 17: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Funciones

@function porcent($target, $container)

{

@return ($target / $container) * 100%;

}

.caja {

width: porcent(480px, 960px)

}

.caja {

width: 50%;

}

SASS CSS

Hay un buen número de Funciones predefinidas en Sass.

Más detalles en http://sass-lang.com/documentation/Sass/Script/Functions.html

Page 18: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

Condicionales e iteradores

@mixin titulos ($maxSize){

@if $maxSize < 40{

$maxSize : 40;

} @else {

$maxSize : $maxSize;

}

@for $i from 1 through 5 {

$size:($i * 4);

$fontTam : $maxSize - $size;

h#{$i} {

font-size: $maxSize - $size + px;

}

}

}

@include titulos(45);

h1 {

font-size: 41px;

}

h2 {

font-size: 37px;

}

h3 {

font-size: 33px;

}

h4 {

font-size: 29px;

}

h5 {

font-size: 25px;

}

SASS CSS

Page 19: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

3. Sass básico

“Partials”

Permiten:

• estructurar estilos modularmente

• centralizar variables/mixins/funciones

• mejorar la organización de nuestro CSS

_header.scss

header {

width: $ancho;

}

_footer.scss

_variables.scss

$ancho: 960px;

$colorPpal : #bed1a3;

$colorLinks : #ff00ff;

footer {

background: $colorPpal;

}

@import "variables";

@import "header";

@import "footer“;

SASS

header {

width: 960px;

}

footer {

background: #bed1a3;

}

CSS

Page 20: Adaptando CSS a los programadores: SASS y Compass

Compass

Adaptando CSS a los programadores SASS y COMPASS

4

Page 21: Adaptando CSS a los programadores: SASS y Compass

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

Adaptando CSS a los programadores SASS y COMPASS

Más detalles en http://compass-style.org/reference/compass/

Page 22: Adaptando CSS a los programadores: SASS y Compass

Instalar Compass

Adaptando CSS a los programadores SASS y COMPASS

5

Page 23: Adaptando CSS a los programadores: SASS y Compass

5. Instalar Compass

Para instalar Compass

Para crear un nuevo proyecto en Compass:

Compass genera las carpetas para los archivos .scss / .css así como

un archivo config.rb con parámetros de compilación y uso.

$ gem install compass

$ compass create <nombreDelProyecto>

Adaptando CSS a los programadores SASS y COMPASS

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

Page 24: Adaptando CSS a los programadores: SASS y Compass

Usando Compass

Adaptando CSS a los programadores SASS y COMPASS

6

Page 25: Adaptando CSS a los programadores: SASS y Compass

6. Usando Compass

Nos situamos en la carpeta donde se ubica el fichero config.rb

También podemos hacer que “vigile” por si hay cambios:

Si Compass está ha compilado o está “vigilando” no es necesario

hacerlo con Sass

$ compass compile

$ compass watch

Adaptando CSS a los programadores SASS y COMPASS

Compilar

Page 26: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

6. Usando Compass

El módulo CSS3

@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);

}

Compass

Page 27: Adaptando CSS a los programadores: SASS y Compass

.box_gradient {

background-image: -webkit-linear-gradient(top, #444444, #999999);

background-image: -moz-linear-gradient(top, #444444, #999999);

background-image: -ms-linear-gradient(top, #444444, #999999);

background-image: -o-linear-gradient(top, #444444, #999999);

background-image: linear-gradient(top, #444444, #999999);

}

.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;

}

CSS

Adaptando CSS a los programadores SASS y COMPASS

6. Usando Compass

El módulo CSS3

Más mixins del módulo CSS3 en: http://compass-style.org/reference/compass/css3/

Page 28: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

6. Usando Compass

Usando CSS Sprites

Tener generados los

iconos, individualmente,

con la misma extensión

1

Crear el fichero .scss 2

@import "compass/utilities/sprites"

@import "browsers/*.png";

Page 29: Adaptando CSS a los programadores: SASS y Compass

Adaptando CSS a los programadores SASS y COMPASS

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";

$browsers-layout:diagonal;

@import "browsers/*.png";

Page 30: Adaptando CSS a los programadores: SASS y Compass

.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;

}

CSS

6. Usando Compass

Usando CSS Sprites

Adaptando CSS a los programadores SASS y COMPASS

Page 31: Adaptando CSS a los programadores: SASS y Compass

6. Usando Compass

Extensiones

Otra ventaja de Compass es la posibilidad de crear extensiones que

pueden ser compartidas

compass-html5-boilerplate compass-twitter-bootstrap compass-css-lightbox

Compass Recipes compass-magick Patterner

Fancy buttons 960 grid Susy (responsive grid)

Adaptando CSS a los programadores SASS y COMPASS

Page 32: Adaptando CSS a los programadores: SASS y Compass

¿Preguntas? 7

Adaptando CSS a los programadores SASS y COMPASS

Page 33: Adaptando CSS a los programadores: SASS y Compass

Esto es todo

Muchas gracias :)

Luis Calvo Díaz (@LuisCalvoDiaz) Senior Front-end developer [email protected]