59

Tenho lido sobre SASS há algum tempo e ele fornece um poderoso conjunto de funcionalidades para o CSS como variáveis, mixins e afins.

E ao mesmo tempo vejo o termo SCSS. Qual a diferença entre ambos? São a mesma coisa e possuem as mesmas funcionalidades e apenas recebem nomes diferentes em alguns casos? Ou são coisas diferentes?

3 Respostas 3

81

São duas sintaxes diferentes do SASS com as mesmas funcionalidades. O SASS era originalmente a sintaxe oficial e ela é um pouco diferente da sintaxe do CSS, sem chaves e pontos e virgulas. A sintaxe SCSS agora é a oficial e é mais parecida com a sintaxe do CSS. Na prática a escolha entre as duas é uma questão de gosto. Olhe abaixo um exemplo da sintaxe SASS e outro da sintaxe SCSS

Exemplo da Sintaxe SASS:

#main
    color: blue
    font-size: 0.3em

    a
        font:
            weight: bold
            family: serif
        &:hover
            background-color: #eee

Exemplo da Sintaxe SCSS:

#main {
    color: blue;
    font-size: 0.3em;

    a {
        font: {
            weight: bold;
            family: serif;
        }
        &:hover {
            background-color: #eee;
        }
    }
}

Esses códigos são na realidade a mesma coisa só que em sintaxes diferentes. Perceba que usando SASS o que conta é a identação, não existem chaves nem pontos e virgulas. Já usando SCSS tudo fica muito parecido com CSS, você tem chaves e pontos e virgulas. Mas perceba que as funcionalidades do SASS como nesting existem nas duas sintaxes.

1
  • 1
    Muito obrigado, agora ficou claro.
    – user22743
    Commented 15/03/2015 às 23:01
2

O SCSS é uma versão mais moderna e deve ser utilizada caso você esteja iniciando um novo projeto.

A grande vantagem do SCSS é que é compatível com o CSS, portanto se você já tiver um arquivo CSS funcionando, basta usá-lo como base. Assim você pode ir usando aos poucos os recursos do SCSS que deseja. Fica muito mais fácil adaptar um design/template que alguém tenha feito para você.

A linguagem SASS parece ser mais limpa e clara, mas a compatibilidade é uma feature mais importante.

-3

Etre SASS e SCSS, a segunda é mais moderna. Entretado a diferença entre elas é bem pequena, ambas são um superset de CSS. Eventualmente algumas das características serão incorporadas ao CSS no futuro.

Ambas possuem a mesma estrutura interna. SASS possui uma sintaxe mais parecida com Python e HAML, SCSS é mais parecida com Ruby e CSS. SCSS é a forma "nova" e mais utilizada atualmente.

1
  • 3
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 28/11/2022 às 18:10

Você deve fazer log-in para responder a esta pergunta.