Utilizzando Bootstrap 3 con Sass

Bootstrap viene fornito con le griglie reattive e alcuni componenti Web comuni che possiamo raccogliere per creare rapidamente un sito Web reattivo . Se hai visto i nostri post precedenti su Bootstrap, probabilmente sai che gli stili Bootstrap sono composti usando LESS.

Mentre LESS è diventato più potente con le nuove funzionalità introdotte nella versione 1.5, alcuni di voi potrebbero avere più familiarità con Sass / SCSS. Potrebbero esserci anche alcune funzionalità in Sass che non puoi vivere senza, ma non sono presenti in LESS (ancora). Se vuoi lavorare su Boostrap e con Sass, grazie a Thomas McDonald, puoi farlo perché Bootstrap è stato portato su Sass / SCSS .

Installazione

Ci sono alcuni modi per iniziare a usare Bootstrap + Sass . Innanzitutto, poiché è stato incluso come gemma Ruby, è possibile installarlo tramite Terminal con la seguente riga di comando:

 gem installa bootstrap-sass 

Puoi anche usarlo insieme a Bussola con questo comando qui sotto. È lo stesso metodo con cui installiamo Zurb Foundation. Tuttavia, tieni presente che in questo modo includerai solo _variables.less contenente le variabili Bootstrap e styles.less dove inserisci le tue regole di stile.

 bussola crea il mio nuovo progetto -r bootstrap-sass --utilizzando il bootstrap 

In alternativa, puoi semplicemente scaricarlo dal repository Github.

Novità di Bootstrap 3

Ecco alcune nuove funzionalità trovate in Bootstrap 3.

Design piatto

Il cambiamento che puoi immediatamente vedere dalla nuova versione, Bootstrap 3, è che ora include il design piatto. I gradienti e le ombre che abbiamo trovato nei componenti della versione precedente ora sono spariti.

Grid in Bootstrap 3

Bootstrap introduce anche una serie di nuove classi e nuove costruzioni di griglia. Nella versione 3 sono disponibili griglie grandi, medie, piccole e extra piccole per adattarsi a diverse dimensioni di visualizzazione. Vediamo il seguente esempio HTML:

Colonna sinistra
Colonna centrale
Colonna destra

Abbiamo tre colonne. Ogni colonna ha una larghezza uguale se visualizzata in una dimensione grande della vista (sullo schermo del desktop o sull'orientamento orizzontale sul tablet). La dimensione è applicata con la classe col-md-4 .

Quindi, quando la dimensione dello schermo si col-sm-*, la divisione della larghezza della colonna verrà regolata con la classe col-sm-*, in modo che la larghezza della colonna possa rimanere nella giusta proporzione anziché essere semplicemente sovrapposta, come nella versione precedente di Bootstrap.

Nuovi componenti

Ci sono anche alcuni nuovi componenti aggiunti nella versione 3. Questo include Pager (usato per costruire il tipo di navigazione Next-e-Prev), List Group, Panels e Page Header .

Utilizzando le funzioni di Sass

Tecnicamente, possiamo semplicemente aggiungere le classi Bootstrap agli elementi HTML per rendere il layout del sito Web, come abbiamo fatto nell'esempio sopra. Tuttavia, quando utilizziamo i pre-processori CSS, come Sass, possiamo utilizzare alcune delle funzioni per ottenere una struttura HTML più pulita e semantica anziché essere pieni di nomi di classe privi di significato.

Dato l'esempio precedente, possiamo cambiare la struttura e i nomi delle classi in qualcosa del genere:

Questo è il contenuto.
Questa è la barra laterale.
Questa è la navigazione.

All'interno del foglio di stile, possiamo usare la direttiva Sass @extend per costruire il layout. L'uso di @extend raggrupperà i selettori che condividono le stesse regole di stile.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

In alternativa, puoi usare anche Sass @include che copierà e includerà le regole di stile dei mixins nei nostri selettori di classe.

 .main-area {@include make-row; } .content {@include make-xs-column (6); @include make-sm-column (6); } .sidebar {@include make-xs-column (4); @include make-sm-column (4); } .side-nav {@include make-xs-column (2); @include make-sm-column (2); } .column {@include make-md-column (4); } 

Ora, guardalo sul browser e otterrai il tuo layout reattivo.

Conclusione

Bootstrap e Sass sono sicuramente un'ottima combinazione. Con Bootstrap, puoi creare un sito Web reattivo funzionante in poche ore . E le funzionalità di Sass come @extend e @include possono aiutarci a scrivere CSS più snelli, programmabili e manutenibili . Per ulteriori informazioni su Sass, puoi consultare questo articolo: Come iniziare con Sass: Installazione e Nozioni di base.

Allora, hai provato Bootstrap + Sass?

8 App per il monitoraggio del tempo di Windows per una migliore produttività - Best Of

Se stai cercando di ottenere un'alta produttività sul lavoro, è abbastanza importante tenere traccia del tempo trascorso lavorando . E un buon modo per farlo è procurarti un'app per il monitoraggio del tempo. Un'app di monitoraggio del tempo manterrà traccia completa delle attività sul PC e quanto tempo hai trascorso lavorando o scherzando .Se s

(Consigli tecnici e di design)

Crea, controlla e personalizza la finestra modale migliore per il tuo sito usando Vex

Una finestra modale è molto utile quando vuoi far interagire gli utenti con il tuo sito . Occasionalmente, una finestra modale viene chiamata casella modale mentre la finestra viene utilizzata per visualizzare la finestra di dialogo . In un precedente articolo ti abbiamo guidato attraverso un tutorial su come creare finestre modali usando il Plugin Bootstrap.

(Consigli tecnici e di design)