Curso CSS3 com Sass e Compass - Aula 01 - Introducão

Curso
CSS com
Sass e Compass:
Introdução
Loiane Groner
http://loiane.com

.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

SCSS - Sassy CSS (.scss)

h1 {
color: #000;
background: #fff;
}

Indented Sass (.sass)

h1
color: #000
background: #fff

P ense
ic am ente
Din am

.scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */

.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
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;
}

Com Sass...
• Não tem repetição -> custo de manuntenção é baixo
• Variáveis deixam os relacionamentos claros
• Razões para tais valores ﬁcam evidentes

.scss .css
table.hl { /* CSS */
margin: 2em 0;
td.ln { table.hl {
text-align: right; margin: 2em 0;
} }
} table.hl td.ln {
text-align: right;
li { }
font: {
family: serif; li {
weight: bold; font-family: serif;
size: 1.2em; font-weight: bold;
} font-size: 1.2em;
} }

.scss .css
.error { /* CSS */
border: 1px #f00;
background: #fdd; .error, .badError {
} border: 1px #f00;
.error.intrusion { background: #fdd;
font-size: 1.3em; }
font-weight: bold;
} .error.intrusion,
.badError.intrusion {
.badError { font-size: 1.3em;
@extend .error; font-weight: bold;
border-width: 3px; }
}
.badError {
border-width: 3px;
}

.scss .css
.error { /* CSS */
border: 1px #f00;
background: #fdd; .error, .badError {
} border: 1px #f00;
.error.intrusion { background: #fdd;
font-size: 1.3em; }
font-weight: bold;
} .error.intrusion,
.badError.intrusion {
.badError { font-size: 1.3em;
@extend .error; font-weight: bold;
border-width: 3px; }
}
.badError {
<div class="error badError"> border-width: 3px;
Erros Graves }
</div>

.scss .css
@mixin table-base {
th { /* CSS */
text-align: center;
font-weight: bold; #data {
} float: left;
td, th {padding: 2px} margin-left: 10px;
} }
#data th {
@mixin left($dist) { text-align: center;
float: left; font-weight: bold;
margin-left: $dist; }
} #data td, #data th {
padding: 2px;
#data { }
@include left(10px);
@include table-base;
}

/* projeto.scss */
@import "core";
@import "header", "footer";

sc ss
_ core.
.sc ss
_ footer
sc ss
_h eader.
projeto.css
projeto.scss

Opera çõ es
tem á tic as
Ma

Operadores Matemáticos

Operadores Matemáticos (+, -, *, /, %) funcionam com
números
2em + 2em; //4em
2em - 1em; //1em
1in + 72pt; //2in
5px * 4; //20px
19 % 3; //1

Divisão

font: 2px / 2px; //1px
font: 25px / 4+1; //5px
font: $base / 2;

Funções Numéricas

percentage(13/25); //52%
round(4.4); //4
ceil(4.2); //5
floor(4.6); //4
abs(-5); //5

Loo pe
dic ion ais
C on es Cond i ci o n a i s < > <= = > == !=
›O perador
else, @ e l se i f
› @if, @
, @ e a ch , @w h i l e
› @for
› and, or

Operadores Relacionais (<, >, <=, >=) comparam
números
1 < 25 // true
10 <= 30 // true
3 > 2 // true
3 >= 2 // true

Operacores de Comparação (==, !=) comparam
qualquer tipo
1 + 1 == 2 // true
small != big // true
#000 == black // true

red == #f00
red == #ff0000
red == rgb(255, 0, 0)
red == rgba(255, 0, 0, 1.0)
red == hsl(0deg, 100%, 100%)
red == hsla(0deg, 100%, 100%, 1)

@if, @else, @else if
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}

Loop @for
.scss
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

.css
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }

Loop @while
.scss
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

.css
.item-6 {
width: 12em; }

.item-4 {
width: 8em; }

.item-2 {
width: 4em; }

Loop @each
.scss
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

.css
.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'); }

Função RGBA
.scss
a { color: rgba(blue, .75) }
p { background: rgba(#ffa, .25) }

.css

a { color: rgba(255, 255, 170, 0.25) }
p { background: rgba(255, 255, 170, 0.25) }

Inspecionando Cores
$color: red;
hue($color); //0deg
saturation($color); // 100%
lightness($color); // 50%
red($color); //100
green($color); //0
blue($color); //0
alpha($color); //100

Manipulando Cores
invert(blue)
invert(blue)
invert(blue)
invert(blue)
invert(blue) complement(#6cf620)
complement(#6cf620)
complement(#6cf620)
complement(#6cf620)
complement(#6cf620)
invert(blue)
invert(blue) invert(blue)
invert(blue)
complement(#6cf620)
complement(#6cf620) co
co
invert(blue) complement(#6cf620)

mix(red, yellow)
mix(red,yellow) mix(red,yellow, 30%) 30%)
mix(red,yellow)
yellow) mix(red, yellow, 30%)
mix(red, yellow)
mix(red, yellow) mix(red, yellow, 30%)
mix(red, yellow, 30%)
mix(red, yellow,
mix(red,
mix(red, yellow)
yellow) mix(red, yellow) 30%) mi
mix(red, yellow)
yellow,
mix(red, yellow, 30%)
yellow, 30%) mi
mix(red, mix(red,

grayscale(yellow)
grayscale(yellow)
grayscale(yellow)
grayscale(yellow) grayscale(yellow)
grayscale(yellow)
grayscale(yellow)
grayscale(yellow) grayscale(yellow)
grayscale(yellow)

Manipulando HSLA
adjust-hue(#77a7f9,90)
adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90)
adjust-hue(#77a7f9,-90)
adjust-hue(#77a7f9,90)adjust-hue(#77a7f9,90
adjust-hue(#77a7f9,-

saturate(#9b8a60,50%) desaturate(#d9a621,50%)
adjust-hue(#77
adjust-hue(#77a7f9,90) adjust
saturate(#9b8a60,50%) saturate(#9b8a60,50%)
desaturate(#d9a621,5
saturate(#9b8a60,50%)

darken(#6cf620,30%) desaturate(#d9a621,50%)
lighten(#2e7805,50%)
saturate(#9b8a
saturate(#9b8a60,50%) desatu
darken(#6cf620,30%) darken(#6cf620,30%)
darken(#6cf620,30%)
darken(#6cf620,30%) lighten(#2e7805,50%)

saturate(#9b8a
saturate(#9b8a60,50%) desatur

darken(#6cf620,30%) lighten(#2e7805,50%)
darken(#6cf620,30%) darken(#6cf620
darken(#6cf620,30%) lighten

fade-out(#fab, .5)
fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)
fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)
fade-in(rgba(#fab,.5),.5)
fade-out(#fab, .5) fade-in(rgb
fade-out(#fab, .

Mudar a Cor
Pode setar qualquer propriedade de cor

change-color($color, [$red], [$green], [$blue],
[$hue], [$saturation], [$lightness], [$alpha]);

change-color(#ba5637, $hue:60);
#19f65d
#19f65d
#19f65d $hue:60);
change-color(#ba5637,
#19f65d
#19f65d
#19f65d
#19f65d
change-color(#8e9cb3, $saturation:100);
#4288ff $saturation:100);
#4288ff$saturation:100);
change-color(#8e9cb3,
change-color(#8e9cb3,
#4288ff
#4288ff
#4288ff
#4288ff
#4288ff
change-color(#6cf620, $green: 60, $blue: 100);
change-color(#6cf620, $green: 60, $blue: 100);
change-color(#6cf620,$green: 60,60, $blue:
change-color(#6cf620, $green: 60,$blue: 100);
change-color(#6cf620, $green: $blue: 100);
100); #6C3C64 $green: 60, $blue: 100);
#6C3C64$green: 60, $blue: 100);
change-color(#6cf620,
change-color(#6cf620,
#6C3C64
#6C3C64
#6C3C64
#6C3C64
#6C3C64

Ajustar a Cor
Pode incrementar qualquer propriedade de cor

adjust-color($color, [$red], [$green], [$blue],
[$hue], [$saturation], [$lightness], [$alpha]);

adjust-color(#d3fa7b, $hue:60, $lightness:-20%);
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);

#19f65d
#19f65d
#19f65d

adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
#19f65d
#19f65d
adjust-color(#5f8fe3, $green:100, $alpha:
rgba(95, 255, 227, 0.75); -0.25);
rgba(95, 255, 227, 0.75);

rgba(95, 255, 227, 0.75); 0.75);
rgba(95, 255, 255, 0.75);
rgba(95, 227, 227,

Escalar a Cor
Pode escalar em qualqer porcentagem qualquer propriedade
de cor

scale-color($color, [$red], [$green], [$blue],
[$saturation], [$lightness], [$alpha]);

scale-color(#adf609, $lightness:50%);
#d6fa84
#d6fa84
#d6fa84
#d6fa84
adjust-color(#adf609, $lightness:50%);
white
white
white
white
#d6fa84
scale-color adjust-color
scale-color adjust-c
scale-color adjust-c

white

.scss

@function pxem($px, $context: 16px) {
@return ($px / $context) * 1em;
}
article h2 { font-size: pxem(45px); }

.css

article h2 { font-size: 2.813em; }

Compass is an open-source CSS
Authoring Framework.

Coleção de Mixins
Funções Sass
Ambiente
Extensões

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
fonts_dir = "fonts"
javascripts_dir = "javascripts"
output_style = :compressed

Funções Helper
adjust-lightness, scale-lightness
adjust-saturation, scale-saturation
image-url
image-height
image-width
inline-image
font-url
inline-font-files
pi
sin
cos
tan e mais...

.scss
header {
background: image-url('hbg.png');
h1 { width: image-width('logo.png');
height: image-height('logo.png');
background: inline-image('logo.png')
}
}

.css
header {
background: url('/images/hbg.png?1351...');
}
header h1 { width: 220px; height: 100px;
background: url('data:image/png;base64...');
}

Mixins
Utilidades
Browser Hacks, Clear!xes, Resets
Estilos para Elementos
Links, Lists, Float, Tables, Text
Design patterns
Tag Cloud, Sticky footer, Vertical rhythm
CSS3
appearance, background, gradients, background-clip background-
origin, background-size, border-radius box, box-shadow,box-sizing,
CSS3 PIE, columns, font-face, opacity, transform, transition, more...

.scss
.msg {
@include background(linear-gradient(#fff, #eee));
@include border-radius(5px);
}
.css
.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; }

Plugins e Extensões

Fancy Buttons, Sassy Buttons - botões CSS3
Animate - lib para animação em CSS3
RGBApng - Gerar alpha pngs a partir do Sass
Compass Magick - Renderiza gradientes CSS3
Gradients para png

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: ‘curso@extjs4.com’;
blog: ‘loiane.com’;
facebook: ‘facebook.com/loianegroner’;
twitter: ‘@loiane’;
github: ‘loiane’;
vimeo: ‘loiane’;
youtube: ‘loianeg’;
}

Curso CSS3 com Sass e Compass - Aula 01 - Introducão

Recommended

Recommended

More Related Content

Similar to Curso CSS3 com Sass e Compass - Aula 01 - Introducão

Similar to Curso CSS3 com Sass e Compass - Aula 01 - Introducão (20)

Recently uploaded

Recently uploaded (20)

Curso CSS3 com Sass e Compass - Aula 01 - Introducão