Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Chatbox

    Lembre-se de ler as nossas regras!
    Load More
    You don't have permission to chat.

Recommended Posts

WZgvloa.png

 

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

haze-novo.png

  • Love 2

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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 :D

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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? 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×