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.
Você também vai gostar:
Como personalizar o campo Select apenas com CSS Como manipular o visual pelo css no Magento 1.9 REALIDADE E ACEITAÇÃO Como trocar o texto dos links por imagem usando apenas css Como inserir um bloco estático diretamente no PHTML (php) do Magento Como criar um ambiente de trabalho para cirar temas Magento 1.9
Uma resposta