Sass

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search
Sass
Estensione.sass, .scss
Sviluppato daNathan Weizenbaum, Chris Eppstein
1ª pubblicazione2007
Ultima versione3.4.11[1] (30 gennaio 2015)
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.

Installazione[modifica | modifica wikitesto]

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[2]. Esistono tuttavia implementazioni di Sass in diversi linguaggi di programmazione e l'implementazione primaria è diventata quella scritta in Dart[3]. Nella pagina ufficiale di Sass per ogni implementazione sono disponibili le istruzioni per l'installazione.

Caratteristiche[modifica | modifica wikitesto]

Variabili[modifica | modifica wikitesto]

Sass permette di definire variabili tramite il simbolo del dollaro $.

$background: #fff;
.content-navigation {
  background-color:$background;
}

Selettori nidificati[modifica | modifica wikitesto]

Sass consente l'utilizzo di selettori nidificati in modo tale da segue la stessa gerarchia visiva del tuo HTML.

 nav { 
 ul {
   margin: 0;
   padding: 0;
   list-style: none;
    }
 li { display: inline-block; }
 a {
   display: block;
   padding: 6px 12px;
   text-decoration: none;
   }
 }

Parziali[modifica | modifica wikitesto]

Puoi creare file Sass parziali che contengono piccoli frammenti di CSS che puoi includere in altri file Sass. Un parziale è un file Sass denominato con un carattere di sottolineatura iniziale. Potresti chiamarlo come _partial.scss. Il trattino basso indica a Sass che il file è solo un file parziale e che non dovrebbe essere generato in un file CSS. I parziali Sass sono usati con la regola @use.

Moduli[modifica | modifica wikitesto]

Non devi scrivere tutto il tuo Sass in un unico file. Puoi dividerlo come preferisci con la regola @use. Questa regola carica un altro file Sass come modulo, il che significa che puoi fare riferimento alle sue variabili, mixin e funzioni nel tuo file Sass con uno spazio dei nomi basato sul nome del file. L'uso di un file includerà anche il CSS che genera nell'output compilato!

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss 
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Mixins[modifica | modifica wikitesto]

Un mixin ti consente di creare gruppi di dichiarazioni CSS che desideri riutilizzare in tutto il tuo sito. Puoi anche passare valori per rendere il tuo mixin più flessibile. Un buon uso di un mixin è per i prefissi dei fornitori. Per creare un mixin usi la direttiva @mixin e dagli un nome.

@mixin transform($property) { 
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }

Estendere / Eredità[modifica | modifica wikitesto]

Questa è una delle funzionalità più utili di Sass. L'uso di @extend ti consente di condividere un set di proprietà CSS da un selettore a un altro. Aiuta a mantenere il tuo Sass molto pulito.

Operazioni[modifica | modifica wikitesto]

Sass ha una manciata di operazioni matematiche standard come +, -, *, / e %. Questa funzione consente di svolgere calcoli matematici.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%; 
}


Note[modifica | modifica wikitesto]

  1. ^ File: SASS_CHANGELOG — Sass Documentation, su sass-lang.com. URL consultato il 6/2/2015.
  2. ^ Sass: Ruby Sass, su sass-lang.com. URL consultato il 6 marzo 2019.
  3. ^ Sass: Dart Sass, su sass-lang.com. URL consultato il 6 marzo 2019.

Voci correlate[modifica | modifica wikitesto]

Collegamenti esterni[modifica | modifica wikitesto]

Internet Portale Internet: accedi alle voci di Wikipedia che trattano di internet