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

magento.sass

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 nos força a fazer uma folha de estilo por vezes redundante e muito longa. 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

@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:

SCSS

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

Um abraço.

2017-01-24T20:23:36+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x