Shared publicly  - 
 
Hvordan skrive hurtigere vendor-specific-CSS3 med SCSS

Et av de kjedelige aspektene med CSS3 er hvor bred støtten egentlig er, men at man da ofte må inkludere flere linjer med vendor-specific CSS. Samtidig er det nødvendig å inkludere alle. Enkelte designere inkluderer kun webkit-varianten siden det inkluderer Chrome, Safari, iOS og Android, men dette er en farlig trend. På linje med grusomheten "This page works best in Internet Explorer 6" får man et dårligere internett. Alle gode designere inkludere så mange nettlesere som mulig.

En lineær gradient i bakgrunnen, fra topp til bunn har relativt enkel syntaks:

background-image: linear-gradient(to bottom,#ffffff,#dddddd);

Men som vi kan se av http://caniuse.com/css-gradients krever alle nettleserne sin egen prefix da ingen er helt ferdige med implementeringen av css-gradients. Med alle prefixene vil hele blokken se slik ut:

background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
background-image: -webkit-linear-gradient(top,#ffffff,#dddddd);
background-image: -moz-linear-gradient(top,#ffffff,#dddddd);
background-image: -ms-linear-gradient(top,#ffffff,#dddddd);
background-image: -o-linear-gradient(top,#ffffff,#dddddd);
background-image: linear-gradient(top,#ffffff,#dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0);

Med to webkit varianter, prefixer for alle nettlesere, en "ekte implementering" som ikke er støttet av noen enda (men vil være det i fremtiden) samt et gammelt microsoft filter for deres utdaterte nettlesere er dette et mareritt å skrive(huske) for alle webdesignere.

Vi har verktøy som http://css3please.com som hjelper oss med syntaksen for de forskjellige prefixene, og så kan vi dobbelsjekke med http://caniuse.com om vi har med alle prefixene vi trenger, men allikevel tar det lengre tid enn nødvendig.

SCSS - Sassy CSS
SASS er en forlengelse av CSS, det gir oss muligheter for å bruke variabler, funksjoner og mye mer. SCSS er SASS med CSS syntaks. Det vil si; alle CSS ark er også SCSS ark, du trenger ikke endre på det du allerede har for å legge til SCSS muligheter. SCSS filene dine kompileres til CSS-ark til slutt da nettlesere ikke forstår SCSS. Dette er ikke en bruksanvisning i alt SCSS kan. Les mer om SASS på http://sass-lang.com/

Mixins and Includes
I vårt tilfelle med gradients skal vi bare innom en av mulighetene i SCSS, Mixins. En Mixin er en funksjon/metode slik vi kjenner de fra andre programmeringsspråk. Den kan ta imot variabler og lage output for oss.

I SCSS defineres en ny funksjon/mixin med @mixin og variabler bruker '$' som prefix, bortsett fra det brukes ordinært krøll-parantes-språk. (curly-bracket language).

@mixin name( ... $args ) {
$key: $value;
}

Mixins kalles opp i CSS'en med @include name( ... $args);.

Tilbake til vår lineære gradient
Gradienten vår (slik vi skrev den lengre opp) har to variabler, topp-farge og bunn-farge som gjentas hele veien gjennom. Ellers er det svært lite som endres.

Vår mixin ser da slik ut:

@mixin linear-gradient( $top, $bottom ) {
background-image: -webkit-gradient(linear, left top, left bottom, from($top), to($bottom));
background-image: -webkit-linear-gradient(top, $top, $bottom );
background-image: -moz-linear-gradient(top, $top, $bottom );
background-image: -ms-linear-gradient(top, $top, $bottom );
background-image: -o-linear-gradient(top, $top, $bottom );
background-image: linear-gradient(to bottom, $top, $bottom );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}', GradientType=0);
}

Og i SCSS arket kan vi da skrive.

.gradient-box {
@include linear-gradient(#fff,#ddd); /* vil skrive ut hele blokken for oss med "riktige" farger. */
}

Alle box-shadows, border-radius, gradients og andre css3-effekter som krever flere linjer med "vendor-specific prefixes" benytter slike mixin's nå på vår nettside. Ta en titt på: http://wiseonlineservices.com

Andre ressurser for denne artikkelen:
http://sass-lang.com/
http://mhs.github.com/scout-app/

Denne artikkelen er skrevet av +Herman Hassel for +Wise Online Services
2
1
Herman Hassel's profile photo
Add a comment...