Sass

Sass
Estensione.sass, .scss
Tipo MIMEtext/x-sass
SviluppatoreNathan Weizenbaum, Chris Eppstein
1ª pubblicazione2007
Ultima versionedart-sass 1.54.0[1] (7 luglio 2022)
Estensione diCSS
Sito webwww.sass-lang.com

Sass (Syntactically Awesome StyleSheets) è un'estensione del linguaggio CSS che permette di utilizzare variabili, di creare funzioni e di organizzare il foglio di stile in più file.

Il linguaggio Sass si basa sul concetto di preprocessore CSS, il quale serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso. È compatibile con tutte le versioni di CSS.

Sass è costituito da due sintassi[2]. La sintassi originale, chiamata "sintassi rientrata", utilizza una sintassi simile a HTML. Utilizza il rientro per separare i blocchi di codice e i caratteri di nuova riga per separare le regole. La sintassi più recente, "SCSS" (Sassy CSS), utilizza la formattazione dei blocchi come quella dei CSS. Utilizza le parentesi graffe per indicare i blocchi di codice e il punto e virgola per separare le regole all'interno di un blocco. La sintassi rientrata e i file SCSS hanno tradizionalmente le estensioni .sass e .scss, rispettivamente.

CSS3 consiste in una serie di selettori e pseudo-selettori che raggruppano le regole che si applicano a loro. Sass (nel contesto più ampio di entrambe le sintassi) estende i CSS fornendo diversi meccanismi disponibili nei linguaggi di programmazione più tradizionali, in particolare i linguaggi orientati agli oggetti, ma che non sono disponibili per i CSS3 stessi. Quando SassScript viene interpretato, crea blocchi di regole CSS per vari selettori come definito dal file Sass. L'interprete Sass traduce SassScript in CSS. In alternativa, Sass può monitorare il file .sass o .scss e tradurlo in un file .css di output ogni volta che viene salvato il file .sass o .scss[3].

La sintassi indentata è un metalinguaggio. SCSS è un metalinguaggio annidato, poiché CSS valido è SCSS valido con la stessa semantica.

SassScript fornisce i seguenti meccanismi: variabili, annidamento, mixin ed ereditarietà del selettore[2].

Installazione

L'implementazione originale di Sass era scritta in Ruby. Una volta installato Ruby per il proprio sistema operativo è possibile procedere con l'installazione di Sass tramite il comando gem install sass.

A partire dal 26 marzo 2019 Ruby Sass non è più ufficialmente supportato[4]. Esistono tuttavia implementazioni di Sass in diversi linguaggi di programmazione e l'implementazione primaria è diventata quella scritta in Dart[5]. Nella pagina ufficiale di Sass per ogni implementazione sono disponibili le istruzioni per l'installazione.

Storia

Sass è stato inizialmente progettato da Hampton Catlin e sviluppato da Natalie Weizenbaum. Dopo le sue versioni iniziali, Weizenbaum[6] e Chris Eppstein hanno continuato ad estendere Sass con SassScript, un linguaggio di scripting usato nei file Sass.

Principali implementazioni

SassScript è stato implementato in più lingue, le implementazioni degne di nota sono:

  • L'implementazione originale di Ruby open source creata nel 2006,[7] allora è stata deprecata a causa della mancanza di manutentori e ha raggiunto la fine del ciclo di vita nel marzo 2019[8].
  • L'implementazione ufficiale di Dart open source[7].
  • libSass, l'implementazione ufficiale C ++ open source.
  • l'implementazione JavaScript ufficiale, pubblicata come modulo "sass" su npm.
  • JSass, un'implementazione Java non ufficiale[9].
  • phamlp, un'implementazione SASS / SCSS non ufficiale in PHP[7].
  • Vaadin ha un'implementazione Java di Sass.
  • Firebug, un'estensione XUL ("legacy") per Firefox per lo sviluppo web.[10] Da allora è stato deprecato a favore degli strumenti di sviluppo integrati in Firefox stesso. Ha smesso di funzionare da quando Firefox 57 ha abbandonato il supporto per le estensioni XUL.

Caratteristiche

Variabili

Sass consente di definire le variabili. Le variabili iniziano con un segno di dollaro ($). Variabile assegnazione è fatto con un colon (:)[10].

SassScript supporta quattro tipi di dati:

  • Numeri (comprese le unità)
  • Stringhe (con virgolette o senza)
  • Colori (nome o nomi)
  • Booleani

Le variabili possono essere argomenti o risultati di una delle numerose funzioni disponibili.[11] Durante la traduzione, i valori delle variabili vengono inseriti nel documento CSS di output[2].

SCSS Sass CSS Compilato
$primary-color: #3bbfce;
$margin: 16px;

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

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}
 
$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color
 
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

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

Annidamento

I CSS supportano l'annidamento logico, ma i blocchi di codice stessi non sono annidati. Sass consente di inserire il codice annidato l'uno nell'altro[2].

SCSS Sass CSS Compilato
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}
 
table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em
 
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

Tipi più complicati di annidamento, inclusi l'annidamento dello spazio dei nomi e i riferimenti padre, sono discussi nella documentazione di Sass[10].

SCSS Sass CSS Compilato
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }
}

#data {
  @include table-base;
}
 
=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

#data
  +table-base
 
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Loop

Sass consente l'iterazione sulle variabili utilizzando @for, @eache @while, che può essere utilizzato per applicare stili diversi a elementi con classi o ID simili.

Sass CSS Compilato
$squareCount: 4
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i
 
#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

Argomenti

Anche i mixin supportano gli argomenti[2].

Sass CSS Compilato
=left($dist) 
  float: left
  margin-left: $dist

#data 
  +left(10px)
 
#data {
  float: left;
  margin-left: 10px;
}

In combinazione

Sass CSS Compilato
=table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

=left($dist) 
  float: left
  margin-left: $dist

#data 
  +left(10px)
  +table-base
 
#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Eredità del selettore

Sebbene CSS3 supporti la gerarchia DOM (Document Object Model), non consente l'ereditarietà del selettore. In Sass, l'ereditarietà si ottiene inserendo una riga all'interno di un blocco di codice che utilizza la parola chiave @extend e fa riferimento a un altro selettore. Gli attributi del selettore esteso vengono applicati al selettore chiamante[2].

Sass CSS Compilato
.error
  border: 1px #f00
  background: #fdd

.error.intrusion 
  font-size: 1.3em
  font-weight: bold

.badError 
  @extend .error
  border-width: 3px
 
.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Sass supporta l'ereditarietà multipla.[10].

libSass

Alla HTML5 Developer Conference del 2012, Hampton Catlin, il creatore di Sass, ha annunciato la versione 1.0 di libSass, un'implementazione C ++ open source di Sass sviluppata da Catlin, Aaron Leung e il team di ingegneri di Moovweb[12]. attuale manutentore di Sass, Chris Eppstein, ha espresso l'intenzione di contribuire.

Secondo Catlin, libSass può essere "drop [ped] in qualsiasi cosa e includerà Sass ... Potresti rilasciarlo direttamente in Firefox oggi e compilare Firefox e verrà compilato lì. Abbiamo scritto il nostro parser da zero in assicurati che sia possibile "[13].

Gli obiettivi di progettazione di libSass sono:

  • Prestazioni: gli sviluppatori hanno segnalato aumenti di velocità 10 volte superiori rispetto all'implementazione Ruby di Sass[14].
  • Integrazione più semplice: libSass semplifica l'integrazione di Sass in più software. Prima di libSass, l'integrazione di Sass in un linguaggio o in un prodotto software richiedeva il raggruppamento dell'intero interprete Ruby. Al contrario, libSass è una libreria collegabile staticamente con zero dipendenze esterne e un'interfaccia C-like, che rende facile avvolgere Sass direttamente in altri linguaggi e strumenti di programmazione. Ad esempio, ora esistono collegamenti libSass open source per Node, Go e Ruby[15].
  • Compatibilità: l'obiettivo di libSass è la piena compatibilità con l'implementazione Ruby ufficiale di Sass. Questo obiettivo è stato raggiunto su libsass 3.3[16].

Integrazione IDE

Integrazione IDE di Sass
IDE Software Sito web
Adobe Dreamweaver CC 2017 https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/
Eclipse
Emacs SCSS Mode https://github.com/antonj/scss-mode/
JetBrains IntelliJ IDEA (Ultimate Edition) https://www.jetbrains.com/idea/
JetBrains PhpStorm http://www.jetbrains.com/phpstorm/
JetBrains RubyMine http://www.jetbrains.com/ruby/
JetBrains WebStorm http://www.jetbrains.com/webstorm/
Microsoft Visual Studio Mindscape http://www.mindscapehq.com/products/web-workbench
Microsoft Visual Studio SassyStudio http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
Microsoft WebMatrix http://www.microsoft.com/web/
NetBeans http://plugins.netbeans.org/plugin/34929/scss-support
Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433
Atom https://github.com/atom/language-sass
Visual Studio Code https://code.visualstudio.com/Docs/languages/css
Sublime Text https://github.com/P233/Syntax-highlighting-for-Sass
Edit+ https://www.editplus.com/others.html

Note

  1. ↑ "dart-sass.changelog", su github.com. URL consultato il 7 luglio 2022.
  2. 1 2 3 4 5 6 Media Mark (3.2.12), Sass - Syntactically Awesome Stylesheets, su sass-lang.com. URL consultato il 23 febbraio 2014.
  3. ↑ Sass - Syntactically Awesome Stylesheets Archiviato il 9 ottobre 2013 in Internet Archive. Tutorial
  4. ↑ Sass: Ruby Sass, su sass-lang.com. URL consultato il 6 marzo 2019.
  5. ↑ Sass: Dart Sass, su sass-lang.com. URL consultato il 6 marzo 2019.
  6. ↑ Sass: Syntactically Awesome Style Sheets, in sass-lang.com (archiviato dall'url originale il 1º settembre 2013).
  7. 1 2 3 Sass / Scss, su drupal.org, 21 ottobre 2009. URL consultato il 23 febbraio 2014 (archiviato dall'url originale il 10 marzo 2016).
  8. ↑ Natalie Weizenbaum, Ruby Sass Has Reached End-Of-Life « Sass Blog, su sass.logdown.com. URL consultato il 21 aprile 2019.
  9. ↑ jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting, su code.google.com. URL consultato il 23 febbraio 2014.
  10. 1 2 3 4 Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  11. ↑ Module: Sass::Script::Functions Sass Functions
  12. ↑ H. Catlin, Hampton's 6 Rules of Mobile Design, su youtube.com, HTML5 Developer Conference, 15 ottobre 2012. URL consultato l'11 luglio 2013.
  13. ↑ A. Stacoviak & A. Thorp, Sass, libsass, Haml and more with Hampton Catlin, su 5by5.tv, 26 giugno 2013. URL consultato il 30 luglio 2013 (archiviato dall'url originale il 6 agosto 2013).
  14. ↑ D. Le Nouaille, Sassc and Bourbon, su damln.com, 7 giugno 2013. URL consultato l'11 luglio 2013.
  15. ↑ M. Catlin, libsass, su blog.moovweb.com, Moovweb Blog, 30 aprile 2012. URL consultato l'11 luglio 2013 (archiviato dall'url originale l'8 maggio 2013).
  16. ↑ Sass Compatibility, su sass-compatibility.github.io. URL consultato il 29 novembre 2019 (archiviato dall'url originale il 5 dicembre 2019).

Voci correlate

Collegamenti esterni

Questa voce è stata pubblicata da Wikipedia. Il testo è rilasciato in base alla licenza Creative Commons Attribution-Share Alike 4.0, salvo diversa indicazione. Potrebbero essere applicate clausole aggiuntive per i file multimediali.