O CSS com Super Poderes! – O que é Sass? – Sintaxes

O que é Sass?

O Sass é uma 'linguagem' desenvolvida para extender o poder do CSS.

Ele é o equivalente ao PHP para o CSS.

Você já vai entender melhor isso! :)

Porque Usar?

O Sass tem diversas funcionalidades interessantes para os desenvolvedores de CSS.

Problemas Solucionados

Já imaginou CSS com variavéis?

Já sonhou com o dia em que escreveria uma function() pra facilitar sua vida nas folhas de estilos?

IF/ELSE???? Loops????

Sim? Então segura!

Sintaxes

O Sass possui dois estilos diferentes de sintaxe:

.sass.scss

.SASS

É a forma clássica de escrita, era o formato default nas primeiras versões.

Não se usam chaves ou ponto-e-vírgula, e é necessário seguir um padrão de identação do código no documento todo, OU ELE NÃO COMPILA.

article
    width: 950px
    margin: 0 auto
    background-color: #F00
header
    width: 100%
    height: 50px
    background-color: blue
						

.SCSS

Nada contra o .sass, mas a sintaxe diferenciada gerava muitos problemas com desenvolvedores inexperientes, ou grandes equipes de desenvolvimento, que usavam editores, e medidas de identação diferentes nos projetos.

Ai surgiu o .scss, com uma sintaxe bastante semelhante ao CSS normal, com chaves, ponto-e-vírgula, e sem regras de identação pra compilar.

article {
    width: 950px;
    margin: 0 auto;
    background-color: #F00;
}
header {
    width: 100%;
    height: 50px;
    background-color: red;
}
						

Instalação

O Sass depende de uma linguagem server-side pra fornecer todas as funcionalidades. Existem algumas formas de se instalar, mas vamos abordar a principal, que usa...

Ruby!

Ruby

O Ruby vem instalado por default no OSX, porém, no windows é necessária a instalação manual, ou, faça mais fácil: Baixe o RubyInstaller.

Bom, após ter o ruby instalado, instalar o Sass é simples:

$ gem install sass

Provavelmente você vai precisar de permissão de superuser no OSX pra instalar, então não esqueça do sudo. :)

Funcionalidades Básicas

• Variavéis
• Nesting
• Extend
• Mixins
• Operações Aritméticas

Variavéis

Só por conta deste recurso, o Sass já valeria muito a pena.

$main-color: #f00;
$grid-gutter: 20px;
$container-width: 100px;

Perceba que vários tipos de valores podem ser armazenados: códigos hexadecimais, unidades de medida, etc.

Nesting

Regra Básica

O Nesting é um recurso que poupa muito tempo dos desenvolvedores, veja abaixo um exemplo comum no dia a dia CSS.

article {
    header, section {
        background-color: blue;
    }
}

article header, article section {
    background-color: blue; 
}
					

Nesting

Symbol Selector

O Nesting permite o uso de todos os seletores disponíveis no CSS.

article {
    + h2     {background: blue;}
    > header {width: 100%;}
    ~ footer {width: 80%;}
}
				


				

article + h2 {
    background-color: blue; 
}
article > header {
    width: 100%;
}
article ~ footer {
    width: 80%;
}

Nesting

Parent Selector

Fazendo referência ao elemento pai.

a {
    display: inline-block;
    color: white;
    background: blue;
        &:hover {
        background: red;
    }
}

a {
    display: inline-block;
    color: white;
    background: blue;
}
a:hover {
    background: red;
}

Nesting

Parent Selector

Adicionando um contexto ao seletor.

article {
    h1 {
        color: blue;
    }
    .red-content & {
        color: red;
    }
}

article h1 {
    color: blue;
}
.red-content article h1 {
    color: red;
}

Extend

O extend é um recurso que possibilita um seletor herdar os estilos de outro.

.button {
    width: 950px;
    margin: 0 auto;
    background-color: blue;
} 
.button-red {
    @extend .button; 
    background-color: red;
}

.button, .button-red {
    width: 950px;
    margin: 0 auto;
    background-color: blue;
} 
.button-red { 
    background-color: red;
}
 

Mixins

Mixins são funções que podem ser reutilizadas em todo o documento. Primeiro se declara o mixin, e depois se invoca no trecho de código onde ele deve ser executado.

// Declarando o Mixin
@mixin hovered {
    text-decoration: none;
    &:hover {
         text-decoration: underline;
    }
}
// Invocando no seletor
nav a {
    color: blue;
    @include hovered;
}

	
nav a {
    color: blue;
    text-decoration: none;
} 
nav a:hover {
    text-decoration: underline;
}

Mixins

// Declarando o Mixin
@mixin border-radius($amount) {
    border-radius: $amount;
    -moz-border-radius: $amount;
    -webkit-border-radius: $amount;
}
// Invocando no seletor
.button {
    color: blue;
    @include border-radius(5px);
}

	
.button {
    color: blue;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Mixins

// Declarando o Mixin
@mixin link($text:blue, $hover:red){
    color: $text;
    &:hover {
         color: $hover;
    }
}
// Invocando no seletor
a {
    @include link($text: green);
}

 
a {
    color: green;
} 
a:hover {
    color: red;
}



 

Operações Aritméticas

5px + 2px //7px
5px - 2px //3px
4px * 2   //8px
6px / 2  //3px
18 % 5   //3

$content: 960px;
$main: 450px;

aside  {
    width: $content - $main;
    height: auto;
}

aside {
    width: 510px;
    height: auto;
}

Funcionalidades Avançadas

• Loop
• IF/ELSE
• Color Functions

Loop

O sass possui suporte a 3 laços de repetição: @for, @each e @while. Abordadermos somente @for por enquanto.

@for $i from 1 through 5 {
    .box#($i){
        width: 100px * $i;
    }
}

.box-1 {width: 100px;}
.box-2 {width: 200px;}
.box-3 {width: 300px;}
.box-4 {width: 400px;}
.box-5 {width: 500px;}

IF/ELSE

IF/ELSE também podem ser utilizados, um exemplo clássico de uso, é sua aplicação dentro de um @mixin.

@mixin box($color) {
    @if ($color == "blue") {
        background: blue;
    }
    @else {
        background: red;
    } 
} 
.box {
    width: 100%;
    height: 50px;
    @include box('green');
    &.azul {
        @include box('blue');
    } 
} 

.box {
    width: 100%;
    height: 50px;
    background: red;
}
.box.azul {
    background: blue;
}					

Color Functions

Utilizando as funções de cor, é possível manipulá-las facilmente.

$red: #f00;

.red {
    background: $red;
}
.dark-red {
    background: darken($red, 20%);
}

.red { 
    background: #f00;
}
.dark-red {
    background: #990;
}