Compartilhe
Ir em baixo
avatar
Membro Platina

Titulo : Create a new...
Registro : 25/11/2014
Mensagens : 2071
Reputação : 173

Ver perfil do usuário

Conhecendo Sass e Scss

em Seg 12 Mar 2018 - 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
Voltar ao Topo
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum