Your SlideShare is downloading. ×
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adaptando CSS a los programadores: SASS y Compass

966

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

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
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
966
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 9. ¿Consola? Pero si yo soy diseñador… Tengo post-it de colores
  • 10. Adaptando CSS a los programadores SASS y COMPASS 3 Sass básico
  • 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. 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. 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. 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. 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. 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
  • 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. 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. Adaptando CSS a los programadores SASS y COMPASS 4 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";
  • 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. 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

×