Introdução a Sass

Uma nova forma de escrever CSS

Gabriel Medina

Front-end Developer

github.com/gabrielmedina

Tecnologia em Análise e Desenvolvimento de Sistemas no Instituto Federal de Mato Grosso do Sul (IFMS)

Front-end Developer na Agência W3Case

sass-lang.com

Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos.

Thaiana Poplade

http://tableless.com.br/sass-um-outro-metodo-de-escrever-css/

Sass

Syntactically Awesome StyleSheets

Folhas de estilo sintaticamente impressionantes

Sass é uma gem do Ruby. Funciona como uma extensão das CSS que adiciona potência e elegância para a linguagem básica.

Permite que você use variáveis, regras aninhadas, mixins, heranças, e muito mais, tudo com uma sintaxe totalmente compatível com CSS.

Sass

Instalação

Caso possua o Ruby instalado

gem install sass

Sass para Windows, Linux ou Mac.

sass-lang.com/install

Sass

Como utilizar?

Existem duas formas de codificar utilizando o Sass, são elas:

SCSS - Sassy CSS

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

Indented Sass

h1
    color: #fff
    background: #999

style.scss

style.sass

Sass

Como utilizar?

Compilando o arquivo

sass estilos.scss:estilos.css

Comando de observação

sass --watch estilos.scss:estilos.css

Sass

Estilo de saída

Embora o estilo de saída gerado pelo Sass seja muito bom, gostos e necessidades variam, sendo assim, Sass permite que você escolha entre quatro estilos de saída.

Para definir o estilo de saída desejado, basta utilizar a flag --style.

sass estilos.scss:estilos.css --style opção

Sass

Estilo de saída

É o estilo de saída padrão gerado pelo Sass. Reflete a arquitetura de um documento Web, o famoso DOM (Document Object Model), fazendo com que cada propriedade e valor ocupem uma linha e as regras recuem de acordo com o DOM.

Aninhado (nested)

Sass

Estilo de saída

Aninhado (nested)

sass estilos.scss:estilos.css

sass estilos.scss:estilos.css --style nested

Sass

Estilo de saída

É o estilo de saída que mais se assemelha ao feito pelo homem. Cada propriedade e valor ocupam uma linha, e as regras não sofrem recuos, como no estilo aninhado.

Expandido (expanded)

sass estilos.scss:estilos.css --style expanded

Sass

Estilo de saída

É um estilo de saída que se preocupa com a compactação. Faz com que cada regra ocupe uma linha.

Compacto (compact)

sass estilos.scss:estilos.css --style compact

Sass

Estilo de saída

É o estilo de saída recomendado para produção. Faz com que a saída ocupe o mínimo de espaço possível, retirando todos os espaços em branco permitidos.

Comprimido (compressed)

sass estilos.scss:estilos.css --style compressed

Sass

Comentários

Sass aceita comentário de várias linhas /**/, bem como os de única //

// Comentário

/*
 * Comentário
 */

Sass

Sass permite que as regras sejam aninhadas.

Regras aninhadas

nav {
    background: blue;

    ul {
        list-style: none;

        li {
            display: inline-block;
    
            a {
                display: block;
            }
        }
    }
}

Sass

Saída gerada pelo Sass

Regras aninhadas

nav {
    background: blue;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    display: block;
}

nav {
    background: blue;

    ul {
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
    }
}

Sass

Use o aninhamento com consciência!

Regras aninhadas

Sass

Saída gerada pelo Sass

Regras aninhadas

nav {
    background: blue;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline-block;
}
    
nav a {
    display: block;
}

Sass

Utilizar pseudo-elementos ficou mais simples, basta utilizar o &: de forma aninhada.

pseudo-elementos

nav {
    background: blue;

    ul {
        list-style: none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;

        &:hover {
            color: red;
        }
    }
}

Sass

Saída gerada pelo Sass

pseudo-elementos

nav {
    background: blue;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
}

nav a:hover {
    color: red;
}

Sass

São definidas de forma simples e podem ser reutilizadas.

Variáveis

$width: 100%;
$height: 40px;

header {
    width: $width;
    height: $height;
}

$background: #FFF;
$text: #444;

section {
    color: $text;
    background: $background;
}

Sass

Sass permite realizarmos algumas operações.

Operações

$x: 100px;
$y: 200px;

article {
    width: $x + $y; // 300px
    heigth: $y - 150px; // 50px
    
    margin: $x / 20px; // 20px
    padding: ($x / 50px) * 5px; // 10px
}

Sass

Import

Permitir a importação de vários arquivos Sass. Seu diferencial, quanto ao import das CSS é a unificação, compactando todas folhas em apenas um arquivo de saída.

@import "variables";

section {
    width: $width;
    height: $height;

    color: $color;
    font-size: $size;
}

Sass

Import

Que tal um arquivo mestre, contendo todos os imports.

@import "reset";

@import "variables";

@import "default";
@import "header";

@import "buttons";
@import "forms";
@import "lists";
@import "tables";
@import "messages";

@import "footer";

Sass

Permite que uma classe estenda um conjunto de propriedades definidas em outra classe, ou seja, herança de propriedades.

Herança (extend)

@import "variables";

.btn {
    display: inline-block;
    
    color: $text-default;
    font-size: 1.4em;

    padding: 10px 20px;    

    background: $background-default;
}

.btn-success {
    @extend .btn;
    
    color: $text-success;
    background: $background-success;
}

.btn-danger {
    @extend .btn;

    color: $text-danger;
    background: $background-danger;
}

Sass

Caso precise somente estender algumas propriedades, sem que a class ou id permaneça no arquivo de saída, basta utilizar o placeholder selector (seletores de espaço reservado).

Herança (extend)

@import "variables";

%btn {
    display: inline-block;
    
    color: $text-default;
    font-size: 1.4em;

    padding: 10px 20px;    

    background: $background-default;
}

.btn-success {
    @extend %btn;
    
    color: $text-success;
    background: $background-success;
}

.btn-danger {
    @extend %btn;

    color: $text-danger;
    background: $background-danger;
}

Sass

Permitem definir estilos que podem ser reutilizados em toda a folha de estilo, sem a necessidade de declararmos todas as propriedades novamente.

Mixins

@mixin clearfix {
    display: inline-block;
    
    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    * html & { height: 1px }
}

Sass

Utilizando o mixin declarado em uma regra

Mixins

header {
    @include clearfix;

    background: red;
}

Sass

Declarando um mixin com parâmetros

Mixins

@mixin transition($property, $duration, $timing, $delay){
    transition: $property $duration $timing $delay;

    -webkit-transition: $property $duration $timing $delay;
    -moz-transition: $property $duration $timing $delay;
    -ms-transition: $property $duration $timing $delay;
    -o-transition: $property $duration $timing $delay;
}

Sass

Utilizando o mixin declarado

Mixins

nav {
    a {
        @include transition(background, .2s, ease, 1s);
    }
}

Sass

Declarando um mixin com parâmetros, de uma forma mais eficiente.

Mixins

@mixin transition($properties){
    transition: $properties;

    -webkit-transition: $properties;
    -moz-transition: $properties;
    -ms-transition: $properties;
    -o-transition: $properties;
}

Sass

Utilizando o mixin declarado

Mixins

nav {
    a {
        @include transition(.2s ease);
    }
}

.pagination {
    a {
        @include transition(background .2s ease);
    }
}

Gabriel Medina

github.com/gabrielmedina

Obrigado!

Bibliografia

Documentação oficial do Sass (última consulta em 2014)

http://sass-lang.com/documentation

Sass - Um outro método de escrever CSS (última consulta em 2014)

http://tableless.com.br/sass-um-outro-metodo-de-escrever-css