In quest’ultima breve lezione elencheremo brevemente alcune utili risorse da poter usare in Sass. Partiamo illustrando delle funzionalità di Bourbon il quale fornisce una serie di variabili, funzioni e mixin che possono risultare utili e semplificare la fase di sviluppo. Vediamo dunque alcuni esempi.
Bourbon.io: una libreria di variabili, funzioni e mixin
Bourbon offre diverse variabili, funzioni e mixin che possiamo importare in un progetto in cui usiamo Sass e utilizzare per semplificare lo sviluppo della nostra applicazione. Vediamo qualche semplice esempio.
Prima di tutto dobbiamo installare Bourbon e lo possiamo fare in diversi modi. È possibile installare Bourbon usando RubyGems, Bower o NPM. Noi useremo l’ultimo metodo. All’interno di una nuova cartella, dopo aver lanciato il comando npm init -y, installiamo Bourbon con il seguente comando:
npm i bourbon --saveOtterremo così un file package.json come quello mostrato sotto.
{
"name": "bourbon-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bourbon": "^5.0.1"
}
}Possiamo quindi creare due cartelle scss e css in modo tale che la nostra directory base abbia una struttura simile a quella riportata sotto.
tree
.
├── css
├── index.html
└── scss
└── style.scss
2 directories, 2 filesIl file index.html conterrà inizialmente il seguente frammento di codice.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Bourbon Example</title>
</head>
<body>
<div class="container"></div>
</body>
</html>Il file scss/style.scss sarà invece quello mostrato sotto.
/* file style.scss */
@import "bourbon";
.container {
@include border-style(dashed null solid);
@include border-width(20px null 20px);
@include border-color(#ecbe4a null #2eb82e null);
}Nel frammento di codice riportato sopra abbiamo importato Bourbon e utilizzato tre mixin diversi per definire lo stile dei bordi dell’elemento di classe container. Il primo mixin è border-style($list) che riceve come argomento una lista di valori relativi allo stile dei bordi di un elemento. Il primo valore della lista fa riferimento a border-top-style, il secondo a border-right-style, il terzo a border-bottom-style e il quarto a border-left-style. Nel nostro caso abbiamo omesso l’ultimo valore, ma visto che abbiamo voluto specificare lo stile del bordo inferiore abbiamo dovuto usare null per indicare che non vogliamo assegnare uno stile al bordo destro. Gli altri due mixin si comportano in maniera simile e servono ad assegnare dei valori alle proprietà border-width e border-color dei diversi lati dell’elemento di classe container.
Per generare il file css/style.css, che poi includiamo nel file index.html, possiamo usare il comando node-sass. In questo caso dovremo però indicare qual è il percorso che node-sass dovrà usare al fine di trovare il corretto file per importare Bourbon nel file scss/style.scss. A tal proposito possiamo usare l’opzione –include-path.
node-sass scss --watch --output-style expanded \
--output css --include-path node_modules/bourbon/coreIn alternativa, come abbiamo visto in una delle precedenti lezioni, dopo aver installato gulp e gulp-sass, possiamo creare un file Gulpfile.js come quello riportato sotto in cui abbiamo specificato il percorso da utilizzare per importare Bourbon nel file scss/style.scss.
/* file Gulpfile.js */
let gulp = require('gulp');
let gulpSass = require('gulp-sass');
let bourbon = require('bourbon').includePaths;
let options = {
includePaths: [bourbon]
}
gulp.task('sass', function() {
gulp.src('scss/*.scss')
.pipe(gulpSass(options).on('error', gulpSass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch:sass', function () {
gulp.watch('scss/*.scss',['sass']);
})
gulp.task('default', ['watch:sass']);Generiamo quindi il file css/style.css che conterrà il seguente frammento di codice.
/* file style.css */
.container {
border-top-style: dashed;
border-bottom-style: solid;
border-left-style: dashed;
border-top-width: 20px;
border-bottom-width: 20px;
border-top-color: #ecbe4a;
border-bottom-color: #2eb82e;
}Un altro mixin utile presente in Bourbon è clearfix che fornisce un modo immediato per implementare rapidamente la tecnica nota come clearfix. Se infatti abbiamo un contenitore con degli elementi a cui abbiamo assegnato la proprietà float, possiamo applicare il mixin come mostrato sotto.
/* file style.scss */
@import "bourbon";
.container {
@include clearfix;
}Il file style.css risultante è il seguente.
/* file style.css */
.container::after {
clear: both;
content: "";
display: block;
}Un altro mixin presente in Bourbon che può risultare utile è il mixin hide-visually che nasconde visivamente un elemento pur consentendo al contenuto di essere accessibile da parte di applicazioni software come gli screen reader (lettori di schermo).
/* file style.scss */
@import "bourbon";
.container {
@include hide-visually;
&:active,
&:focus {
@include hide-visually("unhide");
}
}
Il mixin hide-visually accetta solo uno di due possibili argomenti: hide e unhide. Il primo è il valore di default e serve per nascondere visivamente un elemento. Il secondo inverte il comportamento impostato da hide.
/* file style.css */
.container {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.container:active, .container:focus {
clip: auto;
clip-path: none;
height: auto;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
Oltre ai mixin, in Bourbon sono presenti delle variabili predefinite che possiamo per esempio usare per generare dei selettori come nel caso della variabile all-buttons.
/* file style.scss */
@import "bourbon";
#{$all-buttons} {
border: 2px solid black;
font-size: 12px;
font-family: 'Work Sans', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
background: white;
padding: 5px 30px;
border-radius: 40px;
}Dal frammento di codice riportato sopra viene generato il seguente file CSS.
/* file style.css */
button, [type='button'], [type='reset'], [type='submit'] {
border: 2px solid black;
font-size: 12px;
font-family: 'Work Sans', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
background: white;
padding: 5px 30px;
border-radius: 40px;
}Abbiamo visto solo alcune delle possibilità offerte da Bourbon. Per un elenco completo di tutte le funzioni, variabili e mixin presenti in Bourbon vi rimandiamo alla documentazione ufficiale.
Altre risorse
Come già detto in altre lezioni, Sass è uno strumento molto diffuso e sono stati sviluppati numerosi framework e librerie da poter usare in Sass per semplificare e ottimizzare il processo di creazione dei fogli di stile. Su Github potete trovare un repository con una lista dettagliata di risorse da poter utilizzare in Sass suddivise per categorie. Esistono inoltre degli strumenti come Autoprefixer che non sono stati sviluppati esclusivamente per Sass, ma sono compatibili con quest’ultimo e risultano estremamente utili. Autoprefixer consente infatti di creare dei fogli di stile senza doversi preoccupare dei cosiddetti vendor-prefixes (proprietà CSS che iniziano con -webkit-, -moz-, -ms- oppure -o-) che vengono aggiunti automaticamente dallo stesso Autoprefixer in base alla configurazione da noi scelta. Nell’esempio precedente abbiamo visto come utilizzare Gulp per compilare il file con estensione .scss dopo aver installato Bourbon con NPM. Il plugin gulp-autoprefixer consente di utilizzare Autoprefixer all’interno del file Gulpfile.js.
/* file Gulpfile.js */
let gulp = require('gulp');
let gulpSass = require('gulp-sass');
let bourbon = require('bourbon').includePaths;
let autoprefix = require("gulp-autoprefixer");
let options = {
includePaths: [bourbon]
}
gulp.task('sass', function() {
gulp.src('scss/*.scss')
.pipe(gulpSass(options).on('error', gulpSass.logError))
// usiamo gulp-autoprefixer
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch:sass', function () {
gulp.watch('scss/*.scss',['sass']);
})
gulp.task('default', ['watch:sass']);Autoprefixer analizza i file CSS e aggiunge i ‘vendor-prefixes’ alle proprietà utilizzando i dati del database di caniuse. Verranno quindi aggiunti solo i prefissi necessari in base alla configurazione fornita (nel nostro caso ‘last 2 versions’, ovvero le ultime 2 versioni dei browser che è comunque la configurazione predefinita).
Se ora aggiungiamo al file style.scss il seguente frammento di codice:
/* file style.scss */
.box {
display: flex;
justify-content: center;
align-items: center;
}
Lanciando il comando gulp sass, otteniamo il file CSS riportato sotto.
/* file style.css */
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Conclusioni
In quest’ultima lezione abbiamo riportato alcune utili risorse che è possibile utilizzare in Sass. Concludiamo così questa guida in cui abbiamo illustrato in poche lezioni le funzionalità fondamentali di Sass. Per maggiori informazioni e dettagli vi rimandiamo in ogni caso alla dettagliata documentazione ufficiale.
