Qual é a diferença entre SCSS e Sass?

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?

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.

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.

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.

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

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

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.

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.

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.

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 .

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.

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.

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;
}

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.

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/