Sasso

sasso
Sviluppatore/i
Hampton Catlin https://sass-lang.com/
Informazione Generale
Apparso in	28 novembre 2006
Progettato da	hampton catlin
influenzato da	CSS
Licenza	Licenza MIT

Sass ( Syntacttically Awesome Stylesheets ) è un linguaggio di fogli di stile a cascata inizialmente progettato da Hampton Catlin e sviluppato da Natalie Weizenbaum. Dopo le loro versioni iniziali, Nathan Weizenbaum e Chris Eppstein hanno continuato ad estendere Sass con SassScript , un semplice linguaggio di scripting , utilizzato nei file Sass.

Sass è un metalinguaggio CSS ( Cascading Style Sheets ). È un linguaggio di script tradotto in CSS, SassScript è il linguaggio di script stesso. Sass è composto da due sintassi . La sintassi originale, chiamata sintassi rientrata ("sintassi rientrata") che utilizza la sintassi simile a Haml . ​ Utilizza il rientro per separare i blocchi di codice e il carattere di nuova riga per separare le regole. La sintassi più recente, SCSS, utilizza la formattazione a blocchi come CSS. Utilizza le parentesi graffe per denotare blocchi di codice e punti e virgola ( ; ) per separare le righe all'interno di un blocco. La sintassi rientrata e i file SCSS hanno rispettivamente le estensioni .sass e .scss .

CSS3 è costituito da una serie di selettori e pseudo-selettori che raggruppano le regole che vengono applicate. Sass (nell'ampio contesto di entrambe le sintassi) estende i CSS fornendo diversi meccanismi che sono presenti nei linguaggi di programmazione tradizionali , in particolare nei linguaggi orientati agli oggetti , ma non sono disponibili per CSS3 in quanto tali. Quando SassScript viene analizzato, crea blocchi di regole CSS per vari selettori definiti nel file SASS. L'interprete SASS traduce SassScript in CSS. In alternativa, Sass può monitorare i file .sass o .scss e convertirli in un file .css di output ogni volta che il file .sass o .scss viene salvato. Sass è solo zucchero sintattico per scrivere CSS.

L'implementazione ufficiale di Sass è open-source e scritta in Ruby , tuttavia esistono altre implementazioni, inclusa una in PHP per Drupal . ]

La sintassi rientrata è un metalinguaggio. SCSS è un metalinguaggio annidato , ciò che è valido in CSS è valido in SCSS con la stessa semantica. Sass supporta l'integrazione con l'estensione Firebug Firefox . ]

SassScript fornisce i seguenti meccanismi: variabili, annidamento, mixin ed ereditarietà. ​ dei selettori.

Variabili

Sass permette la definizione di variabili. Le variabili iniziano con il simbolo del dollaro ( $ ). L'assegnazione delle variabili avviene con i due punti ( : ). ]

SassScript consente 4 tipi di dati: ]

• Numeri (incluse le unità)
• Stringhe (con o senza virgolette)
• Colori (codice o nome)
• booleani

Le variabili possono essere risultati o argomenti di varie funzioni . ​ disponibile. Durante il processo di traduzione, i valori delle variabili vengono inseriti nel documento CSS di output. ]

In stile SCSS

$blu: #3bbfce;
$ margine: 16px;

.navigazione dei contenuti {
  colore del bordo: $ blu;
  colore: scurire ($ blu, 9%);
}

.confine {
  riempimento: $margine / 2;
  margine: $margine / 2;
  colore del bordo: $ blu;
}

O lo stile SASS

$blu: #3bbfce
$ margine: 16px

.navigazione dei contenuti
  colore del bordo: $ blu
  colore: scurire ($ blu, 9%)

.confine
  riempimento: $margine/2
  margine: $margine/2
  colore del bordo: $ blu

Dovresti compilare in:

. content-navigation  { 
  border-color :  #3bbfce ; 
  colore :  #2b9eab ; 
}

. bordo  { 
  padding :  8px ; _ margine : 8px ; _ colore bordo : #3bbfce ; }
   
   

Nidificazione

CSS supporta l'annidamento logico, ma i blocchi di codice non sono annidati. Sass consente di inserire codice annidato all'interno di qualsiasi altro blocco. ]

table.hl {
  margine: 2em 0;
  td.ln {
    allineamento del testo: a destra;
  }
}

li {
  carattere: {
    famiglia: serif;
    peso: grassetto;
    dimensione: 1,2 em;
  }
}

Dovresti compilare in:

tavola . hl  { 
  margine :  2 em  0 ; 
} 
tabella . hl  td . ln  { 
  text-align :  right ; 
}

li  { 
  famiglia di caratteri :  serif ; 
  font-weight :  grassetto ; 
  dimensione del carattere :  1,2 em ; 
}

Altri tipi di annidamento più complessi, inclusi l'annidamento dello spazio dei nomi e i riferimenti padre, sono discussi nella documentazione di Sass. ]

Mixin

I CSS non supportano i mixin . Qualsiasi codice duplicato deve essere ripetuto in ogni luogo. Un mixin è una sezione di codice che contiene il codice Sass. Ogni volta che un mixin viene chiamato nel processo di conversione, il suo contenuto viene inserito nel luogo della chiamata. I mixin consentono una soluzione pulita alla ripetizione del codice, nonché un modo semplice per modificare il codice. ]

@mixin table-base {
  th {
    allineamento testo: centro;
    font-weight: grassetto;
  }
  td, th {padding: 2px}
}

#dati {
  @include la base del tavolo;
}

Dovresti compilare in:

# data  th  { 
  text-align :  center ; 
  font-weight :  grassetto ; 
} 
# data  td ,  # data  th  { 
  riempimento :  2 px ; 
}

Argomenti

Anche i mixin accettano argomenti. ]

@mixin left($dist) {
  galleggiante: sinistra;
  margine sinistro: $dist;
}

#dati {
  @include sinistra(10px);
}

Dovresti compilare in:

# data  { 
  float :  sinistra ; 
  margine sinistro :  10px ; }

In combinazione

@mixin table-base {
  th {
    allineamento testo: centro;
    font-weight: grassetto;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  galleggiante: sinistra;
  margine sinistro: $dist;
}

#dati {
  @include sinistra(10px);
  @include la base del tavolo;
}

Dovresti compilare in:

# data  { 
  float :  sinistra ; 
  margine sinistro :  10px ; } # data th { text-align : center ; font-weight : grassetto ; } # data td , # data th { riempimento : 2 px ; }

  
   
   

    
   

Ereditarietà dei selettori

Sebbene CSS3 supporti la gerarchia DOM ( Document Object Model ), non consente l'ereditarietà dei selettori. 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 verranno applicati al selettore di chiamata. ]

.errore {
  bordo: 1px #f00;
  sfondo: #fdd;
}
.errore.intrusione {
  dimensione del carattere: 1,3 em;
  font-weight: grassetto;
}

.badError {
  @estendere .errore;
  larghezza del bordo: 3px;
}

Dovresti compilare in:

. insetto ,  . badError  { 
  bordo :  1px # f00 ; sfondo : #fdd ; } 
   


. bug . intrusione , 
. badErrore . intrusion  { 
  dimensione carattere :  1,3 em ; 
  font-weight :  grassetto ; 
}

. badError  { bordo 
  - larghezza :  3px ; }

Sass supporta l'ereditarietà multipla . ]

Integrazione con IDE

SDI	Software	sito web
Microsoft Visual Studio	panorama mentale	http://www.mindscapehq.com/products/web-workbench
Eclisse
JetBrains RubyMine
NetBean		http://plugins.netbeans.org/plugin/34929/scss-support

Mixin e framework

Esistono diversi gruppi di mixin o cosiddetti framework basati su Sass che rendono più veloce la creazione o l'applicazione di stili riducendo la sintassi.

1. bussola
2. Bourbon

Framework reattivi

Questi framework utilizzano Sass come base e la loro funzione di base è quella di risolvere la sistemazione di schermi di diverse dimensioni per ottenere un design responsivo del sito web.

1. susy
2. Singolarità
3. Bootstrap (dalla versione 4)

Collegamenti esterni

• Sito ufficiale del Sass
• Repository del codice sorgente Haml/Sass (Git)
• Haml/SassGruppo Google
• pyScss, una libreria e client Python Scss