css - tutorial - sass utilizzo




Qual è la differenza tra SCSS e Sass? (8)

Da quello che ho letto, Sass è un linguaggio che rende i CSS più potenti con supporto variabile e matematico.

Qual è la differenza con SCSS? Dovrebbe essere la stessa lingua? Simile? Diverso?


SASS sta per Syntactically Awesome StyleSheets. È un'estensione del CSS che aggiunge potenza ed eleganza al linguaggio di base. SASS è stato recentemente chiamato SCSS con alcune chages, ma anche il vecchio SASS è presente. Prima di utilizzare SCSS o SASS, vedere la differenza di seguito.

Esempio di alcune sintassi 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))

Output CSS dopo la compilazione (uguale per entrambi)

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

Per ulteriori consultare il website ufficiale


Dalla homepage della lingua

Sass ha due sintassi. La nuova sintassi principale (come da Sass 3) è conosciuta come "SCSS" (per "Sassy CSS") ed è un superset della sintassi di 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 indentata (o semplicemente "Sass"). Ispirato alla tenacia di Haml, è pensato per le persone che preferiscono la concisione rispetto alla somiglianza con i CSS. Invece di parentesi e punti e virgola, utilizza il rientro delle linee per specificare i blocchi. Sebbene non sia più la sintassi principale, la sintassi indentata continuerà a essere supportata. I file nella sintassi rientrata utilizzano l'estensione .sass.

SASS è un linguaggio interpretato che sputa CSS. La struttura di Sass assomiglia ai CSS (da remoto), ma mi sembra che la descrizione sia un po 'fuorviante; non è un sostituto per CSS o un'estensione. È un interprete che sparge i CSS alla fine, quindi Sass ha ancora i limiti del normale CSS, ma li maschera con un semplice codice.


Il file Sass .sass è visivamente diverso dal file .scss , ad es

Example.sass - sass è la sintassi più vecchia

$color: red

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

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

Example.scss - sassy css è la nuova sintassi di Sass 3

$color: red;

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

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

Qualsiasi documento CSS valido può essere convertito in CSS Sassy (SCSS) semplicemente cambiando l'estensione da .css a .scss .


La differenza fondamentale è la sintassi. Mentre SASS ha una sintassi allentata con lo spazio bianco e nessun punto e virgola, SCSS assomiglia di più ai CSS.


Risposta compatta:

SCSS si riferisce alla sintassi principale supportata dal pre-processore Sass CSS .

  • I file che terminano con .scss rappresentano la sintassi standard supportata da Sass. SCSS è un superset di CSS.
  • I file che terminano con .sass rappresentano la sintassi "più vecchia" supportata da Sass che ha origine nel mondo dei rubini.

Sass è stato il primo e la sintassi è leggermente diversa. Ad esempio, incluso un mixin:

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

Sass ignora le parentesi graffe e i semi punti e si appoggia al nidificazione, cosa che ho trovato più utile.


Sono uno degli sviluppatori che ha contribuito a creare Sass.

La differenza è l'interfaccia utente. Sotto l'aspetto testuale sono identici. Ecco perché i file sass e scss possono importarsi a vicenda. In realtà, Sass ha quattro parser di sintassi: scss, sass, CSS e less. Tutti questi convertono una sintassi diversa in un Abstract Syntax Tree che viene ulteriormente elaborato nell'output CSS o anche in uno degli altri formati tramite lo strumento sass-convert.

Usa la sintassi che ti piace di più, entrambi sono completamente supportati e puoi cambiarli in seguito se cambi idea.


La differenza tra articolo SASS e SCSS spiega la differenza nei dettagli. Non essere confuso dalle opzioni SASS e SCSS, anche se inizialmente ero anch'io, .scss è Sassy CSS ed è la prossima generazione di .sass.

Se questo non ha senso, puoi vedere la differenza nel codice qui sotto.

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

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

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

Nel codice sopra che usiamo; per separare le dichiarazioni. Ho persino aggiunto tutte le dichiarazioni per .border su una singola riga per illustrare ulteriormente questo punto. Al contrario, il codice SASS in basso deve essere su linee diverse con indentazione e non c'è alcun uso del;

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

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

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

Puoi vedere dal CSS sotto che lo stile SCSS è molto più simile al normale CSS rispetto al vecchio approccio SASS.

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

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

Penso che la maggior parte delle volte in questi giorni, se qualcuno afferma che stanno lavorando con Sass, si riferiscono alla creazione di .scss piuttosto che al modo tradizionale .sass.





sass