html/css Conhecendo SASS e SCSS

[iJhefe 395]

 

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:

#main
    color: #ed423f
	font-size: 0.8rem

    a
        font-family: Segoe
	font-weight: bold
        &:hover
            color: lightblue

SCSS:

#main {
    color: #ed423f;
	font-size: 0.8rem;

    a {
        font-family: Segoe;
      	font-weight: bold;
  	  }
        &:hover {
            color: lightblue;
  		}
          
}

Resultado em CSS:

#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

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

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

Breve tutorial pra quem quiser usar o sass: ( by @Luan )

Spoiler

Baixe o Ruby (o que eu uso e recomendo) Clicando AQUI. Baixe a versão recomendada, após isso procure no menu iniciar "Start Command Prompt with Ruby" ou só "Ruby" e procure pelo que é um cmd (Execute como administrador), após executar digite "gem install sass", depois de instalar acesse a pasta do seu arquivo css através do cmd (usando o comando cd ou sei lá como vocês fariam), logo após digite sass --watch (nome do arquivo.sass):(nome do arquivo.css). Exemplo: sass --watch style.sass:style.css (OBS: os dois arquivos devem existir dentro da pasta), depois é só criar seu site de boas, ao salvar (CTRL + C) o arquivo .sass vai ser compilado para o .css automaticamente

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.

Haze Fórum - iJhefe

[Warpp 308]

Hum...
Mas em sua opinião qual seria o melhor??
SASS por não utilizar virgulas etc..
Ou SCSS por ser melhor para se localizar?

curiosidade

[iJhefe 395]

39 minutos atrás, Jumper disse:

Hum...
Mas em sua opinião qual seria o melhor??
SASS por não utilizar virgulas etc..
Ou SCSS por ser melhor para se localizar?

curiosidade

Prefiro utilizar o Scss, mas é mais pelo motivo de o Sass, no Dreamweaver, não aparecer ajuda de Sintaxe e Seletor de Cores

[T0E 810]

Interessante, vou por em prática e utilizar para não esquecer rápido, é bem chato ter que ficar repetindo mesmo, eu não conhecia esses tipos de CSS, adorei!

[iJhefe 395]

25 minutos atrás, T0E disse:

Interessante, vou por em prática e utilizar para não esquecer rápido, é bem chato ter que ficar repetindo mesmo, eu não conhecia esses tipos de CSS, adorei!

Você acha que pq eu faço as coisas de CSS rápido?