Veel ontwerpers gebruiken een soort van CSS pre-processor, of dat nu is Sass , MINDER of schrijfstift . Als je een van deze hebt gebruikt, weet je waarschijnlijk ook dat Compass een raamwerk is dat gebouwd is op Sass, en hoewel de installatie misschien verraderlijk is, zul je snel merken dat het een van de beste vaardigheden is die je hebt. webdesigner kan leren.
Als u nog nooit Sass eerder hebt gebruikt, raad ik u aan WDD's te bekijken inleiding tot Sass.
Compass werkt als een raamwerk voor uw CSS. Wanneer je aan een groot project werkt, is het gemakkelijk om dingen uit de hand te laten lopen en is het vaak een uitdaging om dingen in je eigen CSS te vinden. Compass probeert deze problemen aan te pakken, met als bijkomend voordeel dat het werkt met voorvoegsels van leveranciers.
Zoals ik hierboven al zei, is Compass een framework voor je CSS dat een aantal problemen met de taal oplost. Het bevat ook een paar hulpmiddelen om de ontwikkeling sneller en eenvoudiger te maken:
Net als Sass en LESS is Compass slechts een hulpmiddel om het website-ontwerp eenvoudiger te maken.
Compass is een Ruby-juweeltje, dus om het te installeren moet je Ruby eerst op je computer geïnstalleerd hebben. Gelukkig is Ruby-installatie eenvoudig, in Windows hoef je dit alleen maar te downloaden Ruby Installer voor Windows , op Mac / Linux volgt u de instructies op de Ruby-site.
Zodra je Ruby hebt geïnstalleerd, is het installeren van het kompas net zo eenvoudig als dit:
gem install compassHiermee installeer je zowel Compass als Sass.
Als u een Compass-project wilt maken, typt u het volgende:
compass create /path/to/projectcd /path/to/projectcompass watchDeze drie coderegels betekenen dat elke keer dat u een Sass-bestand wijzigt, deze automatisch in CSS worden gecompileerd.
Als alternatief zou je kunnen gebruiken Codekit (Mac) of Prepros (Windows) om de Sass te compileren wanneer deze wordt opgeslagen.
Compass is onderverdeeld in modules en om zijn hulpprogramma's te kunnen gebruiken, moeten we eerst de gewenste module in ons .scss-bestand importeren. Om bijvoorbeeld de CSS3-module te importeren, gebruiken we:
@import "compass/css3";Nu kunnen we beginnen met het gebruik van de hulpprogramma's en mixins die Compass biedt voor de nieuwe eigenschappen die met CSS3 zijn meegeleverd. Het allerbeste hieraan is dat we niet steeds voorvoegsels van leveranciers moeten typen, wat altijd al een probleem was met betrekking tot CSS3.
Hier is een voorbeeld: als we een eenvoudige lay-out met 3 kolommen met een 20px-rugmarge wilden maken, moesten we in CSS typen:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}U kunt zien hoe onhandelbaar onze code snel wordt. Met de hulp van Compass en Sass hebben we alleen dit nodig:
div{@include column-count(3);@include column-gap(20px);}Zoals u kunt zien, hebben we de prefixen van de leveranciers verwijderd en hebben we 6 regels CSS in slechts 2 overgenomen.
Een ander voorbeeld van CSS dat veel typen vereist, is verlopen. Dit is hoe we een eenvoudig wit naar zwart verloop in CSS zouden schrijven:
.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}Het creëren van hetzelfde effect met Compass is zo simpel als:
.gradient{@include background-image(linear-gradient(#fff, #000));}Dit vermindert niet alleen de hoeveelheid code aanzienlijk, maar als u de kleuren wilt wijzigen, hoeft u deze in de Compass-versie slechts eenmaal te wijzigen.
Er is een volledige lijst van de verkorte CSS3-eigenschappen hier.
Compass bevat ook een aantal helpers voor links, waarvan er een een echte tijdbesparing is. Allereerst moeten we het typografiemodel als begin van ons belangrijkste Sass-bestand opnemen:
@import "compass/typography"De typografiemodule heeft een geweldige afkorting voor het stylen van kleuren, zoals:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Dit is het beste van Compass; het gebruikt de code die we dagelijks gebruiken en geeft ons stenografische versies.
Dit artikel was slechts een korte inleiding tot Compass, maar als je het onderwerp zo spannend vond als ik, dan raad ik je ten zeerste aan om bekijk hun website en verken meer van de hulpprogramma's die beschikbaar zijn.
Ik hoop dat je nu het gebruik van Compass en Sass in je projecten zult overwegen, omdat het echt ongelooflijke toevoegingen zijn aan de toolbox van de webontwerper.
Gebruikt u Compass of Sass? Heeft u liever een andere pre-processor? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, kompasbeeld via Shutterstock.