Bootstrap 3 gebruiken met Sass

Bootstrap wordt geleverd met Responsive Grids en enkele algemene webcomponenten die we kunnen ophalen om snel een responsieve website te bouwen . Als je onze vorige berichten op Bootstrap hebt gezien, weet je waarschijnlijk dat Bootstrap-stijlen zijn samengesteld met LESS.

Hoewel LESS krachtiger is geworden met nieuwe functies die zijn geïntroduceerd in versie 1.5, zijn sommigen van u wellicht beter bekend met Sass / SCSS. Er kunnen ook enkele functies in Sass zijn waar je niet zonder kunt, maar ze zijn (nog) niet aanwezig in MINDER. Als je met Thomas McDonald aan Boostrap en met Sass wilt werken, kun je dat omdat Bootstrap is geporteerd naar Sass / SCSS .

Installatie

Er zijn een paar manieren om Bootstrap + Sass te gebruiken . Ten eerste, omdat het is opgenomen als een Ruby-edelsteen, kun je het via Terminal installeren met de volgende opdrachtregel:

 gem installeer bootstrap-sass 

Je kunt het ook samen met Compass gebruiken met onderstaande opdracht. Het is op dezelfde manier als hoe we Zurb Foundation installeren. Houd er echter rekening mee dat deze manier alleen de _variables.less bevat die Bootstrap-variabelen bevat, en styles.less waar u uw eigen stijlregels neerzet .

 compass create my-new-project -r bootstrap-sass - using bootstrap 

Als alternatief kunt u het eenvoudig downloaden van de Github-repo.

Wat is er nieuw in Bootstrap 3

Hier zijn een paar nieuwe functies gevonden in Bootstrap 3.

Plat ontwerp

De verandering die u direct kunt zien in de nieuwe versie, Bootstrap 3, is dat het nu om een ​​plat ontwerp gaat. De verlopen en schaduwen die we in de componenten van de vorige versie hebben gevonden, zijn nu verdwenen.

Grid in Bootstrap 3

Bootstrap introduceert ook een reeks nieuwe klassen en nieuwe rasterconstructies. In versie 3 zijn er grote, middelgrote, kleine en extra kleine rasters om tegemoet te komen aan verschillende viewportgroottes. Laten we het volgende HTML-voorbeeld bekijken:

Linker kolom
Middelste kolom
Rechterkolom

We hebben drie kolommen. Elke kolom heeft een gelijke breedte als deze in een grote viewport-grootte wordt bekeken (op een desktopscherm of liggend op de tablet). De grootte wordt toegepast met col-md-4 class.

Wanneer de schermgrootte kleiner wordt, wordt de kolombreedteverdeling aangepast met de col-sm-* -klasse, zodat de kolombreedte in de juiste verhouding kan blijven in plaats van alleen maar te worden gestapeld, zoals in de vorige versie van Bootstrap.

Nieuwe componenten

Er zijn ook enkele nieuwe componenten toegevoegd in versie 3. Dit omvat Pager (gebruikt voor het bouwen van Next-en-Prev type navigatie), List Group, Panels en Page Header .

Gebruik maken van Sass-functies

Technisch gezien kunnen we Bootstrap-klassen gewoon toevoegen aan de HTML-elementen om de lay-out van de website te maken, zoals we in het bovenstaande voorbeeld hebben gedaan. Maar bij het gebruik van CSS Pre-processors, zoals Sass, kunnen we sommige functies gebruiken om een ​​schonere en meer semantische HTML-structuur te bereiken in plaats van gevuld te zijn met betekenisloze klassenamen.

Gegeven het vorige voorbeeld, kunnen we zowel de structuur als klassenamen veranderen in iets als dit:

Dit is de inhoud.
Dit is de zijbalk.
Dit is de navigatie.

Binnen de stylesheet kunnen we de Sass @extend richtlijn gebruiken om de lay-out te bouwen. Met @extend worden de selectors @extend die dezelfde stijlregels delen.

 .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; } 

Als alternatief kunt u ook Sass @include die de stijlregels van mixins zal kopiëren en opnemen in onze class selectors.

 .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); } 

Bekijk het nu in de browser en u krijgt uw responsieve lay-out.

Conclusie

Bootstrap en Sass vormen absoluut een geweldige combinatie. Met Bootstrap kunt u binnen enkele uren een functionerende responsieve website bouwen . En functies in Sass zoals @extend en @include kunnen ons helpen slankere, programmeerbare en onderhoudbare CSS te schrijven . Voor meer informatie over Sass, kunt u dit artikel raadplegen: Aan de slag met Sass: installatie en de basisprincipes.

Dus, heb je Bootstrap + Sass geprobeerd?

Hoe WordPress lokaal te installeren met Vagrant

Lokaal ontwikkelen is een van de beste dingen die je kan overkomen. U kunt niet alleen de upload- / downloadtijden achterwege laten, u kunt zoveel projecten maken als u wilt, lokaal met echte domeinen werken en over het algemeen sneller alles doen wat u doet .Vagrant is een geweldig stuk software dat reproduceerbare en draagbare virtuele machines maakt die je kunt gebruiken als lokale webserver-omgevingen

(Technische en ontwerptips)

Hoe versnelde mobiele pagina's (AMP) te valideren

In onze laatste AMP-zelfstudie hebben we u laten zien hoe u AMP (Accelerated Mobile Pages) kunt gebruiken om een ​​aanzienlijke snelheidsverhoging en een betere bekendheid te krijgen in het mobiele zoekresultaat van Google voor uw website in de mobiele omgeving.Gezien het potentieel van AMP, neem ik aan dat u mogelijk bent begonnen of plannen hebt om wijzigingen aan te brengen in uw websites om te voldoen aan AMP . Vo

(Technische en ontwerptips)