SASS Tutorial (build your own CSS library) #10 - Conditionals (@if)

Key Takeaways

all right then gang so the next thing i'd like to talk about is conditionals or if statements in sas now if you're familiar with another programming language this is going to come as second nature to you because it's just like a normal if else statement so what we can do is basically check a certain condition with this and if that condition is true then we can maybe generate some styles or selectors or whatever and if it's false we can do something else so let's do a simple example i'm still in the colors file i'm just going to say at the bottom at if and then parentheses and then this is where the condition goes so i could just say in this example if 10 is greater than 5 then we're going to do something now that is obviously true so if that's true then we're going to say test if and just say color is black just to see if this works right so i'm going to save this now and then i'm going to check the index file and i'm going to look for oops let's close that i'm going to look for test hyphen if and we can see now we have that class however if i say 10 is less than 5 that's obviously false if i save this then that style is gonna go all right then so this is gonna be useful inside our different color utility classes right here because if we go back to the index file notice this we've got things like this bg hi from white hyphen dark and we've got bg white hyphen light as well or text hyphen white hyphen light and they're all white we don't need to create these dark and light variations of black and white we just want something like bg hyphen white or text hyphen white we don't need these different variations so what i could do is use an if statement like this to check if we're currently iterating through the black or light color now if we are then we don't want to run this code right here we don't want to generate those extra light and dark variation utility classes if we're not then we will go ahead and do that by the way you can also add on an else clause right here so you can say if 10 is less than 5 do this and then you can say test if 2 and what we'll say is color is white and basically what this is saying is if 10 is less than 5 then do this else if it's not then we'll have this class instead so if i save this now i'm just going to look for test if again and we can see we get test if two all right so enough of that let's try using this if statement inside here so what i'm going to do is above this light variation is create this if statement because we still want these general utility classes for black and white we don't want to enclose those inside the if statement we just don't want the light and dark variations okay so inside here i'm going to do a condition and that condition is going to be if the value right here is going to be black or rather if it's not equal to black and remember that's what the value of this is right here black and white right there the values and we're saying if the value is not equal to black and then we can say and because we want to make sure it's not equal to white as well so the vowel is not equal to white then we're going to run the code down here so let me take the closing curly brace and place that at the end of this for loop like so and skew all of this in so we're saying if the value is not equal to black and it's not equal to white then we can run this now if we're iterating through this loop here and we get to the black value then this right here is going to be false because this right here is false okay so in that case we're not going to create the variations and likewise for white as well so if i was to save this now and we're going to go into the css hopefully if i search for test hyphen black oops not test it should be text hyphen black then we can see we don't get those variations we just get the background black and the text black and the same for white as well but for all the other colors we get the different variations