CSS Variables vs. Preprocessor Variables

CSS variables weren't created just to be the CSS equivalent 0:00 of preprocessor variables, or even offer the same functionality as them. 0:04 Variables in CSS can do many things you can't do with preprocessor variables. 0:08 They each behave differently under certain circumstances. 0:12 In fact, it's like they're two different entities and live in separate worlds. 0:15 Let's look at why. 0:18 You see, preprocessors don't run in the browser. 0:20 The variables you declare living a source file in your machine. 0:24 Preprocessors just replace variables with static values when they're 0:27 compiled to CSS. 0:31 The browser knows nothing about the variables and 0:32 the variables themselves know nothing about your markup. 0:35 On the other hand, CSS variables are entirely more flexible than compiled code. 0:39 Because they live in the browser. 0:44 When you update a CSS variable's value, 0:46 the browser updates it anywhere it's referenced at runtime. 0:49 This gives them dynamic capabilities and opens up lots of interesting possibilities 0:53 than just replacing colors and font values. 0:57 For example, in a preprocessor you can't update the value of a variable from within 1:00 a media query. 1:04 So in this SAAS example, the headline classes margin-bottom value cannot be 1:05 changed to 2rem inside a media query by updating the gutter variable like this. 1:09 But you can with CSS variables. 1:13 Their values are updated live inside media queries. 1:15 For instance, in the latest style sheet for 1:19 this video, I see that the gutter variable is scoped to the root element, so 1:20 I'm going to change its value from 12 pixels to 1rem. 1:25 Then I'll scroll down and give the header a margin-bottom property that reference 1:28 the gutter variable as its value. 1:33 Also the cards on the page are being laid out with CSS grid via 1:41 the main content div. 1:46 So I'll add a gutter or gap between the cards. 1:48 First I'll target the class main-content and 1:52 add a grid-gap property with its value set to the gutter variable. 1:56 Now I'll use media queries to provide a new context that updates the value of 2:03 the gutter variable without having to respecify any selectors like header and 2:08 main content, or any CSS properties inside the media query. 2:12 So first I'll create a new media query. 2:17 That target devices that are a minimum of 576 pixels. 2:21 And here I'll update the value of gutter in the root scope. 2:31 So I'll add the root pseudo-class. 2:36 And inside that, lets update the value of gutter to 3rem. 2:40 Then in the next media query, 2:46 I'll once again update the value of gutter inside root. 2:48 So I'll simply copy the selector I wrote in the first media query. 2:52 Paste it here. 2:57 And this time I'll set it to a larger value like 5rem, just so 2:59 we can see the changes in the browser. 3:03 So notice how I'm only including the root selector scope and the updated variables. 3:07 Not the main content and hetero selectors, or 3:13 the actual CSS properties that reference the variable. 3:16 I'll give this a save. 3:19 And as you'll see, the gutter variable is responsive and updates dynamically. 3:21 As I resize the browser, the margin values change. 3:26 Now have a look at this fun demo I created, 3:35 that shows how CSS variables can reset values inside media queries. 3:37 This time I'm using a CSS animation of a ball. 3:42 As you can see, the ball moves up and down on small screens, then switches to a side 3:45 to side animation on medium screens, then a diagonal animation on large screens. 3:50 In the CSS for this, the ball rule has a variable called animate, 3:57 which calls the bounce keyframe sequence by default. 4:03 In the first media query, 4:08 the animate variable is set to the slide keyframe sequence, 4:09 then it's set to the diagonal sequence in this wider media query context. 4:13 You'll find a link to this demo in the teacher's notes of this video. 4:19 You can even forward the workspace snapshot and 4:22 experiment with the values yourself. 4:24 Another example of how CSS variables can be updated and altered dynamically, 4:28 is updating their values inline within the style attribute of an element. 4:32 For example, the learn more buttons in the cards use the color primary 4:36 variable to set their background color. 4:41 I'll open up index.html and add a style attribute to one 4:46 of the anchor elements with the btn-info class. 4:51 And here I'll update the value of the color primary variable, 4:58 to let's say, firebrick. 5:03 And as you can see, we immediately see the change in the browser. 5:06 This is not possible with static preprocessor variables, 5:09 because, as I mentioned earlier, they know nothing about your markup. 5:12 All right, so in the next video, you'll learn how CSS variables cascade and 5:16 inherit their value from their parent. 5:21 We'll define and reset variables at different levels of specificity. 5:23