Qual è la differenza tra CSS e SCSS?

Conosco molto bene i CSS, ma sono confuso su Sass. In che modo SCSS è diverso da CSS e se utilizzo SCSS invece di CSS funzionerà allo stesso modo?

Oltre alla risposta di Idriss :

CSS

In CSS scriviamo il codice come illustrato di seguito, per intero.

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

SCSS

In SCSS possiamo abbreviare questo codice usando a @mixincosì non dobbiamo scrivere colore widthproprietà ancora e ancora. Possiamo definirlo tramite una funzione, in modo simile a PHP o ad altri linguaggi.

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

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

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

SASS

In SASS, tuttavia, l'intera struttura è visivamente più rapida e pulita di SCSS.

• È sensibile allo spazio bianco quando si utilizza copia e incolla,

• Sembra che attualmente non supporti CSS in linea.

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

CSS è il linguaggio di stile che qualsiasi browser comprende per definire lo stile delle pagine web.

SCSS è un tipo speciale di file per SASS, un programma scritto in Ruby che assembla CSSfogli di stile per un browser e, per informazioni, SASSaggiunge molte funzionalità aggiuntive a CSSvariabili simili, annidamenti e altro che possono rendere la scrittura CSSpiù facile e veloce.
I file SCSS vengono elaborati dal server che esegue un'app Web per produrre un output tradizionale CSSche il browser può comprendere.

cssha anche variabili. Puoi usarli in questo modo:

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

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

E questo è meno

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

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

Definizioni variabili a destra:

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

Tutte le risposte sono buone ma la domanda è leggermente diversa dalle risposte

"su Sass. In che modo SCSS è diverso da CSS" : scss è una sintassi CSS3 ben strutturata . usa il preprocessore sass per crearlo.

e se uso SCSS invece di CSS funzionerà allo stesso modo? sì. se il tuo ide supporta il preprocessore sass. di quanto funzionerà lo stesso.

Sass ha due sintassi. La sintassi più comunemente utilizzata è nota come "SCSS" (per "Sassy CSS") ed è un superset della sintassi CSS3. Ciò significa che ogni foglio di stile CSS3 valido è anche SCSS valido. I file SCSS utilizzano l'estensione .scss.

La seconda sintassi più vecchia è nota come sintassi rientrata (o semplicemente ".sass"). Ispirato dalla concisione di Haml, è destinato a persone che preferiscono la concisione alla somiglianza con i CSS. Invece di parentesi e punto e virgola, utilizza il rientro delle righe per specificare i blocchi. I file nella sintassi rientrata utilizzano l'estensione .sass.

• Ulteriori informazioni su:

Che cos'è un preprocessore CSS?

Il CSS di per sé è privo di logica e funzionalità complesse necessarie per scrivere codice riutilizzabile e organizzato. Di conseguenza, uno sviluppatore è vincolato da limitazioni e affronterebbe un'estrema difficoltà nella manutenzione del codice e nella scalabilità, specialmente quando lavora su grandi progetti che coinvolgono codice esteso e più fogli di stile CSS. È qui che i preprocessori CSS vengono in soccorso.

Un preprocessore CSS è uno strumento utilizzato per estendere le funzionalità di base del vanilla CSS predefinito attraverso il proprio linguaggio di scripting. Ci aiuta a usare una sintassi logica complessa come: variabili, funzioni, mixin, annidamento del codice ed ereditarietà per citarne alcuni, potenziando il tuo CSS vanigliato. Utilizzando CSS Preprocessors, puoi automatizzare senza problemi attività umili, creare frammenti di codice riutilizzabili, evitare la ripetizione e il gonfiore del codice e scrivere blocchi di codice nidificati che siano ben organizzati e di facile lettura. Tuttavia, i browser possono solo comprendere il codice CSS vanilla nativo e non saranno in grado di interpretare la sintassi del Preprocessore CSS. Pertanto, la sintassi complessa e avanzata del preprocessore deve essere prima compilata nella sintassi CSS nativa che può quindi essere interpretata dai browser per evitare problemi di compatibilità tra browser.

Andando avanti nell'articolo, daremo uno sguardo ai 3 preprocessori CSS più popolari attualmente utilizzati dagli sviluppatori di tutto il mondo, ovvero Sass, LESS e Stylus. Prima di decidere il vincitore tra Sass vs LESS vs Stylus, fateci prima conoscere in dettaglio.

Sass - Fogli di stile sintatticamente fantastici

Sass è l'acronimo di "Syntactically Awesome Style Sheets". Sass non è solo il preprocessore CSS più popolare al mondo, ma anche uno dei più vecchi, lanciato nel 2006 da Hampton Catlin e successivamente sviluppato da Natalie Weizenbaum. Sebbene Sass sia scritto in linguaggio Ruby, un LibSass precompilatore consente a Sass di essere analizzato in altri linguaggi e disaccoppiarlo da Ruby. Sass ha una massiccia comunità attiva e ampie risorse di apprendimento disponibili in rete per i principianti. Grazie alla sua maturità, stabilità e potente abilità logica, Sass si è affermato in prima linea nel Preprocessore CSS davanti ai suoi concorrenti rivali.

Sass può essere scritto in 2 sintassi utilizzando Sass o SCSS. Qual è la differenza tra i due? Scopriamolo.

Dichiarazione di sintassi: Sass vs SCSS

• SCSS sta per Sassy CSS. A differenza di Sass, SCSS non si basa sull'indentazione.
• L'estensione .sass viene utilizzata come sintassi originale per Sass, mentre SCSS offre una sintassi più recente con l'estensione .scss.
• A differenza di Sass, SCSS ha parentesi graffe e punti e virgola, proprio come CSS.
• Contrariamente a SCSS, Sass è difficile da leggere in quanto è abbastanza deviante da CSS. Questo è il motivo per cui SCSS è la sintassi Sass più consigliata in quanto è più facile da leggere e ricorda da vicino i CSS nativi, mentre allo stesso tempo si gode con la potenza di Sass.

Considera l'esempio seguente con la sintassi Sass vs SCSS insieme al codice CSS compilato.

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

In entrambi i casi, sia Sass o SCSS, il codice CSS compilato sarà lo stesso -

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

Utilizzo del Sass

Probabilmente il framework di front-end più popolare Bootstrap è scritto in Sass. Fino alla versione 3, Bootstrap era scritto in LESS ma bootstrap 4 adottò Sass e ne aumentò la popolarità. Alcune delle grandi aziende che utilizzano Sass sono: Zapier, Uber, Airbnb e Kickstarter.

MENO - Fogli di stile più snelli

LESS è l'acronimo di "Leaner Stylesheets". È stato rilasciato nel 2009 da Alexis Sellier, 3 anni dopo il lancio iniziale di Sass nel 2006. Mentre Sass è scritto in Ruby, LESS è scritto in JavaScript. In effetti, LESS è una libreria JavaScript che estende le funzionalità del vanilla CSS nativo con mixin, variabili, nesting e loop di set di regole. Sass vs LESS è stato un acceso dibattito. Non sorprende che LESS sia il concorrente più forte di Sass e abbia la seconda base di utenti. Tuttavia, quando bootstrap è stato scaricato LESS a favore di Sass con il lancio di Bootstrap 4, LESS ha perso popolarità. Uno dei pochi svantaggi di LESS rispetto a Sass è che non supporta le funzioni. A differenza di Sass, LESS usa @ per dichiarare variabili che potrebbero creare confusione con @media e @keyframes. Però, Un vantaggio chiave di LESS rispetto a Sass e Stylus o qualsiasi altro preprocessore, è la facilità di aggiungerlo al progetto. Puoi farlo utilizzando NPM o incorporando il file Less.js. Dichiarazione di sintassi: LESS Utilizza l'estensione .less. La sintassi di LESS è abbastanza simile a SCSS con l'eccezione che per dichiarare le variabili, invece di $ sign, LESS utilizza @.

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

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

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

Usage Of LESS Il popolare framework Bootstrap fino al lancio della versione 4 era scritto in LESS. Tuttavia, un altro framework popolare chiamato SEMANTIC UI è ancora scritto in LESS. Tra le grandi aziende che utilizzano Sass ci sono Indiegogo, Patreon e WeChat

Stilo

Lo stilo è stato lanciato nel 2010 dall'ex sviluppatore di Node JS TJ Holowaychuk, quasi 4 anni dopo l'uscita di Sass e 1 anno dopo l'uscita di LESS. Lo stilo è scritto Node JS e si adatta perfettamente allo stack JS. Lo stilo è stato fortemente influenzato dall'abilità logica del Sass e dalla semplicità di LESS. Anche se Stylus è ancora popolare tra gli sviluppatori di Node JS, non è riuscito a ritagliarsi una quota considerevole per se stesso. Un vantaggio di Stylus rispetto a Sass o LESS è che è dotato di funzioni incorporate estremamente potenti ed è in grado di gestire calcoli pesanti.

Dichiarazione di sintassi: Stylus utilizza l'estensione .styl. Stylus offre una grande flessibilità nella scrittura della sintassi, supporta CSS nativi e consente l'omissione di parentesi, due punti e punti e virgola. Inoltre, si noti che Stylus non utilizza i simboli @ o $ per definire le variabili. Invece, Stylus utilizza gli operatori di assegnazione per indicare una dichiarazione di variabile.

STYLUS SINTASSI SCRITTA COME CSS NATIVO

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

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

O

SINTASSI STYLUS SENZA BRETELLE RICCI

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

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

O

SINTASSI DI STYLUS SENZA COLONI E SEMICOLON

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

#box 
    color font-color
    background bg-color