Conhecendo Sass e Scss 12.03.18 19:03
CSS Tutorial: Conhecendo SASS e SCSS
Se você gosta de ficar por dentro do mundo de Desenvolvimento Web, já deve ter ouvido falar em SASS ou SCSS mas não sabia o que era, então aqui trago uma explicação resumida.
SASS, SCSS e LESS são Pré-Processadores e Frameworks de CSS (folha de estilo) que auxiliam a produtividade de códigos, principalmente no quesito de repetição de uma mesma ação, diversas vezes.
Você fica copiando e colando valores no CSS, se perguntando se havia uma forma mais rápida e prática para isso? A resposta é SIM, com esses Pré-Processadores.
Qual a diferença entre eles?
Ambos são sintaxes diferentes do SASS, mas a funcionalidade é a mesma. O Sass era originalmente a sintaxe oficial, mas era um tanto diferente do CSS e atualmente o Scss é a sintaxe oficial por se parecer com o CSS. Vejamos um exemplo de cada:
SASS:
- Código:
#main
color: #ed423f
font-size: 0.8rem
a
font-family: Segoe
font-weight: bold
&:hover
color: lightblue
SCSS:
- Código:
#main {
color: #ed423f;
font-size: 0.8rem;
a {
font-family: Segoe;
font-weight: bold;
}
&:hover {
color: lightblue;
}
}
Resultado em CSS:
- Código:
#main {
color: #ed423f;
font-size: 0.8rem;
}
#main a {
font-family: Segoe;
font-weight: bold;
}
#main:hover {
color: lightblue;
}
Como podemos ver, Sass não apresenta chaves ou ponto e virgula, a regra de separação dele se deve ao espaçamento. Já o Scss, é bem parecido com CSS comum em relação a estrutura.
Uso de variáveis em SCSS e SASS
Para facilitar o trabalho repetitivo, ambos os processadores permitem armazenar variáveis e declara-las livremente, como:
Scss
- Código:
$amarelo: #FFC300;
$roxoEscuro: #581845;
$bordaRoxoE: 1px solid #7F2364;
$font-titulo: 1.5rem;
$font-corpo: 0.8rem;
$cor-corpo: #DCDCDC;
$bg-widget: #3d3;
.widget {
background: $bg-widget;
}
.box {
background: $roxoEscuro;
border: $bordaRoxoE;
}
.box .titulo {
color: $amarelo;
font-size: $font-titulo;
}
.box p {
color: $cor-corpo;
font-size: font-corpo;
}
Quando processado para CSS, as variáveis se transformam no valor das mesmas, por exemplo, $amarelo se transforma em #FFC300.
@mixin e @include Scss
Com @mixin e @include você terá uma maior facilidade para construir códigos longos. O @mixin serve para "habilitar" a class a ser incluída e o @include, para incluir. Exemplo:
- Código:
@mixin widget {
$pretoCorpo-bg: #3d3; //variavel
$shadow: 0px 0px 1px #faf; //variavel
$radius: 4px; //variavel
background: $pretoCorpo-bg;
box-shadow: $shadow;
border-radius: $radius;
}
#widget li {
@include widget;
}
#footer .aba {
@include widget;
}
Isso vai fazer com que as class's receba os valores de widget.
Como utilizar
Para usar Sass ou Scss, é necessário uma IDE que possibilite isso, muitas são encontradas na internet, mas o que eu prefiro utilizar para Dev. Front-End é o Dreamweaver CC 2018, ele vem equipado com um conjunto de ferramentas que facilita a programação front e pré-processadores não poderiam estar de fora.
Lembrando que os arquivos .scss e .sass, são transformados em .css com o mesmo nome*, ou seja, você deverá linkar em seu projeto o arquivo .css gerado.
Em caso de dúvidas, comente.
iJhefe
