WAT ZIJN CSS-VARIABELEN?

Waar­om Css-variabelen veel krach­ti­ger zijn dan pre­pro­ces­sor-variabelen

Web Designer Magazine - - Creatief Met CSS4 & Html 5.1 -

Veel ont­wik­ke­laars ge­brui­ken variabelen in Css-pre­pro­ces­sors zo­als Sass/less om waar­den zo­als hexa­de­ci­ma­le kleur­co­des en font­groot­tes op te slaan. Daar­door kun­nen ze niet client-si­de wor­den bij­ge­werkt na­dat ze een­maal in­ge­steld zijn. Na­tuur­lijk kun je dan een waar­de ver­an­de­ren en het build­pro­ces op­nieuw uit­voe­ren, maar die waar­de kan niet door de website zelf ge­wij­zigd wor­den.

Dat kan wel met Css-variabelen om­dat je die met de Javascript-func­ties get­pro­per­ty­va­lue() en set­pro­per­ty() client-si­de kunt up­da­ten. Daar­om zijn ze veel krach­ti­ger en lexi­be­ler dan pre­pro­ces­sor-variabelen.

Je kunt Css-variabelen na­tuur­lijk op de­zelf­de ma­nier als pre­pro­ces­sor-variabelen ge­brui­ken voor het op­slaan van kleur­waar­den en der­ge­lij­ke. Daar­door ben je min­der a han­ke­lijk van an­de­re par­tij­en en kun je voor die taak ge­woon te­rug­val­len op het schrij­ven van na­ti­ve CSS.

Css-variabelen bie­den mo­ge­lijk­he­den op het ge­bied van responsive de­sign. Het is daar­mee bij­voor­beeld heel mak­ke­lijk om het ras­ter voor een be­paal­de scherm­groot­te te wij­zi­gen. Met be­hulp van wis­kun­di­ge be­re­ke­nin­gen kun je dan an­de­re ei­gen­schap­pen op die waar­de ba­se­ren. Bij Sass kan dan niet om­dat je de waar­de van een ei­gen­schap daar op­nieuw moet de­cla­re­ren.

Je kunt de variabelen net zo­als an­de­re CSS cas­ca­de­ren. Dat be­te­kent dat je waar­den net als an­de­re Css-waar­den kunt bij­wer­ken. Het is niet met­een dui­de­lijk waar­om Css-variabelen be­ter zijn dan hun pre­pro­ces­sor-te­gen­han­gers. Hier- on­der staan en­ke­le din­gen die je niet in Sass, maar wel met Css-variabelen kunt doen. De vol­le­di­ge co­de (in­clu­sief de ge­bruik­te HTML) staat op co­de­pen.io/ motionimaging/pen/qra­qbd.

1. Ba­sis syn­taxis

Je de­cla­reert variabelen eerst in het ele­ment :root. Je schrijft ze als --va­ria­ble-na­me: va­lue en je ge­bruikt ze als pro­per­ty: var(--va­ria­ble-na­me). :root { --pri­ma­ry-co­lor: red; --se­conda­ry-co­lor: green; --spa­cing: 20px; } .tit­le { co­lor: var(--pri­ma­ry-co­lor); bor­der-bottom: 1px so­lid var (--se­conda­ry­co­lor); } .grid-item { flo­at: left; width: 300px; mar­gin: var(--spa­cing); pad­ding: var(--spa­cing); bor­der: 1px so­lid var(--se­conda­ry-co­lor); }

2. Wij­zig variabelen met een me­diaquery

Je kunt de waar­de van een va­ri­a­be­le ver­an­de­ren voor een be­paald scherm­for­maat. Je hoeft al­leen de waar­de van de va­ri­a­be­le te ver­an­de­ren, die wordt daar­na over­al toe­ge­past waar je die ge­bruikt hebt. Je hoeft het niet op de ele­men­ten toe te pas­sen, wat wel had­den ge­moe­ten als je een pre­pro­ces­sor had ge­bruikt. Hier wij­zig je de waar­de --spa­cing voor gro­te­re scherm­for­ma­ten. @me­dia (min-width: 1000px) { :root { --spa­cing: 40px;

3. Variabelen cas­ca­de­ren

In te­gen­stel­ling tot pre­pro­ces­sor-variabelen kun je Css-variabelen cas­ca­de­ren. Mis­schien wil je de pri­mai­re en se­con­dai­re kleu­ren in de laat­ste div om­wis­se­len: &:last-child { --pri­ma­ry-co­lor: blue; --se­conda­ry-co­lor: pur­ple;

}

4. Toe­gang met Javascript

Je kunt de waar­de van variabelen uit­le­zen en ver­an­de­ren met Javascript. Maak een in­voer­be­reik in HT­ML5 en lees dan de waar­de van die invoer uit en werk de waar­de van de va­ri­a­be­le bij. <in­put ty­pe=”ran­ge” id=”width” min=”100” max=”500” va­lue=”300”> $(‘#width’).on(‘chan­ge’, func­ti­on(e) {

do­cu­ment.do­cu­men­tele­ment.sty­le. set­pro­per­ty(‘--width’, this.va­lue +’px’); }); :root {

--width: 300px; } .grid-item {

width: var(--width); }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.