Curso CSS3 com Sass e Compass - Aula 01 - Introducão
87
Loiane Groner http://loiane.com Curso CSS com Sass e Compass: Introdução
-
Upload
loiane-groner -
Category
Technology
-
view
954 -
download
1
description
Todas as aulas já publicadas: http://www.loiane.com/2012/03/curso-online-css3-com-sass-e-compass-gratuito/
Transcript of Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Loiane Gronerhttp://loiane.com
CursoCSS com
Sass e Compass:Introdução
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
.msg { padding: 24px; }
.msg h3 {padding: 24px;
}
Problemas• Repetição gera problemas para manter codigo• Relacionamentos não estão claros• Razões para tais valores estão na cabeça de quem fez o design
Sass é uma extensão do CSS3 que permite que você crie folhas de estilo melhores com um esforço menor
De Sass Para CSS
SCSS - Sassy CSS (.scss)
h1 {color: #000; background: #fff;
}
Indented Sass (.sass)
h1 color: #000 background: #fff
Pense Dinamicamente
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
DRY
Don’tRepeatYourself
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
Variáveis
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
/* CSS */
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
.scss .css
Com Sass...• Não tem repetição -> custo de manuntenção é baixo• Variáveis deixam os relacionamentos claros• Razões para tais valores ficam evidentes
Nesting
.scss .csstable.hl { margin: 2em 0; td.ln { text-align: right; }}
li { font: { family: serif; weight: bold; size: 1.2em; }}
/* CSS */
table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}
li { font-family: serif; font-weight: bold; font-size: 1.2em;}
Herança
.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { @extend .error; border-width: 3px;}
/* CSS */
.error, .badError { border: 1px #f00; background: #fdd;}
.error.intrusion,
.badError.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { border-width: 3px;}
.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { @extend .error; border-width: 3px;}
<div class="error badError">Erros Graves</div>
/* CSS */
.error, .badError { border: 1px #f00; background: #fdd;}
.error.intrusion,
.badError.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { border-width: 3px;}
.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { @extend .error; border-width: 3px;}
<div class="error badError">Erros Graves</div>
/* CSS */
.error, .badError { border: 1px #f00; background: #fdd;}
.error.intrusion,
.badError.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { border-width: 3px;}
.scss .css.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { @extend .error; border-width: 3px;}
<div class="error badError">Erros Graves</div>
/* CSS */
.error, .badError { border: 1px #f00; background: #fdd;}
.error.intrusion,
.badError.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { border-width: 3px;}
Mixins
@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px}}
@mixin left($dist) { float: left; margin-left: $dist;}
#data { @include left(10px); @include table-base;}
/* CSS */
#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}
.scss .css
Imports
_core.scss
_footer.scss
_header.scss
projeto.scss projeto.css
/* projeto.scss */@import "core";@import "header", "footer";
Operações
Matemáticas
Operadores Matemáticos
Operadores Matemáticos (+, -, *, /, %) funcionam com números
2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1
Divisão
font: 2px / 2px; //1pxfont: 25px / 4+1; //5pxfont: $base / 2;
Funções Numéricas
percentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5
Loop e Condicionais› Operadores Condicionais < > <= => == !=
› @if, @else, @else if
› @for, @each, @while
› and, or
Operadores Relacionais (<, >, <=, >=) comparam números1 < 25 // true10 <= 30 // true3 > 2 // true3 >= 2 // true
Operacores de Comparação (==, !=) comparam qualquer tipo1 + 1 == 2 // truesmall != big // true#000 == black // true
red == #f00red == #ff0000red == rgb(255, 0, 0)red == rgba(255, 0, 0, 1.0)red == hsl(0deg, 100%, 100%)red == hsla(0deg, 100%, 100%, 1)
$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}
@if, @else, @else if
Loop @for
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}
.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }
.scss
.css
Loop @while
$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }
.scss
.css
Loop @each
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}
.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'); }.salamander-icon { background-image: url('/images/salamander.png'); }
.css
.scss
Cores!
Função RGBA
a { color: rgba(blue, .75) }p { background: rgba(#ffa, .25) }
a { color: rgba(255, 255, 170, 0.25) }p { background: rgba(255, 255, 170, 0.25) }
.scss
.css
Inspecionando Cores
$color: red;hue($color); //0degsaturation($color); // 100%lightness($color); // 50%red($color); //100green($color); //0blue($color); //0alpha($color); //100
Manipulando Cores
invert(blue)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
mix(red, yellow, 30%)mix(red, yellow)
invert(blue) complement(#6cf620)
grayscale(yellow)
complement(#6cf620)
mix(red, yellow) mix(red, yellow, 30%)
grayscale(yellow)
Manipulando HSLAadjust-hue(#77a7f9,90)
adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%)
desaturate(#d9a621,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5)
fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
Mudar a CorPode setar qualquer propriedade de cor
change-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
change-color(#6cf620, $green: 60, $blue: 100);
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
#19f65d
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
#6C3C64
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
#19f65d
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
#6C3C64
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
#19f65d
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
#6C3C64
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
#19f65d
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
#6C3C64
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
#19f65d
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
#6C3C64
change-color(#ba5637, $hue:60);
change-color(#8e9cb3, $saturation:100);
#19f65d
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
#6C3C64
#19f65d
#4288ff
#6C3C64
Ajustar a CorPode incrementar qualquer propriedade de cor
adjust-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
#19f65d
rgba(95, 255, 227, 0.75);
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
#19f65d
rgba(95, 255, 227, 0.75);
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
#19f65d
rgba(95, 255, 227, 0.75);
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
#19f65d
rgba(95, 255, 227, 0.75);
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
#19f65d
rgba(95, 255, 227, 0.75);
adjust-color(#d3fa7b,$hue:60, $lightness:-20%);
adjust-color(#5f8fe3, $green:100, $alpha:-0.25);
Escalar a CorPode escalar em qualqer porcentagem qualquer propriedade de cor
scale-color($color, [$red], [$green], [$blue],[$saturation], [$lightness], [$alpha]);
scale-color(#adf609, $lightness:50%);
adjust-color(#adf609, $lightness:50%);
#d6fa84
white
scale-color adjust-color
scale-color(#adf609, $lightness:50%);
adjust-color(#adf609, $lightness:50%);
#d6fa84
white
scale-color adjust-color
scale-color(#adf609, $lightness:50%);
adjust-color(#adf609, $lightness:50%);
#d6fa84
white
scale-color adjust-color
scale-color(#adf609, $lightness:50%);
adjust-color(#adf609, $lightness:50%);
#d6fa84
white
scale-color adjust-color
#d6fa84
white
adjust-color(#adf609, $lightness:50%);
scale-color(#adf609, $lightness:50%);
Funções
@function pxem($px, $context: 16px) { @return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }
article h2 { font-size: 2.813em; }
.scss
.css
Compass is an open-source CSS Authoring Framework.
Coleção de MixinsFunções SassAmbienteExtensões
http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed
Funções Helperadjust-lightness, scale-lightnessadjust-saturation, scale-saturationimage-urlimage-heightimage-widthinline-imagefont-urlinline-font-filespisincostan e mais...
header { background: image-url('hbg.png'); h1 { width: image-width('logo.png'); height: image-height('logo.png'); background: inline-image('logo.png') }}
header { background: url('/images/hbg.png?1351...');}header h1 { width: 220px; height: 100px; background: url('data:image/png;base64...');}
.scss
.css
Mixins
UtilidadesBrowser Hacks, Clear!xes, ResetsEstilos para ElementosLinks, Lists, Float, Tables, TextDesign patternsTag Cloud, Sticky footer, Vertical rhythmCSS3appearance, background, gradients, background-clip background-origin, background-size, border-radius box, box-shadow,box-sizing, CSS3 PIE, columns, font-face, opacity, transform, transition, more...
@include background(linear-gradient(#fff, #eee)); @include border-radius(5px);}
.msg {
.msg {background: -webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%, #ffffff), color-stop(100%, #eeeeee));background: -webkit-linear-gradient(#ffffff, #eeeeee);background: -moz-linear-gradient(#ffffff, #eeeeee);background: -ms-linear-gradient(#ffffff, #eeeeee);background: linear-gradient(#ffffff, #eeeeee);-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px; }
.scss
.css
Plugins e Extensões
Fancy Buttons, Sassy Buttons - botões CSS3Animate - lib para animação em CSS3RGBApng - Gerar alpha pngs a partir do SassCompass Magick - Renderiza gradientes CSS3 Gradients para png
Quem usa?
Referências Sass
http://sass-lang.com/
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
http://thesassway.com/
Referências Compass
http://compass-style.org/
http://compass-style.org/reference/compass/
http://groups.google.com/group/sass-lang
.contato { email: ‘[email protected]’; blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’;}
Obrigada!
