2d:null 2e:["$","title",null,{"children":"CSS Variables #1: Basics | Gabriel Gianordoli | Observable"}] 33:T437,html`

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, iaculis ac semper eget, blandit vel leo. Nam id dolor eget dui tristique blandit. Proin sed maximus libero, at porta quam. Nulla vulputate, neque quis ornare interdum, dolor velit euismod tortor

Quis rutrum augue leo quis dolor. Donec nulla leo, molestie eget nisl vehicula, interdum gravida odio. Nam dictum quis metus vitae sollicitudin. Fusce bibendum erat tristique facilisis fringilla. Mauris et justo varius, ornare lacus sit amet, imperdiet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean finibus urna sed laoreet semper. Fusce egestas tortor vitae commodo molestie. Quisque a lacus elit.

`34:[] 31:{"id":"7659aa488c5df1fc","slug":"css-variables","title":"CSS Variables #1: Basics","thumbnail":"44228e41994d8449ac8b1376efb5647256370038a7b59b4a6ac1168f2979a1a9","access_level":"public","create_time":"$D2021-07-21T20:58:49.463Z","update_time":"$D2021-08-09T18:47:18.112Z","view_time":null,"first_public_time":"$D2021-08-05T21:25:13.722Z","has_unpublished_edits":null,"fork":false,"stars":29,"starred":false,"owner":{"type":"team","id":"9db89550eb5ae0fc","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":"starter_2024"},"version":386,"publish_version":386,"role":null,"authored":false,"authors":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null}],"members":[{"type":"individual","id":"4572a5c0b93ce228","login":"gianordoli","name":"Gabriel Gianordoli","avatar_url":"https://avatars-next.observableusercontent.com/d3e05a933bd179331db7766495fb22025a3cb6e860bd6fac3a542c36e4512aa2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"CSS Variables #1: Basics","cells":[{"id":0,"value":"# CSS Variables #1: Basics\n\nCSS variables is a native way of creating ... variables in CSS! Their official name is actually “CSS custom properties” and they have been supported by [all modern browsers since at least 2017](https://caniuse.com/css-variables).\n\nUnlike preprocessors variables, CSS custom properties have access to the DOM. A consequence of that, and the greatest advantage of them over preprocessor variables, is the possibility of declaring values that change based on media queries. More on that later.\n\nFor now, let’s take a look at the basic syntax for declaring CSS variables.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"... with `root` meaning the document’s topmost level.\n\nNow if you want to use it in an element, you need to ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Content-awareness\n\nSo far this is not very different than what you would to with SASS. But SASS is a preprocessor and its variables never get actually shipped to the browser — think of it as a big find-and-replace task that runs when you’re developing things locally. CSS variables on the other hand are aware of its environment, meaning that you can write a lot less code for your media queries. If you want different values on mobile, for instance, you can simply:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md `In SASS, not only you would need to create a different \\`$padding-mobile\\` variable and, more importantly, reapply it on every element that uses it. On the code above, that’s not needed, because the browser will simply update the variable when on mobile.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md `## Calculations\n\nNow say that you want to base other layout values on that padding value. You can use \\`calc()\\` with CSS variables by doing:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md `## Scope\n\nSo far we are only using variables we set at the \\`root\\`. But we could also override those by setting them on a class, for instance.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md `The \\`:root\\` values were overriden here *only* because the same markup was placed inside of a \\`g-special-section\\` container. \nAlso, notice that the relationship between the elements we wrote via \\`calc()\\` — the space between the paragraphs is still 1/4 of the container’s padding — was preserved.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md `## Fallbacks\n\nImagine you are building a set of form components and you want to apply some minimal styling to them. How can you make them reusable and customizable without expecting people to write long css overrides or digging into your files to change a simple font style? CSS properties fallbacks to the rescue:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md `In the input above, \\`var(--form-color, blue)\\` means if \\`--form-color\\` has been defined, use that; otherwise, use blue. \nSo, if this component gets placed inside a parent that defines those variables, they will take over the default values:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"html `\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md `## Set using Javascript\n\nYou can also change the value of a variable via JS. Clicking the button below will pick a new random accent color for our text highlights:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof colorAccent = Inputs.button(\"Random color\", {value: 'blue', reduce: () => {\n const hue = Math.round(Math.random()*255);\n return `hsl(${hue}, 100%, 25%)`;\n}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"{\n document.documentElement.style.setProperty('--color-accent', colorAccent);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html`\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, iaculis ac semper eget, blandit vel leo. Nam id dolor eget dui tristique blandit. Proin sed maximus libero, at porta quam. Nulla vulputate, neque quis ornare interdum, dolor velit euismod tortor

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md `This is nice because you don’t need to select all of those elements and then apply the style change to each one. Just change one variable and the browser will do the trick for you. \nNote: \\`document.documentElement\\` refers to the \\`:root\\`. If your variable was set at some class level, you should change the selector accordingly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"## Next: tips and tricks\n\nOn the next notebook we will be seeing some more [practical uses of CSS variables](https://observablehq.com/@gianordoli/css-variables-2-tips-and-tricks).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"