[{"data":1,"prerenderedAt":773},["ShallowReactive",2],{"search-entries":3,"settings-global":47,"layout-content-page-\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen":51,"layout-content-post-\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen":75,"i-lucide:arrow-left":484,"navigation-pages":488,"authors-global":492,"\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen":494},[4,10,17,23,28,34,39],{"title":5,"description":6,"path":7,"tags":8},"Responsive aspect ratio in CSS","Hoe maak je een responsive aspect ratio in CSS? Een aspect ratio is bijvoorbeeld toepasbaar op afbeeldingen, video’s, placeholders en iframes.","\u002F2017-04-18-responsive-aspect-ratio-in-css",[9],"CSS",{"title":11,"description":12,"path":13,"tags":14},"Sketch plugin tips voor een snellere workflow","Voor het versnellen van je workflow in Sketch, de digitale ontwerptool voor designers, zijn de volgende plugins interessant.","\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow",[15,16],"Design","Productiviteit",{"title":18,"description":19,"path":20,"tags":21},"WebKit naar watchOS 5","Tijdens de WWDC 2018 van Apple was er een leuk nieuwtje. WebKit komt naar watchOS. Dit betekent dat je, zodra watchOS 5 uit is, web content kan gaan consumeren!","\u002F2018-06-11-webkit-naar-watchos-5",[22],"Apple",{"title":24,"description":25,"path":26,"tags":27},"CSS variabelen en preprocessor variabelen","In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. De voor- en nadelen.","\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],{"title":29,"description":30,"path":31,"tags":32},"Adobe XD en line-height","Als designer & developer werk je met verschillende tools. Hierbij loop je soms tegen dingen aan die je werkproces verstoren. Zo ook bij Adobe XD.","\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"Adobe",{"title":35,"description":36,"path":37,"tags":38},"Mijn favoriete Mac apps 2022","Om de zoveel tijd is het de moeite waard om Mac apps te proberen die iets leuks toevoegen of je productiviteit verhogen. Dit jaar heb ik ook weer een lijstje met apps die ik met plezier gebruik.","\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],{"title":40,"description":41,"path":42,"tags":43},"Array-index in een Shopify-metaobject list","Een metaobject-list-metafield in Shopify Liquid kun je niet betrouwbaar met een index uitlezen. Deze dubbele toepassing van het reverse-filter is een workaround.","\u002F2026-02-14-array-index-in-een-shopify-metaobject-list",[44,45,46],"Shopify","Liquid","Metaobjects",{"id":48,"title":49,"avatar_image":50,"banner_image":51,"description":52,"extension":53,"github_url":51,"lang":54,"linkedin_url":55,"meta":56,"navigation":57,"noindex":70,"open_for_work":70,"origin":71,"stem":72,"tagline":73,"__hash__":74},"settings\u002Fsettings.yaml","Roy","\u002Froy.jpeg",null,"Ik help mooie merken met Shopify, thema's en maatwerkoplossingen die goed werken én goed voelen. Daarnaast schrijf ik op mijn blog over technologie, design en dingen die ik interessant vind.","yaml","nl","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froyvn",{},[58,61,64,67],{"title":59,"to":60},"Home","\u002F",{"title":62,"to":63},"Over","\u002Fover",{"title":65,"to":66},"Snippets","https:\u002F\u002Fgist.github.com\u002Froyvn",{"title":68,"to":69},"Domaine","https:\u002F\u002Fdomaineworldwide.com\u002Fnl?ref=roy",false,"https:\u002F\u002Froy.vanneden.nl","settings","Frontend Engineer @ Domaine","tf8ovhsPty76hKyv1-L8VwYyUCgt3Bu1SLXbbfQGwpM",{"id":76,"title":24,"authors":77,"body":79,"date":476,"description":25,"draft":70,"extension":477,"image":478,"meta":479,"navigation":173,"noindex":70,"path":26,"readingTime":170,"seo":480,"stem":481,"tags":482,"__hash__":483},"posts\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen.md",[78],"roy",{"type":80,"value":81,"toc":466},"minimark",[82,100,106,112,117,125,215,218,255,258,262,350,353,357,360,363,366,375,389,392,396,399,402,424,434,438,441,445,462],[83,84,85,86,93,94,99],"p",{},"In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. Nu zijn variabelen al lang onderdeel van verschillende ",[87,88,92],"a",{"href":89,"rel":90},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FCSS_preprocessor",[91],"nofollow","preprocessors",". Native heeft CSS nu ook ",[87,95,98],{"href":96,"rel":97},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FUsing_CSS_variables",[91],"custom properties"," (hierna CSS variabelen genoemd). Beide hebben zo hun voor- en nadelen afhankelijk van de situatie waarin je ze toepast. Welke dat zijn lees je hier.",[101,102,103],"blockquote",{},[83,104,105],{},"CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.",[83,107,108],{},[87,109,111],{"href":96,"rel":110},[91],"MDN web docs",[113,114,116],"h2",{"id":115},"preprocessor-variabelen","Preprocessor variabelen",[83,118,119,120,124],{},"In het voorbeeld hieronder gebruik ik preprocessor ",[87,121,123],{"href":122},"http:\u002F\u002Fsass-lang.com\u002F","Sass"," (Syntactically Awesome StyleSheets) variabelen in SCSS syntax.",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-scss shiki shiki-themes github-light github-dark","$body-bg: #fafafa;\n$black: #000000;\n\nbody {\n  background-color: $body-bg;\n  color: $black;\n}\n","scss","",[133,134,135,155,168,175,185,197,209],"code",{"__ignoreMap":131},[136,137,140,144,148,152],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"s4XuR","$body-bg",[136,145,147],{"class":146},"sVt8B",": ",[136,149,151],{"class":150},"sj4cs","#fafafa",[136,153,154],{"class":146},";\n",[136,156,158,161,163,166],{"class":138,"line":157},2,[136,159,160],{"class":142},"$black",[136,162,147],{"class":146},[136,164,165],{"class":150},"#000000",[136,167,154],{"class":146},[136,169,171],{"class":138,"line":170},3,[136,172,174],{"emptyLinePlaceholder":173},true,"\n",[136,176,178,182],{"class":138,"line":177},4,[136,179,181],{"class":180},"s9eBZ","body",[136,183,184],{"class":146}," {\n",[136,186,188,191,193,195],{"class":138,"line":187},5,[136,189,190],{"class":150},"  background-color",[136,192,147],{"class":146},[136,194,143],{"class":142},[136,196,154],{"class":146},[136,198,200,203,205,207],{"class":138,"line":199},6,[136,201,202],{"class":150},"  color",[136,204,147],{"class":146},[136,206,160],{"class":142},[136,208,154],{"class":146},[136,210,212],{"class":138,"line":211},7,[136,213,214],{"class":146},"}\n",[83,216,217],{},"Nadat de preprocessor SCSS heeft omgezet naar CSS krijg je het volgende als resultaat. Simpel en basic.",[126,219,223],{"className":220,"code":221,"language":222,"meta":131,"style":131},"language-css shiki shiki-themes github-light github-dark","body {\n  background-color: #fafafa;\n  color: #000000;\n}\n","css",[133,224,225,231,241,251],{"__ignoreMap":131},[136,226,227,229],{"class":138,"line":139},[136,228,181],{"class":180},[136,230,184],{"class":146},[136,232,233,235,237,239],{"class":138,"line":157},[136,234,190],{"class":150},[136,236,147],{"class":146},[136,238,151],{"class":150},[136,240,154],{"class":146},[136,242,243,245,247,249],{"class":138,"line":170},[136,244,202],{"class":150},[136,246,147],{"class":146},[136,248,165],{"class":150},[136,250,154],{"class":146},[136,252,253],{"class":138,"line":177},[136,254,214],{"class":146},[83,256,257],{},"Hetzelfde resultaat behaal je ook met CSS variabelen.",[113,259,261],{"id":260},"css-variabelen","CSS variabelen",[126,263,265],{"className":220,"code":264,"language":222,"meta":131,"style":131},":root {\n  --body-bg: #fafafa;\n  --black: #000000;\n}\n\nbody {\n  background-color: var(--body-bg);\n  color: var(--black);\n}\n",[133,266,267,275,286,297,301,305,311,329,345],{"__ignoreMap":131},[136,268,269,273],{"class":138,"line":139},[136,270,272],{"class":271},"sScJk",":root",[136,274,184],{"class":146},[136,276,277,280,282,284],{"class":138,"line":157},[136,278,279],{"class":142},"  --body-bg",[136,281,147],{"class":146},[136,283,151],{"class":150},[136,285,154],{"class":146},[136,287,288,291,293,295],{"class":138,"line":170},[136,289,290],{"class":142},"  --black",[136,292,147],{"class":146},[136,294,165],{"class":150},[136,296,154],{"class":146},[136,298,299],{"class":138,"line":177},[136,300,214],{"class":146},[136,302,303],{"class":138,"line":187},[136,304,174],{"emptyLinePlaceholder":173},[136,306,307,309],{"class":138,"line":199},[136,308,181],{"class":180},[136,310,184],{"class":146},[136,312,313,315,317,320,323,326],{"class":138,"line":211},[136,314,190],{"class":150},[136,316,147],{"class":146},[136,318,319],{"class":150},"var",[136,321,322],{"class":146},"(",[136,324,325],{"class":142},"--body-bg",[136,327,328],{"class":146},");\n",[136,330,332,334,336,338,340,343],{"class":138,"line":331},8,[136,333,202],{"class":150},[136,335,147],{"class":146},[136,337,319],{"class":150},[136,339,322],{"class":146},[136,341,342],{"class":142},"--black",[136,344,328],{"class":146},[136,346,348],{"class":138,"line":347},9,[136,349,214],{"class":146},[83,351,352],{},"Dit doet precies hetzelfde als het eerder gegeven Sass voorbeeld.",[113,354,356],{"id":355},"voor-en-nadelen","Voor- en nadelen",[83,358,359],{},"Er zijn wel situaties te bedenken waar het gebruik van de ene een voordeel kan hebben ten opzichte van de ander.",[113,361,116],{"id":362},"preprocessor-variabelen-1",[83,364,365],{},"Het grootste voordeel ten opzichte van CSS variabelen is dat een preprocessor geen last heeft van falende browser compatibiliteit.",[83,367,368,369,374],{},"Op het moment van schrijven laat een check op ",[87,370,373],{"href":371,"rel":372},"https:\u002F\u002Fwww.caniuse.com\u002F#feat=css-variables",[91],"caniuse.com"," zien dat de ondersteuning voor CSS variabelen redelijk goed is. Een aantal browsers valt zoals verwacht wel buiten de boot. Gebruikt jouw doelgroep voornamelijk browsers zoals IE 11 of meer oude meuk 😂 dan kan je niet anders dan alleen preprocessor variabelen gebruiken.",[376,377,378,379,385],"figure",{},"\n  ",[380,381],"img",{"src":382,"alt":383,"loading":384},"\u002Fcss-custom-properties-support.png","CSS custom properties support","lazy",[386,387,388],"figcaption",{},"Browser support voor CSS variabelen",[83,390,391],{},"Browser support voor CSS variabelen (CSS Custom Properties) is redelijk goed, namelijk 87,54% wereldwijd (rechtsboven zichtbaar).",[393,394,261],"h3",{"id":395},"css-variabelen-1",[83,397,398],{},"Het eerste voordeel is dat je geen preprocessor nodig hebt. Alleen een browser die het ondersteunt en je kan aan de slag.",[83,400,401],{},"Het voordeel van CSS variabelen is dat je de variabelen kan beïnvloeden tijdens je gebruik\u002Fbezoek van een website in je browser. Dit kan op style niveau. Denk bijvoorbeeld aan breakpoints met media queries.",[83,403,404,405,408,409,412,413,416,417,420,421,423],{},"Ook met JavaScript kan je CSS variabelen aanpassen. In het volgende voorbeeld kan je door simpel de CSS variabele op de ",[406,407],"root",{}," aan te passen kleurwijzigingen doen door heel je site. Als het ware worden de CSS variabelen gewoon bijgewerkt. In het voorbeeld hieronder nemen de ",[133,410,411],{},"h1"," en ",[133,414,415],{},".tile"," gewoon de kleur van variabele ",[133,418,419],{},"var(--black)"," uit de ",[406,422],{}," over.",[425,426,433],"iframe",{"height":427,"scrolling":428,"title":429,"src":430,"frameBorder":428,"allowTransparency":431,"allowFullScreen":431,"style":432},265,"no","CSS Custom Properties test","\u002F\u002Fcodepen.io\u002Froyvn\u002Fembed\u002FrovMyM\u002F?height=265&theme-id=0&default-tab=js,result","true","width: 100%;","See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Froyvn\u002Fpen\u002FrovMyM\u002F'>CSS Custom Properties test\u003C\u002Fa> by Roy (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Froyvn'>@royvn\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n",[113,435,437],{"id":436},"tot-slot","Tot slot",[83,439,440],{},"CSS variabelen zijn ongetwijfeld een goede toevoeging. Afhankelijk van je doelgroep en eigen wensen kan je een afweging maken welke soort variabelen te gebruiken. Geen van beide is goed of slecht. Het is wel leuk om te zien hoe CSS variabelen default steeds beter ondersteund worden door browsers.",[113,442,444],{"id":443},"links","Links",[446,447,448,455],"ul",{},[449,450,451,452],"li",{},"Mozilla, (2018, 22 december). Using CSS custom properties (variables). Geraadpleegd op 20 januari 2019, van ",[87,453,96],{"href":96,"rel":454},[91],[449,456,457,458],{},"Sass, (2006 – 2018). Sass: Sass Basics. Geraadpleegd op 20 januari 2019, van ",[87,459,460],{"href":460,"rel":461},"http:\u002F\u002Fsass-lang.com\u002Fguide",[91],[463,464,465],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":131,"searchDepth":157,"depth":157,"links":467},[468,469,470,471,474,475],{"id":115,"depth":157,"text":116},{"id":260,"depth":157,"text":261},{"id":355,"depth":157,"text":356},{"id":362,"depth":157,"text":116,"children":472},[473],{"id":395,"depth":170,"text":261},{"id":436,"depth":157,"text":437},{"id":443,"depth":157,"text":444},"2019-01-20T14:00:00.000Z","md","\u002Fcss-variabelen-en-preprocessor-variabelen.jpg",{},{"title":24,"description":25},"2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],"GZQfQOuHeuxxxYu525tQm-HKTp2FLjEyDUKM43mUuc0",{"left":485,"top":485,"width":486,"height":486,"rotate":485,"vFlip":70,"hFlip":70,"body":487},0,24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",[489,490],{"path":63,"draft":173},{"path":491,"draft":173},"\u002Fstyles",[493],{"slug":78,"name":49,"bio":52,"image":50},{"type":495,"document":496},"post",{"id":76,"title":24,"authors":497,"body":498,"date":476,"description":25,"draft":70,"extension":477,"image":478,"meta":770,"navigation":173,"noindex":70,"path":26,"readingTime":170,"seo":771,"stem":481,"tags":772,"__hash__":483},[78],{"type":80,"value":499,"toc":760},[500,508,512,517,519,523,581,583,617,619,621,697,699,701,703,705,707,712,718,720,722,724,726,738,740,742,744,746,758],[83,501,85,502,93,505,99],{},[87,503,92],{"href":89,"rel":504},[91],[87,506,98],{"href":96,"rel":507},[91],[101,509,510],{},[83,511,105],{},[83,513,514],{},[87,515,111],{"href":96,"rel":516},[91],[113,518,116],{"id":115},[83,520,119,521,124],{},[87,522,123],{"href":122},[126,524,525],{"className":128,"code":129,"language":130,"meta":131,"style":131},[133,526,527,537,547,551,557,567,577],{"__ignoreMap":131},[136,528,529,531,533,535],{"class":138,"line":139},[136,530,143],{"class":142},[136,532,147],{"class":146},[136,534,151],{"class":150},[136,536,154],{"class":146},[136,538,539,541,543,545],{"class":138,"line":157},[136,540,160],{"class":142},[136,542,147],{"class":146},[136,544,165],{"class":150},[136,546,154],{"class":146},[136,548,549],{"class":138,"line":170},[136,550,174],{"emptyLinePlaceholder":173},[136,552,553,555],{"class":138,"line":177},[136,554,181],{"class":180},[136,556,184],{"class":146},[136,558,559,561,563,565],{"class":138,"line":187},[136,560,190],{"class":150},[136,562,147],{"class":146},[136,564,143],{"class":142},[136,566,154],{"class":146},[136,568,569,571,573,575],{"class":138,"line":199},[136,570,202],{"class":150},[136,572,147],{"class":146},[136,574,160],{"class":142},[136,576,154],{"class":146},[136,578,579],{"class":138,"line":211},[136,580,214],{"class":146},[83,582,217],{},[126,584,585],{"className":220,"code":221,"language":222,"meta":131,"style":131},[133,586,587,593,603,613],{"__ignoreMap":131},[136,588,589,591],{"class":138,"line":139},[136,590,181],{"class":180},[136,592,184],{"class":146},[136,594,595,597,599,601],{"class":138,"line":157},[136,596,190],{"class":150},[136,598,147],{"class":146},[136,600,151],{"class":150},[136,602,154],{"class":146},[136,604,605,607,609,611],{"class":138,"line":170},[136,606,202],{"class":150},[136,608,147],{"class":146},[136,610,165],{"class":150},[136,612,154],{"class":146},[136,614,615],{"class":138,"line":177},[136,616,214],{"class":146},[83,618,257],{},[113,620,261],{"id":260},[126,622,623],{"className":220,"code":264,"language":222,"meta":131,"style":131},[133,624,625,631,641,651,655,659,665,679,693],{"__ignoreMap":131},[136,626,627,629],{"class":138,"line":139},[136,628,272],{"class":271},[136,630,184],{"class":146},[136,632,633,635,637,639],{"class":138,"line":157},[136,634,279],{"class":142},[136,636,147],{"class":146},[136,638,151],{"class":150},[136,640,154],{"class":146},[136,642,643,645,647,649],{"class":138,"line":170},[136,644,290],{"class":142},[136,646,147],{"class":146},[136,648,165],{"class":150},[136,650,154],{"class":146},[136,652,653],{"class":138,"line":177},[136,654,214],{"class":146},[136,656,657],{"class":138,"line":187},[136,658,174],{"emptyLinePlaceholder":173},[136,660,661,663],{"class":138,"line":199},[136,662,181],{"class":180},[136,664,184],{"class":146},[136,666,667,669,671,673,675,677],{"class":138,"line":211},[136,668,190],{"class":150},[136,670,147],{"class":146},[136,672,319],{"class":150},[136,674,322],{"class":146},[136,676,325],{"class":142},[136,678,328],{"class":146},[136,680,681,683,685,687,689,691],{"class":138,"line":331},[136,682,202],{"class":150},[136,684,147],{"class":146},[136,686,319],{"class":150},[136,688,322],{"class":146},[136,690,342],{"class":142},[136,692,328],{"class":146},[136,694,695],{"class":138,"line":347},[136,696,214],{"class":146},[83,698,352],{},[113,700,356],{"id":355},[83,702,359],{},[113,704,116],{"id":362},[83,706,365],{},[83,708,368,709,374],{},[87,710,373],{"href":371,"rel":711},[91],[376,713,378,714,716],{},[380,715],{"src":382,"alt":383,"loading":384},[386,717,388],{},[83,719,391],{},[393,721,261],{"id":395},[83,723,398],{},[83,725,401],{},[83,727,404,728,408,730,412,732,416,734,420,736,423],{},[406,729],{},[133,731,411],{},[133,733,415],{},[133,735,419],{},[406,737],{},[425,739,433],{"height":427,"scrolling":428,"title":429,"src":430,"frameBorder":428,"allowTransparency":431,"allowFullScreen":431,"style":432},[113,741,437],{"id":436},[83,743,440],{},[113,745,444],{"id":443},[446,747,748,753],{},[449,749,451,750],{},[87,751,96],{"href":96,"rel":752},[91],[449,754,457,755],{},[87,756,460],{"href":460,"rel":757},[91],[463,759,465],{},{"title":131,"searchDepth":157,"depth":157,"links":761},[762,763,764,765,768,769],{"id":115,"depth":157,"text":116},{"id":260,"depth":157,"text":261},{"id":355,"depth":157,"text":356},{"id":362,"depth":157,"text":116,"children":766},[767],{"id":395,"depth":170,"text":261},{"id":436,"depth":157,"text":437},{"id":443,"depth":157,"text":444},{},{"title":24,"description":25},[9],1785620948592]