[{"data":1,"prerenderedAt":478},["ShallowReactive",2],{"search-all-posts":3,"settings-global":47,"\u002Fblog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen":70},[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.","\u002Fblog\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.","\u002Fblog\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!","\u002Fblog\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.","\u002Fblog\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.","\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"Adobe",{"title":35,"description":36,"path":37,"tags":38},"Mijn favoriete Mac apps 2022","MacOS en apps, ik zou niet zonder kunnen. Persoonlijk gebruik ik een handje vol apps die wellicht voor jou ook de moeite waard zijn.","\u002Fblog\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],{"title":40,"description":41,"path":42,"tags":43},"Shopify en shop munteenheid symbool","Shopify's Liquid shop object met geneste currency object shop.currency.symbol werkt niet. Als workaround kan je het cart object gebruiken.","\u002Fblog\u002F2022-08-07-shopify-en-shop-munteenheid-symbol",[44,45,46],"Shopify","Snippets","Notities",{"id":48,"title":49,"description":50,"extension":51,"github_url":52,"lang":53,"linkedin_url":54,"meta":55,"navigation":56,"noindex":67,"stem":68,"__hash__":69},"settings\u002Fsettings.yaml","Roy","Inspiratie en slimme oplossingen voor Shopify & tech.","yaml",null,"nl","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froy-van-neden-10549761",{},[57,60,63,65],{"title":58,"to":59},"Home","\u002F",{"title":61,"to":62},"Blog","\u002Fblog",{"title":45,"to":64},"https:\u002F\u002Fgist.github.com\u002Froyvn",{"title":66,"to":54},"LinkedIn",false,"settings","-UwRePwvcv6cIOnnqX6vHLS1vLrRiCvBGOSHiNv7qA0",{"id":71,"title":24,"authors":72,"body":73,"date":470,"description":25,"draft":67,"extension":471,"image":472,"meta":473,"navigation":167,"noindex":67,"path":26,"readingTime":164,"seo":474,"stem":475,"tags":476,"__hash__":477},"posts\u002Fblog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen.md",[49],{"type":74,"value":75,"toc":460},"minimark",[76,94,100,106,111,119,209,212,249,252,256,344,347,351,354,357,360,369,383,386,390,393,396,418,428,432,435,439,456],[77,78,79,80,87,88,93],"p",{},"In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. Nu zijn variabelen al lang onderdeel van verschillende ",[81,82,86],"a",{"href":83,"rel":84},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FCSS_preprocessor",[85],"nofollow","preprocessors",". Native heeft CSS nu ook ",[81,89,92],{"href":90,"rel":91},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FUsing_CSS_variables",[85],"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.",[95,96,97],"blockquote",{},[77,98,99],{},"CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.",[77,101,102],{},[81,103,105],{"href":90,"rel":104},[85],"MDN web docs",[107,108,110],"h2",{"id":109},"preprocessor-variabelen","Preprocessor variabelen",[77,112,113,114,118],{},"In het voorbeeld hieronder gebruik ik preprocessor ",[81,115,117],{"href":116},"http:\u002F\u002Fsass-lang.com\u002F","Sass"," (Syntactically Awesome StyleSheets) variabelen in SCSS syntax.",[120,121,126],"pre",{"className":122,"code":123,"language":124,"meta":125,"style":125},"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","",[127,128,129,149,162,169,179,191,203],"code",{"__ignoreMap":125},[130,131,134,138,142,146],"span",{"class":132,"line":133},"line",1,[130,135,137],{"class":136},"s4XuR","$body-bg",[130,139,141],{"class":140},"sVt8B",": ",[130,143,145],{"class":144},"sj4cs","#fafafa",[130,147,148],{"class":140},";\n",[130,150,152,155,157,160],{"class":132,"line":151},2,[130,153,154],{"class":136},"$black",[130,156,141],{"class":140},[130,158,159],{"class":144},"#000000",[130,161,148],{"class":140},[130,163,165],{"class":132,"line":164},3,[130,166,168],{"emptyLinePlaceholder":167},true,"\n",[130,170,172,176],{"class":132,"line":171},4,[130,173,175],{"class":174},"s9eBZ","body",[130,177,178],{"class":140}," {\n",[130,180,182,185,187,189],{"class":132,"line":181},5,[130,183,184],{"class":144},"  background-color",[130,186,141],{"class":140},[130,188,137],{"class":136},[130,190,148],{"class":140},[130,192,194,197,199,201],{"class":132,"line":193},6,[130,195,196],{"class":144},"  color",[130,198,141],{"class":140},[130,200,154],{"class":136},[130,202,148],{"class":140},[130,204,206],{"class":132,"line":205},7,[130,207,208],{"class":140},"}\n",[77,210,211],{},"Nadat de preprocessor SCSS heeft omgezet naar CSS krijg je het volgende als resultaat. Simpel en basic.",[120,213,217],{"className":214,"code":215,"language":216,"meta":125,"style":125},"language-css shiki shiki-themes github-light github-dark","body {\n  background-color: #fafafa;\n  color: #000000;\n}\n","css",[127,218,219,225,235,245],{"__ignoreMap":125},[130,220,221,223],{"class":132,"line":133},[130,222,175],{"class":174},[130,224,178],{"class":140},[130,226,227,229,231,233],{"class":132,"line":151},[130,228,184],{"class":144},[130,230,141],{"class":140},[130,232,145],{"class":144},[130,234,148],{"class":140},[130,236,237,239,241,243],{"class":132,"line":164},[130,238,196],{"class":144},[130,240,141],{"class":140},[130,242,159],{"class":144},[130,244,148],{"class":140},[130,246,247],{"class":132,"line":171},[130,248,208],{"class":140},[77,250,251],{},"Hetzelfde resultaat behaal je ook met CSS variabelen.",[107,253,255],{"id":254},"css-variabelen","CSS variabelen",[120,257,259],{"className":214,"code":258,"language":216,"meta":125,"style":125},":root {\n  --body-bg: #fafafa;\n  --black: #000000;\n}\n\nbody {\n  background-color: var(--body-bg);\n  color: var(--black);\n}\n",[127,260,261,269,280,291,295,299,305,323,339],{"__ignoreMap":125},[130,262,263,267],{"class":132,"line":133},[130,264,266],{"class":265},"sScJk",":root",[130,268,178],{"class":140},[130,270,271,274,276,278],{"class":132,"line":151},[130,272,273],{"class":136},"  --body-bg",[130,275,141],{"class":140},[130,277,145],{"class":144},[130,279,148],{"class":140},[130,281,282,285,287,289],{"class":132,"line":164},[130,283,284],{"class":136},"  --black",[130,286,141],{"class":140},[130,288,159],{"class":144},[130,290,148],{"class":140},[130,292,293],{"class":132,"line":171},[130,294,208],{"class":140},[130,296,297],{"class":132,"line":181},[130,298,168],{"emptyLinePlaceholder":167},[130,300,301,303],{"class":132,"line":193},[130,302,175],{"class":174},[130,304,178],{"class":140},[130,306,307,309,311,314,317,320],{"class":132,"line":205},[130,308,184],{"class":144},[130,310,141],{"class":140},[130,312,313],{"class":144},"var",[130,315,316],{"class":140},"(",[130,318,319],{"class":136},"--body-bg",[130,321,322],{"class":140},");\n",[130,324,326,328,330,332,334,337],{"class":132,"line":325},8,[130,327,196],{"class":144},[130,329,141],{"class":140},[130,331,313],{"class":144},[130,333,316],{"class":140},[130,335,336],{"class":136},"--black",[130,338,322],{"class":140},[130,340,342],{"class":132,"line":341},9,[130,343,208],{"class":140},[77,345,346],{},"Dit doet precies hetzelfde als het eerder gegeven Sass voorbeeld.",[107,348,350],{"id":349},"voor-en-nadelen","Voor- en nadelen",[77,352,353],{},"Er zijn wel situaties te bedenken waar het gebruik van de ene een voordeel kan hebben ten opzichte van de ander.",[107,355,110],{"id":356},"preprocessor-variabelen-1",[77,358,359],{},"Het grootste voordeel ten opzichte van CSS variabelen is dat een preprocessor geen last heeft van falende browser compatibiliteit.",[77,361,362,363,368],{},"Op het moment van schrijven laat een check op ",[81,364,367],{"href":365,"rel":366},"https:\u002F\u002Fwww.caniuse.com\u002F#feat=css-variables",[85],"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.",[370,371,372,373,379],"figure",{},"\n  ",[374,375],"img",{"src":376,"alt":377,"loading":378},"\u002Fcss-custom-properties-support.png","CSS custom properties support","lazy",[380,381,382],"figcaption",{},"Browser support voor CSS variabelen",[77,384,385],{},"Browser support voor CSS variabelen (CSS Custom Properties) is redelijk goed, namelijk 87,54% wereldwijd (rechtsboven zichtbaar).",[387,388,255],"h3",{"id":389},"css-variabelen-1",[77,391,392],{},"Het eerste voordeel is dat je geen preprocessor nodig hebt. Alleen een browser die het ondersteunt en je kan aan de slag.",[77,394,395],{},"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.",[77,397,398,399,402,403,406,407,410,411,414,415,417],{},"Ook met JavaScript kan je CSS variabelen aanpassen. In het volgende voorbeeld kan je door simpel de CSS variabele op de ",[400,401],"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 ",[127,404,405],{},"h1"," en ",[127,408,409],{},".tile"," gewoon de kleur van variabele ",[127,412,413],{},"var(--black)"," uit de ",[400,416],{}," over.",[419,420,427],"iframe",{"height":421,"scrolling":422,"title":423,"src":424,"frameBorder":422,"allowTransparency":425,"allowFullScreen":425,"style":426},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",[107,429,431],{"id":430},"tot-slot","Tot slot",[77,433,434],{},"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.",[107,436,438],{"id":437},"links","Links",[440,441,442,449],"ul",{},[443,444,445,446],"li",{},"Mozilla, (2018, 22 december). Using CSS custom properties (variables). Geraadpleegd op 20 januari 2019, van ",[81,447,90],{"href":90,"rel":448},[85],[443,450,451,452],{},"Sass, (2006 – 2018). Sass: Sass Basics. Geraadpleegd op 20 januari 2019, van ",[81,453,454],{"href":454,"rel":455},"http:\u002F\u002Fsass-lang.com\u002Fguide",[85],[457,458,459],"style",{},"html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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 pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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}",{"title":125,"searchDepth":151,"depth":151,"links":461},[462,463,464,465,468,469],{"id":109,"depth":151,"text":110},{"id":254,"depth":151,"text":255},{"id":349,"depth":151,"text":350},{"id":356,"depth":151,"text":110,"children":466},[467],{"id":389,"depth":164,"text":255},{"id":430,"depth":151,"text":431},{"id":437,"depth":151,"text":438},"2019-01-20T14:00:00.000Z","md","\u002Fcss-variabelen-en-preprocessor-variabelen.jpg",{},{"title":24,"description":25},"blog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],"J8a4O1yY2mq7Tuf21oz8cQWIbKxFMxAdT0bVD0_3RnY",1780848345641]