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) 

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] 

Introducción Adaptando CSS a los programadores SASS y COMPASS 1 

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 

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 

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 

Instalar Sass Adaptando CSS a los programadores SASS y COMPASS 2 

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 

¿Consola? Pero si yo soy diseñador… Tengo post-it de colores 

Sass básico Adaptando CSS a los programadores SASS y COMPASS 3 

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

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 

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 

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 

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 

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 

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 

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 

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 

Compass Adaptando CSS a los programadores SASS y COMPASS 4 

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/ 

Instalar Compass Adaptando CSS a los programadores SASS y COMPASS 5 

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

Usando Compass Adaptando CSS a los programadores SASS y COMPASS 6 

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 

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 

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

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

Adaptando CSS a los programadores SASS y COMPASS 6. Usando Compass Usando CSS Sprites Podemos indicar la orientación del sprite con “$-layout” $browsers-layout:horizontal; @import "browsers/*.png"; $browsers-layout:vertical; @import "browsers/*.png"; $browsers-layout:diagonal; @import "browsers/*.png"; 

.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 

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 

¿Preguntas? 7 Adaptando CSS a los programadores SASS y COMPASS 

Esto es todo Muchas gracias :) Luis Calvo Díaz (@LuisCalvoDiaz) Senior Front-end developer [email protected]