Qual é a diferença entre CSS e SCSS?

Eu conheço CSS muito bem, mas estou confuso sobre Sass. Como o SCSS é diferente do CSS? Se eu usar o SCSS em vez do CSS, ele funcionará da mesma forma?

Além da resposta de Idriss :

CSS

Em CSS, escrevemos o código conforme descrito abaixo, em tamanho real.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

No SCSS, podemos encurtar esse código usando um @mixinpara que não tenhamos que escrever colore widthpropriedades novamente e novamente. Podemos definir isso por meio de uma função, semelhante ao PHP ou outras linguagens.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

No SASS, entretanto, toda a estrutura é visualmente mais rápida e limpa do que no SCSS.

• É sensível a espaços em branco quando você está usando copiar e colar,

• Parece que não suporta CSS embutido atualmente.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

CSS é a linguagem de estilo que qualquer navegador entende para estilizar páginas da web.

SCSS é um tipo especial de arquivo para SASS, um programa escrito em Ruby que reúne CSSfolhas de estilo para um navegador e, para obter informações, SASSadiciona muitas funcionalidades adicionais para CSScomo variáveis, aninhamento e muito mais, o que pode tornar a escrita CSSmais fácil e rápida.
Os arquivos SCSS são processados ​​pelo servidor que executa um aplicativo da web para gerar um tradicional CSSque seu navegador possa entender.

csstem variáveis ​​também. Você pode usá-los assim:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

E isso é menos

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Definições de variáveis ​​certas:

$      => SCSS, SASS
--     => CSS
@      => LESS

Todas as respostas são boas, mas as perguntas são um pouco diferentes das respostas

"sobre Sass. Como o SCSS é diferente do CSS" : scss é uma sintaxe CSS3 bem formada . usa o pré-processador sass para criar isso.

e se eu usar SCSS em vez de CSS, funcionará da mesma forma? sim. se o seu ide suporta o pré-processador sass. do que vai funcionar mesmo.

Sass tem duas sintaxes. A sintaxe mais comumente usada é conhecida como “SCSS” (para “Sassy CSS”) e é um superconjunto da sintaxe CSS3. Isso significa que cada folha de estilo CSS3 válida também é um SCSS válido. Os arquivos SCSS usam a extensão .scss.

A segunda sintaxe mais antiga é conhecida como sintaxe indentada (ou apenas “.sass”). Inspirado pela concisão de Haml, é destinado a pessoas que preferem concisão à semelhança com CSS. Em vez de colchetes e ponto e vírgula, ele usa o recuo de linhas para especificar blocos. Os arquivos na sintaxe indentada usam a extensão .sass.

• Mais informações sobre:

O que é um pré-processador CSS?

CSS em si é desprovido de lógica e funcionalidade complexas que são necessárias para escrever código reutilizável e organizado. Como resultado, um desenvolvedor está sujeito a limitações e enfrentaria extrema dificuldade na manutenção e escalabilidade do código, especialmente ao trabalhar em grandes projetos que envolvem código extenso e várias folhas de estilo CSS. É aqui que os pré-processadores CSS vêm para o resgate.

Um pré-processador CSS é uma ferramenta usada para estender a funcionalidade básica do CSS vanilla padrão por meio de sua própria linguagem de script. Isso nos ajuda a usar sintaxe lógica complexa como - variáveis, funções, mixins, aninhamento de código e herança, para citar alguns, sobrecarregando seu CSS básico. Ao usar pré-processadores CSS, você pode automatizar tarefas simples, criar trechos de código reutilizáveis, evitar repetição e inchaço de código e escrever blocos de código aninhados que são bem organizados e fáceis de ler. No entanto, os navegadores só podem compreender o código CSS nativo vanilla e não serão capazes de interpretar a sintaxe do pré-processador CSS. Portanto, a sintaxe complexa e avançada do pré-processador precisa ser primeiro compilada na sintaxe CSS nativa, que pode então ser interpretada pelos navegadores para evitar problemas de compatibilidade entre navegadores.

Seguindo em frente no artigo, daremos uma olhada nos três pré-processadores CSS mais populares usados ​​atualmente por desenvolvedores em todo o mundo, ou seja, Sass, LESS e Stylus. Antes de decidir o vencedor entre Sass vs LESS vs Stylus, deixe-nos conhecê-los em detalhes primeiro.

Sass - Folhas de estilo sintaticamente impressionantes

Sass é a sigla para “Folhas de estilo sintaticamente impressionantes”. O Sass não é apenas o pré-processador CSS mais popular do mundo, mas também um dos mais antigos, lançado em 2006 por Hampton Catlin e posteriormente desenvolvido por Natalie Weizenbaum. Embora o Sass seja escrito na linguagem Ruby, um LibSass do pré-compilador permite que o Sass seja analisado em outras linguagens e o desacople do Ruby. Sass tem uma enorme comunidade ativa e extensos recursos de aprendizagem disponíveis na rede para iniciantes. Graças à sua maturidade, estabilidade e poderosa habilidade lógica, o Sass se estabeleceu na vanguarda do pré-processador CSS à frente de seus concorrentes.

Sass pode ser escrito em 2 sintaxes usando Sass ou SCSS. Qual é a diferença entre os dois? Vamos descobrir.

Declaração de sintaxe: Sass vs SCSS

• SCSS significa Sassy CSS. Ao contrário do Sass, o SCSS não é baseado em indentação.
• A extensão .sass é usada como sintaxe original para Sass, enquanto SCSS oferece uma sintaxe mais recente com a extensão .scss.
• Ao contrário do Sass, o SCSS tem chaves e ponto e vírgula, assim como o CSS.
• Ao contrário do SCSS, o Sass é difícil de ler, pois é bastante diferente do CSS. É por isso que o SCSS é a sintaxe mais recomendada do Sass, pois é mais fácil de ler e se assemelha ao CSS nativo ao mesmo tempo em que desfruta do poder do Sass.

Considere o exemplo abaixo com Sass vs sintaxe SCSS junto com o código CSS Compilado.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

Em ambos os casos, seja Sass ou SCSS, o código CSS compilado será o mesmo -

#box {
      color: #fff;
      background: #00f;

Uso de Sass

Provavelmente, o Bootstrap do framework de front-end mais popular é escrito em Sass. Até a versão 3, o Bootstrap era escrito em MENOS, mas o bootstrap 4 adotou o Sass e aumentou sua popularidade. Algumas das grandes empresas que usam o Sass são - Zapier, Uber, Airbnb e Kickstarter.

LESS - Folhas de estilo mais enxutas

LESS é um acrônimo para “Folhas de estilo Leaner”. Foi lançado em 2009 por Alexis Sellier, 3 anos após o lançamento inicial do Sass em 2006. Enquanto Sass é escrito em Ruby, LESS é escrito em JavaScript. Na verdade, LESS é uma biblioteca JavaScript que estende a funcionalidade do CSS nativo vanilla com mixins, variáveis, aninhamento e loop de conjunto de regras. Sass vs LESS tem sido um debate acalorado. Não é nenhuma surpresa que o LESS seja o concorrente mais forte do Sass e tenha a segunda maior base de usuários. No entanto, quando o bootstrap descartou o LESS em favor do Sass com o lançamento do Bootstrap 4, a popularidade do LESS diminuiu. Uma das poucas desvantagens do LESS em relação ao Sass é que ele não oferece suporte a funções. Ao contrário do Sass, o LESS usa @ para declarar variáveis ​​que podem causar confusão com @media e @keyframes. Contudo, Uma das principais vantagens do LESS em relação ao Sass e ao Stylus ou a qualquer outro pré-processador é a facilidade de adicioná-lo ao seu projeto. Você pode fazer isso usando o NPM ou incorporando o arquivo Less.js. Declaração de sintaxe: LESS Usa extensão .less. A sintaxe de LESS é bastante semelhante a SCSS, com a exceção de que, para declarar variáveis, em vez do sinal $, LESS usa @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Uso do LESS O popular framework Bootstrap até o lançamento da versão 4 foi escrito em LESS. No entanto, outra estrutura popular chamada SEMANTIC UI ainda está escrita em LESS. Entre as grandes empresas que usam Sass estão - Indiegogo, Patreon e WeChat

Stylus

A caneta foi lançada em 2010 pelo ex-desenvolvedor do Node JS TJ Holowaychuk, quase 4 anos após o lançamento do Sass e 1 ano após o lançamento do LESS. A caneta é escrita em Node JS e se encaixa perfeitamente com a pilha JS. A caneta foi fortemente influenciada pela destreza lógica do Sass e simplicidade do LESS. Embora o Stylus ainda seja popular entre os desenvolvedores do Node JS, ele não conseguiu conquistar uma parte considerável para si mesmo. Uma vantagem do Stylus em relação ao Sass ou LESS é que ele está equipado com funções integradas extremamente poderosas e é capaz de lidar com computação pesada.

Declaração de sintaxe: Stylus usa extensão .styl. O Stylus oferece grande flexibilidade na sintaxe de escrita, suporta CSS nativo e também permite a omissão de colchetes, dois pontos e pontos e vírgulas. Além disso, observe que a Stylus não usa os símbolos @ ou $ para definir variáveis. Em vez disso, a Stylus usa os operadores de atribuição para indicar uma declaração de variável.

STYLUS SYNTAX ESCRITO COMO NATIVE CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

OU

STYLUS SYNTAX SEM COSTAS CURLY

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

OU

STYLUS SYNTAX SEM COLONS E SEMICÓLONS

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color