Cycles & Overriding Properties

[00:00:00]
>> We looked at this example a little bit earlier, and we did this to style the second blog post with the secondary color throughout, instead of the primary color. However, this example is slightly different. Notice that previously, the link color was also getting the same color as the rest of the blog post, but here we actually wanted to use the secondary color for links.

[00:00:27]
So we have this rule that colors links with the secondary color. And in the alternative styling, in the blog posts have the outclass, we actually didn't want to still get the secondary color, we wanted to get the other color, the purple. So our first naive attempt might be to go here and say, okay, we've set primary color to secondary color, I'm also gonna set secondary color to primary color, why not?

[00:01:01]
And boom, everything broke, we now get zero colors, we got nothing. What happened here? This is what happened here. This code introduced a cycle and cycles make any variable in the cycle invalid at computed value time. So let's go back to our CSS. What we're seeing here is that primary color should be the same a secondary color, and secondary colors should be the same as primary color, this is a cycle.

[00:01:41]
The reason that a lot of things do not work in CSS, a lot of proposals that people recommend for CSS cannot actually work, because of cycles. Cycles are a big problem with a reactive language like CSS. Because, like in JavaScript, you can say this variable is set to this value and in the next step it's set to this variable plus something else.

[00:02:05]
In CSS, everything exists simultaneously, there are no steps of computation. So both of these statements could not really be through at once. So to make custom properties possible, we needed to find some way to work around cycles, even if it means breaking your entire code like we've done here.

[00:02:31]
So what the browser does when it sees a cycle, and this is a cycle of length two, you said A to B and B to A. A cycle could also be of length one, like you set a variable to itself. What the browser does is it notices, it keeps a dependency graph behind the scenes.

[00:02:47]
And when it sees that this dependency graph has cycles, it just makes every variable in the cycle invalid at computed value time. And notice that this only happened on the elements that includes the cycle, not in anything around it. Like the first blog post is fine, the heading uses primary color are just fine.

[00:03:09]
It's only on the elements that includes the cycle, and obviously, in whatever values would be inherited down. So, what can we do here? How could we actually do the swapping that we wanted? So in this case, actually, Even if we go back to our initial code, This was a bit of a hack if you think about it.

[00:03:35]
What we really wanted was not to change the primary color of our theme. What we wanted was to change the color of that blog post to the secondary color. So what we really, really wanted was to actually have a color property for the article and actually not set here but on each blog post.

[00:04:01]
So what we really wanted was to have a color property for the article that is set to primary color and then the entire style uses that. And then we wanted to have a link color that is set to the secondary color. And then our entire theme, let's change this to use the cooler property and then this would use the link color.

[00:04:40]
Then in alt, we're not overriding the primary color, our primary color is the same throughout our theme. Instead, we are setting the blog posts color to be the secondary color and its link color to be the primary color, and that works fine. So this is another thing that CSS variables can't do.

[00:05:10]
In SAS, you could have a depth variable, for example, and then set it to itself + 1, you could increment it in the same way you could increment variables in JavaScript. Because in SAS, just like JavaScript, there are steps of calculation with variables, you could increment them, decrement them, you can set them based on themselves.

[00:05:29]
In CSS if you try to set a variable based on itself, that's a cycle and it doesn't work. And it doesn't just fail, it fails pretty badly. So what can we do? We can actually combine these two, we can combine SAS variables and CSS variables so that we could have a SAS variable that gives us the depth of the current rule.

[00:05:57]
And since we are using selectors to do this, this will work just fine when the CSS is pre-processed. And we've used SAS code to actually set a CSS variable. Notice the interpolation syntax here. If you want to set the CSS variable based on a SAS variable in SAS, you need to use this interpolation syntax, if you just use dollar depth, SAS wont touch it.

[00:06:21]
And obviously, this is a small example. If you wanted to actually have a depth variable that means something, you would have to do root greater than asterisk, greater than, asterisk can have a two, and so on. You probably need to use a loop. But that's the main idea and you can combine them just fine.