Qual é a diferença entre SCSS e Sass?


1903

Pelo que tenho lido, Sass é uma linguagem que torna o CSS mais poderoso com suporte a variáveis ​​e matemática.

Qual a diferença com o SCSS? É para ser o mesmo idioma? Semelhante? Diferente?

Respostas:


1867

O Sass é um pré-processador CSS com aprimoramentos de sintaxe. As folhas de estilo na sintaxe avançada são processadas pelo programa e transformadas em folhas de estilo CSS regulares. No entanto, eles não estendem o próprio padrão CSS.

Variáveis ​​CSS são suportadas e podem ser utilizadas, mas não tão bem como variáveis ​​pré-processador.

Para a diferença entre SCSS e Sass, este texto na página de documentação do Sass deve responder à pergunta:

Existem duas sintaxes disponíveis para o Sass. O primeiro, conhecido como SCSS (CSS Sassy) e usado em toda esta referência, é uma extensão da sintaxe do CSS. Isso significa que toda folha de estilo CSS válida é um arquivo SCSS válido com o mesmo significado. Essa sintaxe é aprimorada com os recursos do Sass descritos abaixo. Os arquivos que usam essa sintaxe possuem a extensão .scss .

A segunda e mais antiga sintaxe , conhecida como sintaxe recuada (ou às vezes apenas "Sass"), fornece uma maneira mais concisa de escrever CSS. Ele usa recuo em vez de colchetes para indicar o aninhamento de seletores e novas linhas em vez de ponto e vírgula para separar propriedades. Os arquivos que usam essa sintaxe possuem a extensão .sass .

No entanto, tudo isso funciona apenas com o pré-compilador Sass, que no final cria CSS. Não é uma extensão do próprio padrão CSS.


229
Ao escolher a sintaxe, tenha em mente que só SCSS permite copiar e colar css de stackoverflow e ferramentas de desenvolvimento dos navegadores, enquanto que em sass você sempre tem que ajustar a sintaxe
espinha de peixe


Outra dica: a partir de 10/05/2019, o SASS ainda não suporta expressões de várias linhas, portanto, listas / mapas grandes precisam ser de uma linha, definidos usando muitas chamadas de função ou definidos em arquivos SCSS. Parece ainda ser um recurso planejado, mas não tenho certeza se há algum movimento na implementação ou ainda não.
Joseph Sikorski

12
@ 0x1ad2 A escolha entre scsse sassé mais do que apenas uma preferência pessoal nos dias de hoje. scssé muito mais prevalente - usado na maioria dos quadros CSS populares como Bootstrap, Foundation, Materializeetc. Os principais frameworks de UI favorecem scssmais sasspor padrão - Angular, reagir, Vue. Quaisquer tutoriais ou demos geralmente usarão, scsspor exemplo, create-react-app facebook.github.io/create-react-app/docs/…
Drenai

@fishbone não é inteiramente verdade, se você usar um editor de código decente, ele pode lidar com estilos copiados de navegadores e reescreve-se a travessão
Miro Krsjak

617

Eu sou um dos desenvolvedores que ajudaram a criar o Sass.

A diferença é interface do usuário. Abaixo do exterior do texto, eles são idênticos. É por isso que os arquivos sass e scss podem se importar. Na verdade, o Sass possui quatro analisadores de sintaxe: scss, sass, CSS e menos. Tudo isso converte uma sintaxe diferente em uma Árvore de Sintaxe Abstrata, que é processada posteriormente na saída CSS ou até em um dos outros formatos através da ferramenta sass-convert.

Use a sintaxe que você mais gosta, ambas são totalmente suportadas e você pode mudar entre elas mais tarde, se mudar de idéia.


55
Com licença? Eu li isso certo? O Sass pode realmente importar menos arquivos corretamente? Existe alguma sinergia entre mixins / variáveis?
Pilau

8
A semelhança com o CSS padrão pode ser mais importante em ambientes de grupo onde existem pessoas que precisam ler seu código, mas apenas ocasionalmente, e elas não têm tempo / interesse para aprender uma sintaxe totalmente nova.
c Roald

5
A "interface do usuário" significa o "idioma"?
djechlin

@ Djechlin - Sim, minha interpretação de "UI" aqui seria a sintaxe do arquivo voltada para o programador. Por exemplo, ponto e vírgula ou não, etc.
orion elenzil

10
A "interface do usuário" na resposta deve ser substituída pelo termo mais comumente entendido, como sugeriu @orionelenzil?
Michael Freidgeim 14/05/19

383

O .sassarquivo Sass é visualmente diferente do .scssarquivo, por exemplo

Example.sass - sass é a sintaxe mais antiga

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css é a nova sintaxe a partir do Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Qualquer documento CSS válido pode ser convertido em Sassy CSS (SCSS) simplesmente alterando a extensão de .csspara .scss.


@Novocaine +1, eu concordo. Como programador de C ++, prefiro colchetes e ponto e vírgula. BTW, eu tenho uma pergunta, a conversão de .scsspara .csso mesmo que .csspara .scss?
precisa saber é

1
Isso é mais do que me interessa comparar com as respostas acima ... Muito preguiçoso para ler ;-)
Lyu

9
@ JW.ZG, não é uma conversão, nativo .cssapenas é válido .scss. Assim que você adicionar código específico ao scss, a alteração do nome do arquivo voltará a ser um arquivo css inválido. cssé um quadrado e scssé um retângulo. Todos os quadrados são retângulos, mas nem todos os retângulos são quadrados.
Grant

145

Sass ( StyleSheets impressionantemente impressionantes ) tem duas sintaxes:

  • uma novidade : SCSS ( CSS atrevido )
  • e uma sintaxe original mais antiga: indent, que é o Sass original e também é chamada de Sass .

Portanto, ambos fazem parte do pré-processador Sass com duas sintaxes possíveis diferentes.

A diferença mais importante entre SCSS e Sass original :

SCSS :

  • A sintaxe é semelhante ao CSS (tanto que todo CSS3 válido regular também é SCSS válido , mas o relacionamento na outra direção obviamente não acontece)

  • Usa chaves {}

  • Usa ponto e vírgula ;
  • O sinal de atribuição é :
  • Para criar um mixin, ele usa a @mixindiretiva
  • Para usar o mixin , precede-o com a @includediretiva
  • Os arquivos têm a extensão .scss .

Sass original :

  • A sintaxe é semelhante ao Ruby
  • Sem chaves
  • Sem recuo estrito
  • Sem ponto e vírgula
  • O sinal de atribuição é em =vez de:
  • Para criar um mixin, ele usa o =sinal
  • Para usar mixin , precede-o com o +sinal
  • Os arquivos têm a extensão .sass .

Alguns preferem o Sass , a sintaxe original - enquanto outros preferem o SCSS . De qualquer maneira, mas vale a pena notar que a sintaxe indentada de Sass não foi e nunca será preterida .

Conversões com sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

A documentação do Sass e do SCSS


14
Estranho que essa resposta clara e concisa tenha menos votos do que outros. Venho pesquisando pilhas de fontes para entender quais são as diferenças entre Sass e Scss e finalmente descobri isso que me esclarece instantaneamente. Bom trabalho, exceto alguns erros de ortografia / gramática.
Tnkh #

3
@TonyNg obrigado. Estou feliz por poder ajudá-lo. Quanto aos pontos, é certo que eu respondi muito tarde - cerca de 6 anos depois de fazer perguntas. Fique à vontade para me corrigir, onde cometi erros ortográficos ou gramaticais.
21717 Simhumileco 6/11

3
Adicione um exemplo simples para mostrar a sintaxe diferente e esta resposta seria perfeita.
Hogan

3
Resposta limpo, impressionante
Hidayt Rahman

3
A grande resposta é essa!
Mohammad Afrashteh

80

Sua sintaxe é diferente, e esse é o principal profissional (ou contra, dependendo da sua perspectiva).

Vou tentar não repetir muito do que os outros disseram, você pode facilmente pesquisar no Google, mas, em vez disso, gostaria de dizer algumas coisas da minha experiência usando os dois, às vezes até no mesmo projeto.

SASS pro

  • mais limpo - se você é do Python, Ruby (você pode até escrever adereços com sintaxe semelhante a um símbolo) ou mesmo do mundo CoffeeScript, isso será muito natural para você - escrever mixins, funções e geralmente qualquer material reutilizável .sassé muito mais fácil 'e legível do que em .scss(subjetivo).

Contras SASS

  • sensível a espaços em branco (subjetivo), não me importo em outras línguas, mas aqui em CSS isso me incomoda (questões: cópia, tabulação versus guerra espacial, etc.).
  • sem regras em linha (isso foi uma quebra de jogo para mim), você não pode fazer o body color: redque pode em .scssbody {color: red}
  • importando outras coisas de fornecedores, copiando trechos de CSS de baunilha - não impossíveis, mas muito chatos depois de algum tempo. A solução é ter .scssarquivos (juntamente com .sassarquivos) em seu projeto ou convertê-los em .sass.

Fora isso - eles fazem o mesmo trabalho.

Agora, o que eu gosto de fazer é escrever mixins e variáveis .sasse código que serão compilados para CSS, .scssse possível (ou seja, o Visual studio não tem suporte, .sassmas sempre que trabalho em projetos Rails, geralmente combino dois deles, não em um arquivo ofc).

Ultimamente, estou pensando em dar uma chance ao Stylus (para um pré-processador CSS em tempo integral), pois permite combinar duas sintaxes em um arquivo (entre outros recursos). Pode não ser uma boa direção para uma equipe, mas quando você a mantém sozinha - tudo bem. A caneta é realmente mais flexível quando a sintaxe está em questão.

E finalmente mixin para comparação de sintaxe .scssvs .sass:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

4
@ cimmanon Apresenta prós e contras, explicitados claramente. Essa é a diferença entre esta e outras respostas. Eu votei para sair do vermelho. Eu pensei que era útil, apesar de ter o diagrama venn usual de resposta que se sobrepõe a qualquer outro post do SO. Isso pode ser mais útil para alguém que está fazendo a escolha nos dois caminhos. Também acho que é um pouco melhor do que a resposta aceita, porque na verdade mostra a diferença do idioma em vez de apenas dizer "Sass é diferente porque não é SCSS", o que para mim é inútil. Eu poderia fazer sem o material de uso pessoal, mas ainda :)
coblr

61

Na página inicial do idioma

Sass tem duas sintaxes. A nova sintaxe principal (a partir do Sass 3) é conhecida como "SCSS" (para "Sassy CSS") e é um superconjunto da sintaxe do CSS3. Isso significa que toda folha de estilo CSS3 válida também é SCSS válida. Os arquivos SCSS usam a extensão .scss.

A segunda sintaxe mais antiga é conhecida como sintaxe recuada (ou apenas "Sass"). Inspirado na discrepância de Haml, é destinado a pessoas que preferem concisão ao invés de semelhança com CSS. Em vez de colchetes e ponto e vírgula, ele usa o recuo das linhas para especificar blocos. Embora não seja mais a sintaxe primária, a sintaxe recuada continuará sendo suportada. Os arquivos na sintaxe recuada usam a extensão .sass.

SASS é uma linguagem interpretada que cospe CSS. A estrutura do Sass parece CSS (remotamente), mas parece-me que a descrição é um pouco enganadora; é não um substituto para CSS, ou uma extensão. É um intérprete que cospe CSS no final, então o Sass ainda tem as limitações do CSS normal, mas as mascara com um código simples.


22

A diferença básica é a sintaxe. Embora o SASS tenha uma sintaxe livre com espaço em branco e sem ponto e vírgula, o SCSS se assemelha mais ao CSS.


21

SASS significa StyleSheets impressionante sintaticamente. É uma extensão do CSS que adiciona poder e elegância à linguagem básica. O SASS foi nomeado recentemente como SCSS com algumas alterações, mas o antigo SASS também está lá. Antes de usar o SCSS ou SASS, consulte a diferença abaixo.

insira a descrição da imagem aqui

Um exemplo de alguma sintaxe SCSS e SASS:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

CSS de saída após a compilação (o mesmo para ambos)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Para mais guia, você pode ver o site oficial .


16

Sass foi o primeiro, e a sintaxe é um pouco diferente. Por exemplo, incluindo um mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignora colchetes e ponto e vírgula e fica no assentamento, o que eu achei mais útil.


13

O artigo Diferença entre SASS e SCSS explica a diferença em detalhes. Não se confunda com as opções SASS e SCSS, embora eu também tenha sido inicialmente. .Cscs é CSS atrevido e é a próxima geração de .sass.

Se isso não fez sentido, você pode ver a diferença no código abaixo.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

No código acima, usamos; para separar as declarações. Eu até adicionei todas as declarações para .border em uma única linha para ilustrar mais esse ponto. Por outro lado, o código SASS abaixo deve estar em linhas diferentes com recuo e não há uso do;.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Você pode ver no CSS abaixo que o estilo SCSS é muito mais semelhante ao CSS comum do que a abordagem mais antiga do SASS.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Eu acho que na maioria das vezes nos dias de hoje, se alguém menciona que está trabalhando com o Sass, está se referindo à criação em .scss, em vez da maneira tradicional .sass.


12

O original sassé semelhante à sintaxe do ruby, semelhante ao ruby, jade, etc.

Nessas sintaxes, não usamos {}, em vez disso, usamos espaços em branco, também sem uso de ;...

As scsssintaxes são mais parecidas CSS, mas com a obtenção de mais opções, como: aninhamento, declaração, etc, similares lesse outros pré-processamento CSS...

Eles basicamente fazer a mesma coisa, mas eu coloquei algumas linhas de cada para ver a diferença de sintaxe, olhar para o {}, ;e spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

6

A resposta compacta:

SCSS refere-se à sintaxe principal suportada pelo pré-processador Sass CSS .

  • Os arquivos que terminam com .scssrepresentam a sintaxe padrão suportada pelo Sass. SCSS é um superconjunto de CSS.
  • Os arquivos que terminam com .sassrepresentam a sintaxe "mais antiga" suportada pelo Sass originária do mundo Ruby.

4

O SASS é um sinteticamente impressionante Style Sheets e é uma extensão do CSS que fornece os recursos de regras aninhadas, herança, Mixins, enquanto o SCSS é o Sassy Cascade Style Style Sheets, semelhante ao CSS e preenche as lacunas e incompatibilidades entre CSS e SASS. Foi licenciado sob a licença MIT. Este artigo tem mais sobre as diferenças: https://www.educba.com/sass-vs-scss/

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.