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ódigoEm 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; }