Flexibele stylesheets met Compass

Bij Gorilla gebruiken we sinds een klein jaar Sass & Compass om onze stylesheets efficiënter en overzichtelijker op te maken.

Compass maakt volop gebruik van de nieuwe mogelijkheden van Sass. Vooral het gebruik van voorgedefiniëerde Compass-mixins maakt je project overzichtelijker, en zorgt ervoor dat je veel vlugger kan werken.

Sass is een uitbreiding op CSS en ondersteunt zaken als nested rules, variables, mixins en selector inheritance. Elk CSS3-stylesheet een valide Sass-stylesheet. Je kiest dus zelf hoeveel je gebruik maakt van de Sass mogelijkheden.

Sass op zich is al heel handig maar met Compass wordt het pas echt interessant. Compass voorziet mixins voor veel-voorkomende CSS-patronen. Denk aan text-replacement, sticky-footers, horizontale lijsten en dergelijke. Met Compass werk je dus snel en DRY.

CSS3, Blueprint en meer

Naast de "gewone" CSS-patronen zit er heel wat CSS3-functionaliteit in Compass. Je hoeft je hoofd niet meer te breken over vendor-prefixes en vendor-specific syntax. Compass doet het zware werk voor jou. Zaken zoals border-radius of box-shadow worden zo minder omslachtig.

Het Blueprint CSS-framework is opgenomen als module in compass. Voor ons zeer handig, want we gebruiken blueprint — of beter, het grid-systeem van blueprint — intensief. Geen blueprint fan? Dan kan je werken met YUI, 960gs, Susy en andere plugins.

Praktisch

Zo gaat het praktisch in zijn werk: we maken onze stijlen op in een Sass bestand. Dat bestand wordt gecompileerd (via een commando in je terminal, of on-the-fly) naar een gewoon CSS bestand. Dat CSS bestand importeer je op je website. Klaar.

Net zoals Serve is Compass een aanrader voor alle slicers die hun workflow efficiënter en praktischer willen maken.

Lees meer & kijk verder

Bekijk de Sass-files in onze front-end template om een idee te krijgen van hoe wij Compass precies gebruiken.

Reacties

Reageer als eerste!

Geef je mening… don't be shy

  • http://

Feed the primates

Wij hebben grote honger naar nieuwe projecten. Ook voor uw project leggen wij de lat heel hoog. Samenwerken? Stuur een berichtje. Of bel 09 395 02 51.

Een idee voor een nieuw project? We zijn benieuwd