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.
Uma resposta