O que é SASS e quais suas vantagens para edição de CSS

SASS é uma linguagem de extensão ao CSS que dá um controle mais profissional e dinâmico para suas folhas de estilo, utilizado como um framework para compor o design de uma página.

O CSS você já conhece, folhas de estilos baseadas em tags HTML,id e classes, sua sintaxe é bem simples e fácil de entender, mas tanta simplicidade, mas falta dinamismo por exemplo para construir padrões mais complexos ou evitar repetições ao longo da folha. Para resolver este problema existe o SASS, uma poderosa extensão da linguagem CSS que permite uma escrita profissional e completa escrevendo nossas folhas de estilo de forma muito mais dinâmica e produtiva. Compatível com todas as versões do CSS e é utilizada pelo tema padrão do Magento a partir da versão 1.9, você escreve sua folha de estilo em SASS e utiliza um conversor para o CSS padrão, a extensão utilizada passa a ser o .scss e um compilador para transformar o scss em css, assim podemos deixar nosso arquivo CSS sempre compacto melhorando ainda mais o desempenho das páginas.

SASS também é utilizado para editar o css baseado no tema padrão do Magento 1.9.

Veja algumas vantagens

Crie variáveis como em uma linguagem de programação

É possível criar variáveis como numa linguagem de programação, podemos assim definir nossa paleta de cores em um único lugar, bem como padrão de fontes, bordas, sombras e muito mais, no exemplo abaixo eu crio uma variável que contém a cor azul e utilizo esta variável na folha de estilo.

SCSS:

$c-blue: #06F
a {
   color: $c-blue;
}
button {
   background-color: $c-blue
}

Resultado CSS:

a {
   color: #06F;
}
button {
   background-color: #06F;
}

Classes aninhadas

Você sabe como funciona a hierarquia dentro do arquivo CSS, com o SASS vamos um passo além com o poder poder de aninhar nossas regras, dessa forma fica muito mais intuitivo visualizar essa hierarquia

SCSS

nav {
   display: block;
   li {
      display: inline-block;
      position: relative
      a {
         display: block;
         padding: 5px;
         text-decoration: none;
      }
      ul {
         display: none;
         position: absolute;
         tob: 100%;
      }
   }
}

Com o código acima as tags ul dentro de li que estão dentro de nav terão um comportamento diferenciado, veja como fica esse código no CSS:

nav {
   display: block;
}
nav li {
   display: inline-block;
   position: relative
}
nav li a {
   display: block;
   padding: 5px;
   text-decoration: none;
}
nav li ul {
   display: none;
   position: absolute;
   top: 100%;
}

Arquivos em partes

Ao invés de colocar todo conteúdo em um único arquivo podemos dividi-lo em vários utilizando uma underline na frente do arquivo para sinalizar que ele é parte de outro arquivo, por exemplo _reset.scss, este recurso tem várias aplicações práticas, por exemplo podemos criar nosso arquivo padrão de restet, outro arquivo para configuração de formulários, menus, slideshow e assim por diante

Importar

Se podemos quebrar nosso arquivo em várias partes, então podemos importar vários arquivos, fica assim

SCSS

// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

/* base.scss */
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

Mixin é um trecho de código reaproveitável, tem uma sintaxe parecida com a de uma função em java script, declaramos com o @mixin, atribuimos um nome e podemos passar parâmetros, recurso muito útil e prático que vai te ajudar a não repetir o mesmo código pelo seu arquivo de css

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

O código acima cria uma função para deixar o border-radius compatível para mais versões de navegadores
o resultado dessa função é o seguinte:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Estender regras

Podemos aproveitar regras já criadas e usar um @extend para herdar as propriedades de outra regra CSS, dessa maneira

SCSS

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

O que o código acima faz é aplicar as propriedades de .message para as outras classes o resultado você vê abaixo:

CSS

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

Operações matemáticas

Chega de ficar quebrando a cabeça para calcular a largura ideal em porcentagem com SASS podemos inserir operadores matemáticos +,-, *, / e % pra  facilitar nossa vida, por exemplo para criar um layout com duas colunas:

SCSS

.container { max-width: 960px; }
.conteudo {
  float: left;
  width: 600px / 960px * 100%;
}
.coluna {
  float: right;
  width: 300px / 960px * 100%;
}

Com este código definimos o container com uma largura máxima de 960px, a coluna .conteudo terá um valor proporcional a 600px enquanto .coluna será proporcional a 300px, o CSS fica assim

SCSS

.container {
  max-width: 100%;
}
.conteudo {
  float: left;
  width: 62.5%;
}
.coluna {
  float: right;
  width: 31.25%;
}

Com o SASS é possível deixar o trabalho de criação de folhas de estilo mais dinâmico, profissional e rápido. Com a ajuda de um compilador deixamos nosso arquivo css sempre compactado melhorando o desempenho do site por carregar folhas de estilo mais leves e de quebra ainda deixa nossa área de trabalho mais organizada por permitir dividir o arquivo em várias partes distintas, realmente para um ambiente de produção o SASS faz muita diferença.

Caso tenha gostado deste artigo compartilhe para que possa trazer mais artigos como este.

Um abraço.