Sintaxe CSS

O CSS (Cascading Style Sheet) é uma folha de estilo onde é determinado como será apresentado um documento escrito com uma linguagem de marcação ao usuário

seletor {

propriedade: valor;

propriedade: valor;

}

$nome-da-variável: valor;

O valor pode ser:

● String - ‘Texto’; ● Cor - ‘#333333’● Números - 1em;● Boolean - true;● Lista - a, b, c;

Variáveis

As variáveis podem ser sobreescritas:

$cor-principal: black;

$cor-principal: white;

.titulo { color: $cor-principal; }

Ao final será gerado:

.titulo { color: white; }

Variáveis

.titulo {

$cor: red;

color: $cor;

}

.subtitulo {

color: $cor;

}

Scopo da variável

.titulo {

$cor: red;

color: $cor;

}

.subtitulo {

color: $cor;

}

Scopo da variável

Erro de sintaxeUndefined variable: “$cor”

$cor: red;

.titulo {

$cor: blue;

color: $cor;

}

.subtitulo {

color: $cor;

}

Scopo da variável

$cor: red;

.titulo {

$cor: blue;

color: $cor;

}

.subtitulo {

color: $cor;

}

Scopo da variável

.titulo {

color: blue;

}

.subtitulo {

color: red*;

}

* a partir da versão 3.4.7

#main {

$width: 5em !global;

width: $width;

}

.subtitulo {

width: $width;

}

Valor padrão da variável

#main {

$width: 5em !global;

width: $width;

}

.subtitulo {

width: $width;

}

Valor padrão da variável

#main {

width: 5em;

}

.subtitulo {

width: 5em;

}

$width: 6em;

#main {

$width: 5em !global;

width: $width;

}

.subtitulo {

width: $width;

}

Valor padrão da variável

#main {

width: 6em;

}

.subtitulo {

width: 6em;

}

Sass

.artigo {

.titulo { color: red; }

.subtitulo { color: orange; }

}

Css Gerado

.artigo .titulo { color: red; }

.artigo .subtitulo { color: orange; }

Nesting

Sass

.item a {

color: darkgreen;

&:hover {color: green}

}

Css Gerado

.item a { color: darkgreen; }

.item a:hover { color: green; }

Nesting

Sass

.item {

.submenu & { color: red; }

.menu & { color: orange; }

}

Css Gerado

.submenu .item { color: red; }

.menu .item { color: orange; }

Nesting

Sass

.item {

.submenu & { color: red; }

.menu & { color: orange; }

}

Css Gerado

.submenu .item { color: red; }

.menu .item { color: orange; }

Nesting

Referência ao pai do seletor

Sass

.item {

margin: { top: 1em; bottom: 1em }

}

Css Gerado

.item {

margin-top: 1em;

margin-bottom: 1em

}

Nesting de propriedade

No Sass é possível extender as regras de outras classes através do @extend.

.box {

display: block;

border: 1px solid gray;

}

.alert {

@extend .box;

color: red;

}

Extend

Será gerado:.box, .alert {

display: block;

border: 1px solid gray;

}

.alert {

color: red;

}

Exemplo: http://sassmeister.com/gist/2234c36162872611e16c

Extend

Em alguns momentos, queremos que seja gerado o css apenas quando utilizamos a extensão. Nesse caso utilizamos os placeholders selectors.

Placeholder selectors

%box {

display: block;

border: 1px solid gray;

}

.alert {

color: red;

}

Placeholder selectors

%box {

display: block;

border: 1px solid gray;

}

.alert {

color: red;

}

Placeholder selectors

.alert {

color: red;

}

%box {

display: block;

border: 1px solid gray;

}

.alert {

@extend %box;

color: red;

}

Placeholder selectors

.alert {

display: block;

border: 1px solid gray

}

.alert {

color: red;

}

Mixins cria uma diretiva, semelhante a uma função, a qual agrupa-se um conjunto de regras a qual você gostaria de reutilizar no site. Para declarar é utilizado @mixin e para utilizar o @include.

Um exemplo clássico é utilizá-lo para adicionar prefixos dos browsers.

mixins

Ex.:@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box { @include border-radius(10px) }

mixins

É possível adicionar valores padrões aos parâmetros. Ex.:@mixin border-radius($radius: 10px) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box { @include border-radius }

mixins

É possível adicionar valores padrões aos parâmetros. Ex.:@mixin border-radius($radius: 10px) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box { @include border-radius }

mixins

$direcao: ‘top’;

.barra-fixa {

position: fixed;

@if $direcao == ‘top’ {

top: 0;

}

@else {

bottom: 0;

}

}

Condicionais - @if

@for $i from 1 through 5 {

.col-#{$i} {

width: ($i * 100%/5);

}

}

.col-1 { width: 20%;}

.col-2 { width: 40%;}

[...]

.col-5 { width: 100%;}

loop - @for

@each $icon in bola, quadrado, triangulo {

.icon#{$icon} {

background: url(‘#{$icon}.jpg’);

}

}

.icon-bola { background: url(‘bola.jpg’);}

.icon-quadrado { background: url(‘quadrado.jpg’);}

.icon-triangulo { background: url(‘triangulo.jpg’);}

loop - @each

$i: 3;

@while $i > 0 {

.h#{$i} {

font-size: #{$i}em;

}

$i: $i - 1;

}

.h3 { font-size: 3em; }

.h2 { font-size: 2em; }

.h1 { font-size: 1em; }

loop - @each

● darken● ligthen● saturate● grayscale

● round● ceil● percentage

funções

Fim

Obrigada!