Adaptando CSS a los programadores: SASS y Compass

C980aaaf45cdff7fc113e9c451dd4530?s=47 Paradigma
October 30, 2013

Adaptando CSS a los programadores: SASS y Compass

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/

C980aaaf45cdff7fc113e9c451dd4530?s=128

Paradigma

October 30, 2013
Tweet

Transcript

  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.

    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 lcalvo@paradigmatecnologico.com
  3. 4.

    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
  4. 5.

    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
  5. 6.

    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
  6. 8.

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

    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; }
  8. 12.

    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
  9. 13.

    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
  10. 14.

    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
  11. 15.

    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
  12. 16.

    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
  13. 17.

    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
  14. 18.

    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
  15. 19.

    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
  16. 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 Adaptando CSS a los programadores SASS y COMPASS Más detalles en http://compass-style.org/reference/compass/
  17. 23.

    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
  18. 25.

    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
  19. 26.

    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
  20. 27.

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

    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";
  22. 29.

    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";
  23. 30.

    .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
  24. 31.

    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
  25. 33.

    Esto es todo Muchas gracias :) Luis Calvo Díaz (@LuisCalvoDiaz)

    Senior Front-end developer lcalvo@paradigmatecnologico.com