Você não está conectado. Conecte-se ou registre-se

Power Pixel » Paraíso dos Geeks » Universo dos Desenvolvedores » Tutoriais & Códigos » Conhecendo Sass e Scss

Conhecendo Sass e Scss

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Conhecendo Sass e Scss em Seg 12 Mar 2018 - 19:03

iJhefeX

Membro Platina


avatar
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

Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum