Respostas:
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.
scss
e 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
, Materialize
etc. Os principais frameworks de UI favorecem scss
mais sass
por padrão - Angular, reagir, Vue. Quaisquer tutoriais ou demos geralmente usarão, scss
por exemplo, create-react-app
facebook.github.io/create-react-app/docs/…
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 .sass
arquivo Sass é visualmente diferente do .scss
arquivo, por exemplo
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
$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 .css
para .scss
.
.scss
para .css
o mesmo que .css
para .scss
?
.css
apenas é 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.
Sass ( StyleSheets impressionantemente impressionantes ) tem duas sintaxes:
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 {}
;
:
@mixin
diretiva@include
diretivaSass original :
=
vez de:
=
sinal+
sinalAlguns 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
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
.sass
é muito mais fácil 'e legível do que em .scss
(subjetivo).Contras SASS
body color: red
que pode em .scssbody {color: red}
.scss
arquivos (juntamente com .sass
arquivos) 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 .sass
e código que serão compilados para CSS, .scss
se possível (ou seja, o Visual studio não tem suporte, .sass
mas 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 .scss
vs .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
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 scss
sintaxes são mais parecidas CSS
, mas com a obtenção de mais opções, como: aninhamento, declaração, etc, similares less
e 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 .
.scss
representam a sintaxe padrão suportada pelo Sass. SCSS é um superconjunto de CSS..sass
representam 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/