main

CSS dinâmico com SASS

É uma linguagem de script que é interpretado em CSS. SASS consiste em duas sintaxes.
A sintaxe original, chamado de Indented Syntax. Ele usa recuo para separar blocos de código e quebra de linha para especificar blocos.

A nova sintaxe, SCSS usa a formatação de blocos como a de CSS. Ele usa chaves para marcar blocos de código e ponto vírgula para separar linhas dentro de um bloco.
A sintaxe recuado e arquivo SCSS são dadas as extensões .sass e .scss respectivamente.

O compilador do SASS, o SassScript interpreta o código em CSS. O arquivo sass ou .SCSS terá como saída um arquivo CSS.

A implementação oficial do SASS é open-source e codificados em Rubi. SASS suporta a integração com o Firefox extensão Firebug.

SassScript fornece os seguintes mecanismos: variáveis, nesting, mixins e seletor de herança.

Variáveis

SASS permite a utilização de variáveis.
SassScript suporta quatro tipos de dados: Numbers, Strings, Colors, Boolean

Em SCSS

                        $blue: #3bbfce;

                        $margin: 16px;



                        .content-navigation {

                          border-color: $blue;

                          color:

                            darken($blue, 9%);

                        }



                        .border {

                          padding: $margin / 2;

                          margin: $margin / 2;

                          border-color: $blue;

                        }           

                    

Ou estilo SASS

                        $blue: #3bbfce

                        $margin: 16px



                        .content-navigation

                          border-color: $blue

                          color: darken($blue, 9%)



                        .border

                          padding: $margin / 2

                          margin: $margin / 2

                          border-color: $blue        

                    

saída em CSS

                        /* CSS */



                        .content-navigation {

                          border-color: #3bbfce;

                          color: #2b9eab;

                        }



                        .border {

                          padding: 8px;

                          margin: 8px;

                          border-color: #3bbfce;

                        }        

                    

Nesting

Evita a repetição de seletores dentro da sua estrutura de código

Em SCSS

                        table.hl {

                          margin: 2em 0;

                          td.ln {

                            text-align: right;

                          }

                        }



                        li {

                          font: {

                            family: serif;

                            weight: bold;

                            size: 1.2em;

                          }

                        }         

                    

Ou estilo SASS

                        table.hl

                          margin: 2em 0

                          td.ln

                            text-align: right



                        li

                          font:

                            family: serif

                            weight: bold

                            size: 1.2em      

                    

saída em CSS

                        /* CSS */



                        table.hl {

                          margin: 2em 0;

                        }

                        table.hl td.ln {

                          text-align: right;

                        }



                        li {

                          font-family: serif;

                          font-weight: bold;

                          font-size: 1.2em;

                        }      

                    

Mixins

Ainda mais útil do que variáveis, mixins permitem que você re-utilizar pedaços inteiros de CSS, as propriedades ou seletores. Você pode até mesmo dar-lhes argumentos.

Em SCSS

                        @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;

                        }        

                    

Ou estilo SASS

                        @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      

                    

saída em CSS

                        /* CSS */



                        #data {

                          float: left;

                          margin-left: 10px;

                        }

                        #data th {

                          text-align: center;

                          font-weight: bold;

                        }

                        #data td, #data th {

                          padding: 2px;

                        }     

                    

Selector Inheritance

Sass pode dizer um seletor para herdar todos os estilos de outro sem duplicar as propriedades CSS.

Em SCSS

                        .error {

                          border: 1px #f00;

                          background: #fdd;

                        }

                        .error.intrusion {

                          font-size: 1.3em;

                          font-weight: bold;

                        }



                        .badError {

                          @extend .error;

                          border-width: 3px;

                        }    

                    

Ou estilo SASS

                        .error

                          border: 1px #f00

                          background: #fdd



                        .error.intrusion

                          font-size: 1.3em

                          font-weight: bold



                        .badError

                          @extend .error

                          border-width: 3px    

                    

saída em CSS

                        /* CSS */



                        .error, .badError {

                          border: 1px #f00;

                          background: #fdd;

                        }



                        .error.intrusion,

                        .badError.intrusion {

                          font-size: 1.3em;

                          font-weight: bold;

                        }



                        .badError {

                          border-width: 3px;

                        }     

                    




Veja também: