O que é Sass?

Sass

Se você programa bastante com CSS, um pré-compilador de CSS pode economizar muito o seu tempo. O uso de ferramentas como Sass, Less, Stylus ou PostCSS tornam folhas de estilo grandes e complicadas mais claras para serem entendidas e mais fáceis de manter. Graças a recursos como variáveis, funções e mixins (classes), o código se torna mais organizado, permitindo aos desenvolvedores trabalhar mais rápido e cometer menos erros. Mas afinal o que é Sass? Vejamos a seguir:

Detalhando o Sass

Os arquivos Sass não podem ser interpretados pelo navegador, portanto, eles precisam ser compilados no CSS padrão antes de estarem prontos para acessar a Web. É por isso que se precisa de algum tipo de ferramenta para ajudá-lo a traduzir arquivos .scss para .css. Abaixo algumas opções:

  • A solução mais simples é uma ferramenta de navegação para escrever e compilar o Sass na hora chamada SassMeister.
  • Usar um aplicativo de desktop de terceiros. Por exemplo o “node-sass”.
  • Outra opção é instalar o Sass no seu computador e compilar arquivos manualmente.

Se você decidir ir com a linha de comando, você pode instalar o Sass em sua forma original (escrito em ruby) ou mais simples via Node.js (nossa escolha). Mas lembre-se, há várias outras opções inclusive compiladores em run-time escritos em C.

O segmento abaixo exemplifica o uso via node-sass:

node-sass arquivo_de_entrada.scss arquivo_de_saida.css

Além disso, é importante dizer que o Sass oferece duas sintaxes distintas – Sass e SCSS. Ambos fazem as mesmas coisas, apenas são escritos de maneiras diferentes. SCSS é o mais novo e geralmente é considerado melhor, falaremos mais sobre ele portanto.

Fazendo uso de variáveis

As variáveis no Sass funcionam de maneira semelhante a qualquer linguagem de programação, incluindo os principais, como tipos de dados e escopo. Quando definimos uma variável, armazenamos dentro dela um certo valor, que geralmente é algo que freqüentemente se repete no CSS como uma cor de paleta, uma pilha de fontes ou toda a especificação de uma sombra de caixa legal.

Abaixo um exemplo simples. Compare o código SCSS e na sequência o resultado em CSS.

SCSS
$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
CSS
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

A ideia mais básica por trás de tudo isso é que podemos reutilizar valores e definições e diversas partes da folha de estilo e inclusive quando em outros arquivos, ou se uma mudança for necessária, podemos fornecer o novo valor em apenas um lugar (a definição da variável), em vez de aplicá-lo manualmente em todos os lugares está usando essa propriedade.

Mixins

Podemos pensar em mixins como uma versão simplificada de classes construtoras em linguagens de programação – pode-se pegar um grupo inteiro de declarações CSS e reutilizá-las onde quer que se queira dar e com isso criar um conjunto específico de estilos.

Os mixins podem até aceitar argumentos com a opção de definir valores padrão. No exemplo abaixo definimos um mixin quadrado, e então o usamos para criar quadrados de tamanhos e cores variados.

SCSS
@mixin quadrado($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.quadrado-pequeno {
  @include quadrado(20px, rgb(0,0,255));
}

.quadrado-grande {
  @include quadrado(300px, rgb(255,0,0));
}
CSS
.quadrado-pequeno {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.quadrado-grande {
  width: 300px;
  height: 300px;
  background-color: red;
}

Outra maneira eficiente de usar mixins é quando uma propriedade requer prefixos para funcionar em todos os navegadores.

SCSS
@mixin inclina() {
  $inclinacao: rotate(15deg);

  -webkit-transform: $inclinacao; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $inclinacao; /* IE 9 */
          transform: $inclinacao; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include inclina; 
}
CSS
.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

Estendendo

Um recurso poderoso é código>@extend, que permite herdar as propriedades CSS de um seletor para outro. Isso funciona de maneira semelhante ao sistema mixins, mas é preferível quando queremos criar uma conexão lógica entre os elementos em uma página.

A extensão deve ser usada quando precisamos de elementos de estilo similar, que ainda diferem em alguns detalhes. Por exemplo, vejamos uma folha de estilo com duas classes – uma de confirmação e outra de cancelamento:

SCSS
.botao-alerta {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}
.confirma {
  @extend .botao-alerta;
  background-color: #87bae1;
  float: left;
}

.cancela {
  @extend .botao-alerta;
  background-color: #e4749e;
  float: right;
}
CSS
.botao-alerta, .confirma, .cancela {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirma {
  background-color: #87bae1;
  float: left; 
}

.cancela {
  background-color: #e4749e;
  float: right; 
}

Se verificar atentamente a versão CSS do código, verá que o Sass combinou os seletores em vez de repetir as mesmas declarações repetidas vezes, desta formaa poupando uma memória que pode ser preciosa.

Aninhamento

O HTML segue uma estrita estrutura de aninhamento, enquanto no CSS é geralmente um caos total. Com o aninhamento Sass, você pode organizar sua folha de estilo de maneira mais semelhante ao HTML, reduzindo assim a chance de conflitos de CSS.

Para um exemplo rápido, vamos estilizar uma lista contendo vários links:

SCSS
ul {
  list-style: none;
  li {
    padding: 15px;
    display: inline-block;
    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }
  }
}
CSS
ul {
  list-style: none; 
}
ul li {
  padding: 15px;
  display: inline-block; 
}
ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

Operações

Com o Sass pode-se fazer operações matemáticas básicas diretamente na folha de estilo e é tão simples quanto aplicar o símbolo aritmético apropriado.

SCSS
$width:300px;
.bloco { 
  width: $width;
}
.meia-coluna {
  width: $width/2;
}
.quinta-coluna {
  width: $width/5;
}
CSS
.bloco {
  width: 300px; 
}
.meia-coluna {
  width: 150px; 
}
.quinta-coluna {
  width: 60px; 
}

Embora o CSS3 também ofereça esse recurso na forma de calc(), a alternativa Sass é mais rápida de escrever, tem a operação módulo (%) e pode ser aplicada a uma faixa mais ampla de tipos de dados (por exemplo, cores e strings).

Funções

Sass oferece uma longa lista de funções internas. Elas servem para todos os tipos de propósitos, incluindo manipulação de strings, operações relacionadas à cor e alguns métodos matemáticos úteis, como random() e round().

No exemplo abaixo, é utilizada a função “darken” para escurecer a cor em exatos 10%:

SCSS
$fonte-azul: #2196F3;
a {
  padding: 10px 15px;
  background-color: $fonte-azul;
}
a:hover {
  background-color: darken($fonte-azul,10%);
}
CSS
a {
  padding: 10px 15px;
  background-color: #2196F3; 
}
a:hover {
  background-color: #0c7cd5; 
}

Abaixo uma lista das principais funções:

  • rgb($red, $green, $blue)
  • rgba($red, $green, $blue, $alpha)
  • red($color)
  • green($color)
  • blue($color)
  • mix($color1, $color2, [$weight])
  • hsl($hue, $saturation, $lightness)
  • hsla($hue, $saturation, $lightness, $alpha)
  • hue($color)
  • saturation($color)
  • lightness($color)
  • adjust-hue($color, $degrees)
  • lighten($color, $amount)
  • darken($color, $amount)
  • saturate($color, $amount)
  • desaturate($color, $amount)
  • grayscale($color)
  • complement($color)
  • invert($color, [$weight])
  • alpha($color)
  • opacity($color)
  • rgba($color, $alpha)
  • opacify($color, $amount)
  • fade-in($color, $amount)
  • transparentize($color, $amount)
  • fade-out($color, $amount)
  • adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
  • scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
  • change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
  • ie-hex-str($color)
  • unquote($string)
  • quote($string)
  • str-length($string)
  • str-insert($string, $insert, $index)
  • str-index($string, $substring)
  • str-slice($string, $start-at, [$end-at])
  • to-upper-case($string)
  • to-lower-case($string)
  • percentage($number)
  • round($number)
  • ceil($number)
  • floor($number)
  • abs($number)
  • min($numbers…)
  • max($numbers…)
  • random()
  • length($list)
  • nth($list, $n)
  • join($list1, $list2, [$separator, $bracketed])
  • append($list1, $val, [$separator])
  • zip($lists…)
  • index($list, $value)
  • list-separator($list)
  • is-bracketed($list)
  • map-get($map, $key)
  • map-merge($map1, $map2)
  • map-remove($map, $keys…)
  • map-keys($map)
  • map-values($map)
  • map-has-key($map, $key)
  • keywords($args)
  • selector-nest($selectors…)
  • selector-append($selectors…)
  • selector-extend($selector, $extendee, $extender)
  • selector-replace($selector, $original, $replacement)
  • selector-unify($selector1, $selector2)
  • is-superselector($super, $sub)
  • simple-selectors($selector)
  • selector-parse($selector)
  • feature-exists($feature)
  • variable-exists($name)
  • global-variable-exists($name)
  • function-exists($name)
  • mixin-exists($name)
  • content-exists()
  • inspect($value)
  • type-of($value)
  • unit($number)
  • unitless($number)
  • comparable($number1, $number2)
  • call($function, $args…)
  • get-function($name, $css: false)
  • if($condition, $if-true, $if-false)
  • unique-id()

Conclusão

Alguns dos recursos acima estarão disponíveis nativamente no CSS em breve. Enquanto isso, os pré-processadores são uma ótima maneira de melhorar a experiência de criação de CSS e o Sass é uma opção sólida e bem documentada para se optar.

*** A OctalMind é uma empresa especializada no desenvolvimento de sistemas de alta tecnologia.