Sass & compass

2,318 views

Published on

Tutorial sobre Sass y Compass para principiantes hecho para la formación de Artvisual.net

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,318
On SlideShare
0
From Embeds
0
Number of Embeds
976
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sass & compass

  1. 1. Sass & Compass FORMACIÓN ARTVISUAL 2013 Javier Arques @javiarques
  2. 2. Preprocesador de CSS que añade funcionalidades típicas de un lenguaje de programación: Variables, herencia, funciones, ... .scss .css
  3. 3. Librería de extensiones y utilidades para sass
  4. 4. NESTING (ANIDAMIENTO) Te permite anidar dentro de un mismo padre todo el código ( nav, nav ul, nav ul li, ...) También se puede anidar propiedades (border, font, ...) Se usa & para acceder al padre &:hover li { font: { family: serif; weight: bold; size: 1.2em; } a{ color: red; &:hover{ color: green; } } } .scss li { font-family: serif; font-weight: bold; font-size: 1.2em; } li a{ color: red; } li a:hover{ color: green; } .css
  5. 5. VARIABLES Variables begin with $ and are declared just like properties. They can have any value that’s allowed for a CSS property, such as colors, numbers (with units), or text. $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } .scss .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } .css
  6. 6. MIXINS Reutilizar código, con o sin parámetros @mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px} } @mixin left($dist: 30px) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; } .scss #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } .css
  7. 7. @import Crea tantos ficheros .scss como quieras y únelos en un único fichero en servidor @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } _rounded.scss #navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } #footer { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; } #sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; } .css @import "rounded"; #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); } #sidebar { @include rounded(top, left, 8px); } styles.scss
  8. 8. Interpolation Para usar el nombre de la propiedad #{variable} $posicion_borde: left; @mixin coche($marca, $color){ .coche.#{$marca}{ border-#{$posicion_borde}: 2px; background-color: $color; background-image: url ('images/#{$marca}-#{$color}.jpg') } } @include coche('audi', 'green'); style.scss .coche.audi { border-left: 2px; background-color: "green"; background-image: url ("images/audi-green.jpg"); } style.css
  9. 9. Operations & Functions Operaciones con números: +, -, *, /, % Funciones de color: lighten, darken, rgba #navbar { $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } } } style.scss #navbar { width: 800px; border-bottom: 2px solid #ce4dd6; } #navbar li { float: left; width: 150px; background-color: #e5a0e9; } #navbar li:hover { background-color: #d976e0; } style.css
  10. 10. @if @each @for @while @each $animal in puma, sea-slug, egret { .#{$animal}-icon { background-image: url('/images/#{$animal}. png'); } } style.scss .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } style.css $animal: gato; p { @if 1 + 1 == 2 {border: 2px solid black} @if $animal == gato { color: blue; } @else if $animal == perro { color: red; } @else if $animal == caballo { color: green; } @else { color: black; } } p { border: 2px solid black; color: blue; } @for $i from 1 to 3 { .todos-#{$i} { width: 2em * $i; } } .todos-1 { width: 2em; } .todos-2 { width: 4em; }
  11. 11. @extend Herencia entre clases .alerta { background: orange; display: block; font-weight: bold; } .alertaCritica{ @extend .alerta; background: red; } style.scss .alerta, .alertaCritica { background: orange; display: block; font-weight: bold; } .alertaCritica { background: red; } style.css
  12. 12. Compilar sass Colección de mixins CSS3 (no más prefijos!) @include box-shadow(red 2px 2px 10px); } -webkit-box-shadow: red 2px 2px 10px; -moz-box-shadow: red 2px 2px 10px; box-shadow: red 2px 2px 10px; Helpers (clearfix, float, hacks) Sprites images/my-icons/new.png images/my-icons/edit.png images/my-icons/save.png images/my-icons/delete.png @import "my-icons/*.png"; @include all-my-icons-sprites;
  13. 13. Instalación y uso Sass y compass son dos gemas de Ruby gem install compass // INSTALAR COMPASS & SASS compass create nombre_proyecto // CREA UN FICHERO config.rb compass watch // Autocompila los .scss -> .css
  14. 14. config.rb # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "images" javascripts_dir = "js" output_style = :expanded # You can select your preferred output style here: # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

×