Transcripts
1. Intro: In the beginning, that was CSS, and you have to write it out one line at a time, as if computers had never been invented. If you want to make corrections, it was like having to go through every page with White out on right in the replacement, as if computers hadn't been invented. My name's Rob, and I was scared to join the the evolution as well. I thought that if I learned sass, I would have to learn the command line. And I thought I'd be out putting ugly code like you used to get in Dreamweaver when you use the Wiz E Week editor. Fancifully, I was wrong. And over the next two hours I'll be showing you why I'll be showing you how to write simpler style sheets. They'll be clean and lean. They'll be up to date and up datable
9. Variable: So I showed you variables right at the start of the intro when I know you're obviously dying to get hold of them and have a play with them because it gives you so much, so much control. So let's just create a variable up here. We're gonna create the variables, the top of the document, and then we're gonna be able to use them elsewhere. So here I've got font family. Helvetica. Well, how about if we just had fun one and then anywhere that uses that same fund and you just pop in this font stack here and it's gonna say the whole thing to make sure that if someone doesn't have health that are on their computer, it's the four back to Ariel And should they know, even have that it conforms to whatever sensor funny. Now, this is obviously gonna give that hitch one hell that can. You know now, actually, I quite like everything in my section to have the same same front family. So let's just pop that down human dissection as well. Obviously I could just put it into the body, but let's assume we're gonna be using other funds elsewhere in in the document. So right now it's just hate Juan and section and I reload it. And now it's obviously loading. Font family held that canoe into all of this. Now, obviously, a big advantage to this is I could just change this in one place if I needed to change it. And assuming this is going to grow as a project, I can have this as an external file with lots of different CSS files running off it. So if the entire brand changed its font slightly, then we can just change it in one place and everyone's style sheets would run off the same thing. So here I'm using some pretty horrible colors because Aiken, I didn't work out some perhaps slightly nicer things. Maybe it would have been better if we're gone for kind of 33377 Something like that maybe would be a bit nicer. But rather than working that out, I just put in the word blue. Just basic CSS stuff. Let's pick some different colors. Instead, let's say let's say we're gonna have a nice green color and the green color is going to be . They were gonna use that and then later on where it's got green, we just put the actual it says Grave. Let's just make that green. Okay, so we're gonna have a nice yellow color as well. That background. Could it perhaps be a bit? No, sir. So let's go with something a bit nicer that's have this one. And then down here we put yellow. I'm just gonna make be variable here. So the variable you can spot because it has a dollar sign at the start and then let's replace that red as well, just needs a pound sign at the front. Okay, and then let's turn this where it says red here, let's make that variable as well. So it just got a dollar sign in front so you can see now how similar to how it says for one with a dollar sign. It now says red with a dollar sign. And that's just completing it as a variable. So that known now knows to go look at the top of the document and see what the color from red is for safe. That and I refresh this. You can see that we've got eyes slightly different colors in now,
11. Operations: The next thing we need to look at is what can we do with these numbers? How can we? How can we alter them? The whole purpose of having functions is that we can do some basic maths or some complicated maths with our with our numbers. So here we've got a variable, and in the moment it's got a string on it that says number operations. But I'm gonna be altering this throughout this video on. We're going to be looking at the CSS over here. So this is a CSS. That's output, and this is the SAS that's going in. So let's get rid of this a second. And let's try adding one with one. And as you see, that's updated and it's too. So obviously we could have. If we had 10 plus one, it's going to be 11. If we had 10 minus one, it would obviously be nine. It's a five a second. If I use this Astra symbol, it's going to times it. So that's 50. And if I use the Ford Slash, it's going to divide it, OK, but there's a little bit more to it than that, because what about if we're dealing with pixels. If I write pixels over here, it's giving me an error. You see what happens is SAS takes the denomination off. The argument that's on the left of the equation has been the denomination for the whole equation. So if, for example, if I had P x to the 10 and then save it again is showing up here is a two. If I take the P X off the five and save it again, still shut up is to now it's got the PX. What we want is you want the item on the left to be the type of denomination or string we want to be using. So, for example, if I write a string in here and then, um, plus it to five is going toe, add five as a string lighter. Now, if you out, the quick bits of maths we should know about is what about if we divide five by three, then what happens? Well, we get 1.66667 We might not want this huge number in there. That's gonna be perhaps quite complicated. Maybe we want to round it up or down. So there's a built in function called round. We're gonna be used in some of these functions. Quite a lot of our SAS workflow. So let's get used to them. If you don't want a round to the nearest you come round to the you can round up to the ceiling and that's going to give you a two or you come round down to the floor, which will round you down to the next number down, which is giving me a one. Alternatively, the other one, which is quite useful, is maybe you want to return it as a percentage, and that's gonna give me 166% because five is 166% off three.
15. Mixins: Okay, so now we're gonna talk about mix ins. Mix ins are a little bit like variables, but you could include slightly mawr. Slightly more different different properties inside. It's like reusing a block of this code as if it was a variable. So let's look at this page here. I've got two kinds of headings and I've got the body text on the link text. Now, really, the headings actually really have Those is the same front. So up here I've got one front family, which is Helvetica, and it's all san serif fonts. And I've got another one, which is a mono spaced fund. Now I think heading to should also be the Helvetica new, and it should have some of the same features as the from the main H one fund. So, actually, you know what? Let's copy out this whole block of code here and stick up top with the variables and let's nest all this inside some brackets and we're gonna call this mixing and we're gonna use the at sign at the start and then just right mix in. I'm heading foot heading Fun is just what I'm calling this mixing. It's very similar to how these variables have different names when we're naming our variables or our mix ins just as long as we don't have any special characters over than hyphens and underscores Andi. Ideally, don't start them with numbers. Just best practice and with some programming languages, it won't work. As long as we stick to those rules, we can call them anything we want. So then down here in Hetch one, I'm just gonna write. Include, and I'm gonna write heading foot. And if I say that, that should work Fine. I refresh this will see that this hasn't changed it all. This is still got all this styling, which I've separated from the H one tack. So lets include heading fun into our hate to is what? So now we've got the same kind of styling, but it's a little bit conflicting because actually, the hate one in the hate to have both got almost the where they have got the exact same styles, so maybe they hate to should be a little bit smaller. So what we can do here is just like how with the functions, like with lighten and darken, which I've got paying now, just like how we passed in these two arguments and we said, What color? On what percent? We wanted to pass it. We can pass in on argument into heading front. So let's take out front size from here and let's pass that in is an argument. So now it says include heading front and then in parentheses. Then it's gonna say to E n, But if it's a heading to size, it's gonna say 1.6 mine doesn't like that. Okay, so now we're going to just come up here to where it says heading front, and we're going to so at this variable in here. So this this here is passing. One argument heading front is passing 2 a.m. And here it's passing another argument heading front 1.6. So this is going to become a variable dure ing the scope of this mixing. If I call this font size up here, this becomes similar to a variable but a variable that we can only use within the mixing. And then down here, I'm gonna say font size. Then when I refreshed this page, this is gonna reload with this. Been front sized two AM on this being a font size off 1.6 years. So the reason here is because this creates a new variable inside the mix in, which only survives as long as this mix in survives. And I've used it here for the size, and I passed it in. When I've create when I've included that makes it, I hope that all makes sense. If it doesn't, then please write to me in the comments. So let's let's assume that we have a lot of headings, which are actually 1.6, maybe a few of our different headings throughout a 1.6. So maybe we should create a full back and just say, If we haven't passed there any value, any any value, let's make it 1.6 e m. And then we can just remove this from here. I want This is Stone is this is saying if there isn't a value being passed when the include is made, just just give font size the value of 1.6 cm. So if I take out at 2 a.m. From here, it's going to assume I want heading one to be 1.6 C and Likewise, if I still put in a different value here, it's going toe overwrite that 1.6. Okay, so there was a mix ings. I hope you have a lot of fun creating some of those.
16. Include: Now, if we start adding too many of these mix ins, we're gonna get a very, very busy style. Sheets at the top have all of these in it. And also, we might have a style sheet somewhere else where we want to have the same round corners on the same heading font style. So we don't want to be repeating ourselves. We want everything is compact and it is simplest possible. So let's copy these out and create a new file under our S S s folder cold mixing store F CSS. And in here we'll just put all of our mix ins in one in one list. Now, that's great. But obviously this star she needs Teoh import all those mix and still So in the place where we have the mix ins, I'm just gonna write import, And then I'm going to write mixing star S, C. S s and semicolon on the end. And this will now import all those mix ins on allow them to be used in this page doesn't see that made no difference. And if we look at our style sheet, it's still bringing in all those rules without creating any extra code to have those mix ins. But if we look back at our CSS folder now, it's actually obviously compiled all the F CSS files. So we now have one called mix in stores. Yes, if a dot CSS, which is empty because there's no output, it's only it's only mix ins that that return code back, but we can get around this if we just add. I just close this mix since felt. If I just on on underscored the start, then it's removed those felt files. But this is still importing fine into here. If I refresh the page steps that you find, it's still importing the file, even though it should have a underscore at the front. This import man just ignores it, but when it's compiled, it will assume the file doesn't exist or we don't want to create. It is a CSS file so we could do this again. We could create some. We could create another imports up here, call it variables and create a new file with under school variables. CSS. And we could just copy out these variables from here on this page should still load absolutely fine. It's still bringing in those variables. It's still bringing in those mix ins, but it's not compiling them. And it's keeping this starship very, very simple, very clean. And it allows us to reuse thes same style sheets, the same variables s CSS and mix and zesty assis in all of other files throughout the project.
17. Extend: Okay, I've got an created a whole new rule here called Link on the Some new styles in there for link it's got is pulling in this air rounded corners mix in to give it this corner is got some padding and some margin. It's got color and it's got some fun one and in the background. Now, I've got some other links up here which don't actually have a class. If we look in Index, we can see that these don't have a class, but I still wanted to have this exact same style. So let's some Let's extend this link class into the A. Let me show you what I mean. So here we've got article A so it's just gonna select any links within an article, and I'm gonna write extend and then just right, Doc Link. So what this is doing is this is gonna bring in all the existing classes in link. So if I say that and I refresh this, we now see that these links have the exact same styling. Is this just extended? That I was particularly interesting about extend is if I now look in my CSS style. She you'll see that here it's written in Section Link, which was the original rule. That's about this and then section Article A, which is the rule. Let's made this have its styling, and then it's put all the same styles in that same place. And if I waas too, I had a different color. Maybe I'll say Color green. Then it's gone on and it's added this extra all the bottom that just changes the color. But all of that still kept together. Now why this is interesting to us is what you'll notice if you look back at the S CSS sheet . Is that where we've used include, and we've included a mix in. It's actually recreated the same code each time. So here, even though the border radius we wanted to be the exact same border radius, it's gone ahead and added that chunkin again, where is here? It's just common separated it and put that code in there one time. So this is a little bit more efficient on printing them out twice. No, considering this mix, and actually it takes some some arguments in the font size. Then that's still a valid mixing. But this one's not actually doing this any favors. So if we take that out of the mix and page on, we pop it back in to this page, I'm gonna know, make corners just be some normal success rules like as if corners was an object. But instead of putting a doctor in front of it or a hash tag like it's a class on I D, I'm gonna put a percentage sign. What this means is that my CSS file isn't going. Teoh is putting some errors in right now because it's trying. Teoh is trying to read this here, so if I just extend this instead, so I extend and I've written the presented sign on them written corners, so that should extend that fine and then a here, it says, include corners I'm going to write, extend corners. So now if I look in this shape, you'll see that there is a gun that's good. Now you'll see that it's actually pulled all three of these out and said these all have a border radius of five pixels. Instead of putting those same three lines in three different places throughout the the sheet, it's just added them in one place, so we could do this again for padding a margin which had the same here as they are here and create a whole new rule and then extend those. So just to recap a mix in is a function where we want to put some kind of argument in. So it's not the same code each time, whereas, and a class that we extend is going to be something with rigid rules where these are always gonna be the same. It's always going to the same border radius, and that's gonna keep our style sheet as small as possible.
18. What Is Compass: so earlier on, we talked about Compass because we were talking about compass app. Now this is the APP, as we know that's watching R. C S s CSS files and compiling them to CSS as we go. But Compass is also an extension of SAS, which offers lots of extra functions and mix ins that we can include in our work. Now, as long as we've got compass up watching us, we have access to those. If we're not using come possessed, there's alternate compass app. There are alternatives, and please ask me if you'd like to see those or we have to do if we want to use Compass now is we have to say import compass at the top, and this will import all the compass libraries. There's actually five different sub libraries of Compass, and there's a utilities typography, CSS three layout and read and reset. Now, if I just White compass is gonna actually import those top free utilities typography and CSS three. And I wouldn't really say this any advantage in knowing the difference unless you're until you're looking at very specific functions, you're going to want to know which one it's in. But if we're importing these is very much like when we imported are variables or our mix ins. It's not actually putting anything in the style shape until we say so. With one exception, this one here reset. If I say imports, compass resets, we just put that semi cone on the end, and then I look at my style sheets. It's actually got this whole chunk of extra code in, and when I refreshed my page, you'll see it does strike me strange things and reset. For anyone who doesn't know is a thing that's often a CSS file, you would include Teoh remove any different quirks or differences between different browsers. So if I remove the margin and the padding on the border off all of these things, then they're definitely going to look the same in all the browsers. And I can add those styles back in, as and when I need them so it's removing list styles. It's removing certain table styles, was making everything as simple as possible, and it's out putting it to here Now. I would recommend using a reset file because obviously it's gonna help you develop styles that work across the board in different browsers. But whether you would want to use compass is reset sheets. Or maybe you'd want to use normalize. Or here are a few others. I found the hate steam or five Dr CSS. There's a Yahoo one that's quite popular. Universal Selector. Reset is quite a few air Eric Meyer's Reset CSS. There's a few different reset sheets, and you might not want to use the compass. One. I would recommend deciding what reset file you want to use yourself and leaving that out. Now, as for the layout one. It's not gonna harm you to have it there. The same with the original three utilities. Typography CSS three. So let's leave them in there. And then what this does is this gives us access to hundreds more functions mix ins that we didn't already have access to. For example, we are here extending corners this, but we don't actually need this because this is all built in to Compass already. So instead of extending, let's include and the functions called border radius medias on just right five pixels in here. If I save that, just refresh the page. And as you'll see, the links still have rounded corners. So if I just use that down here is well, where we've got extend corners and then we can just actually remove that. And as you can see, we've still got all our rounded corners, which if I wanted, I could then change the amount, and I can make these have much more severe corners. And of course, if I wanted, I could also use a slightly different compass function called called Border Corner Radius. And what this does is it lets me add extra arguments, unlike top left on my links. Now just got around the corner on the top left. It's not particularly good button, but as you can see this a lot more functionality, and there and again, the amount of functionality and mix ins in there is huge, and we couldn't possibly cover them all. So I'm gonna advise that you take a look over a compass style dog, which will have a list off all off the available functions, and I'm gonna add a link to this on the video. Over the next few videos. I'll show you a couple of examples, but there from time to time there's gonna be something you want to do, and it's worth seeing if there's an existing function in here before you go and create your own.
19. Compass Box Shadow Example: Okay, So I'm just going to show you another quick example. If you look at the top here, I've just imported the whole compass folder. I've just said import compass. So last time I had a couple of different ones like CSS three like this. But actually, if we just import the whole folder, we have access to all the all the mix ins and function. So for the sake of learning about compass, that's just import them all. Now I'm gonna add a little box shadow around this article. So if I'm right, include box Shadow That's going Teoh import all of the all of the different CSS rules for different browsers and stuff to have a boxer. So I'm gonna make the shadow green make it two pixels, two pixels offset with a 10 pixel blur on this is gonna give us this this box shadow around this block. Now that looks a bit extreme, actually. So I actually wanted lights in this green a bit, but I don't want Teoh and I was a light in it. I wanted to be more transparent because there could be a different color in the background , so obviously we would do this with something like RGB A in CSS and now obviously to do rgb you need the RGB values. But actually, it's gonna work that out for me. And if I just write green here and then I write 0.5 is the Alfa. It's going to work out the RGB value for me, so if I just refresh, you'll see that light in. But And if I look at the CSS file, you'll see here where we have all of our box shadow stuff. It's actually worked out 70 137 1 or two for us. So we didn't need Tiu. Didn't need to touch that at all. It's worked out, and that's displaying Fund them now, actually, what about if we want to have an insect box shadow on the exact same article? I'm just gonna do this. I'm gonna write incent G p A. And this time we're gonna make it. It's slightly black. Let me quite light. One pixel one picks five pixels and this is insect, a small shadow here. This looks pretty awful, actually, because of too many conflicting shadows. But as you can see, we've added to box rules. Their box shadow rules with same function here and in the style sheet. It's just added them one after another
20. Compass Opacity Example: so as another really, really quick example. I'm just going to show you the capacity function because I think it's quite interesting. Encompass, if I write, include capacity. No 0.5 under this header here obviously made this head. I have a capacity of half, which actually doesn't seem like that useful role because because can't we just write capacity nor 0.5 on its own? But actually, this is perhaps showing some of the power, which you have when you use some of these dysfunctions. This built in Nixon's because it's also added this for legacy into the Explorer browsers, which is something which is necessary. Tiu have fewer rapacity shown as many browsers as possible, but perhaps something which we would often leave out because it's quite a large chunk of code, and we can't always be bothered to go and find it. So things like that which you could from time to time, leave out compass is going to add in for you on. That's perhaps shows the power of some of these mix ins
21. Compass Contrast Example: Now, let's say for Article one, we've decided to actually give it a green background, which is gonna look, I think you'll agree. Quite beautiful. So I am if I just add in here after cool. But ground green is used that green variable. Now that's gonna overwrite the other backgrounds. So we're gonna have one with a green background moment. Yellow background. Well, now, unfortunately, we can't read our text now, can we? Because that Scots that's got a green card on a green background. So let's in article one, Let's make it so that paragraph color. And now I'm just gonna put in here. Include, And then I'm going to use this this mix, in contrast, Contrast, Dead green on What this is going to do is it's going to work out for me, whether or lights or a dark color is going to be best on the top of this green. So it's designed it that actually this white is in the best color rather than a black, which, if we get to the normal paragraph when we right in here, just promise a new lines a little bit. NATO, then if we right in here include con trusted? No, the backgrounds Not quite yellow, is it? It's lightened yellow, 10%. So let's put that in there. And this is what does that, actually Ah, black color is going to look better on this background. White's gonna better on this background now. I'm not sure Sure, if I like the complete white because we don't really use white anywhere else in the design . So, actually, let's go back to our variables and add a new variable. Uh, a new, very vocal contrast. It lights de felt, and this is going to equal the exact same as yellow. Now this is actually used yellow as the default color for for lights contrasted text. So actually that hates to up here really wants to have the same same style. So let's just use that in here as well. Okay, there we go. So if we look in the series of started, it's obviously just created the color there. Based on what it's worked out, is the best contrast with the background color
22. Where to Find More Compass Functions: So I hope from seeing these few mixing is that we've taken out off this compass library. You can see that the power on and the depth off functions of mix ins that they've already created. If you'd like to see a few more than you can obviously search as and when you have a specific need. Or you can go to compass hyphen style, the orc slash examples Teoh collect together or view ah, whole Siris of different examples.
23. Lists: Now there's gonna come a point where you're going to be really, really used to using excess on you've you've played around with with compass or whichever off a framework you enjoyed using. And you're going to get to the point where you're ready to take those training wheels off and start writing some of your own functions. So let's look at some of the more advanced features. Obsess so we can get some ideas about how we could create some functions, which you're gonna help us specifically. So the first thing to become familiar with is something called lists. If you've used other frameworks before other programming languages before, you might be familiar with the idea off a raise a raise are a set off variables. So where is here? Green equals this color here. Yellow equals this color. Orange equals this color on red equals this color. We could create a list of colors that would have all of the colors inside of it. So here we have a list of colors, and it's all saved in this one array here. This one list, which looks very similar to a variable at this point, obviously, but if I waas to put this colors variable. This lists in here. It's not going to say that. I'm gonna get error. See, I got an error because what I got never on my main style page because it we're coming into some of these variables that say things like orange and yellow, which no longer exists. But here what's happened is it's trying Teoh, use this whole list of colors where we just want one. So what we're gonna do at this point is we're going to use a built in SAS function called length and is going to get a specific number from this list. And we want the 2nd 1 We want this f f F zero a five. So I'm gonna put two in there, and this will now return just that yellow. So let's go through my other page. I'm gonna get these errors for the time being. And just replace this orange with a three color three and replace all the yellows throughout this page. Replace all the greens with one and replace that red with a full. Okay, so this is saving Fine. I'm not going any errors. And if I just refresh the page all those colors are all loading through exactly same as you'd expect them to, because it's it's picking up that number from inside the list. So what we have here is we have colors is now no longer variable, but a list of variables, and each of these is selecting a specific item from the list, so this might not look for a useful at the moment. And actually, when we look through the code, it's not particularly elegant because 10th color to means a bit less to us than the word yellow, which is a bit more descriptive. And But in the next couple of videos, you're going to start to see why these lists could be much, much more powerful. One thing I will say at this point is this works fine with the space here, but we are gonna be using that same space for other functionality. Latest. So what's a better idea is if we split these variables up with a common like this. So this is still a list here, but it's a bit more defined as a list, and it's not going to misinterpret spaces in different places, so this still loves absolutely fine as you can see. So the next thing I really want to show you about lists is what we call a map a list map where maybe instead of saying colors and then just having a list, we can have a specific key for each item in the list. Now a key is a key is liken. Identify us that we know which which item in the list we're talking about. It's going to replace this number. So instead of saying Number two will be able to say yellow, now it's going to look something like this. I'm gonna put right green here, colon, and then have the number. And then on the next line, Yellow Challenge. And these don't need to be obviously words that colors things could be any unique. This we any unique name which don't have special characters in other than hyphens and underscores and only have numbers. After the first character, you could called common Whatever you wanted. It might be an idea to say, primary color or background color, or something which might be even more meaningful than just the actual color, especially if you had two different shades of orange like we sort of have and then here, where it says in color, we're not actually going to say 10th anymore. Now we're gonna say map gets and this is a built in function to get this map the colors map and instead of to begin to say yellow. So if we use the same but of code on the mix ins here, this one is red filling. And then all throat here, bear with me a second main or that that actually was too, which is yellow any which to We're gonna be yellow any Which one will be green. And I just put this last one in hit and save. Just refresh the page. Um, I seem to have changed this color hair Teoh to read nothing like ESPN Orange over than that . You can see it's the exact same as it was before. So basically what we've got here is, rather than just having one item in each variable like we had before, we've created a list of variables, and then we've created a key for those lists so we can go and get a specific item quite easily and we can obviously see with these when we look through our code. Exactly what I said we were getting from where colors yellow is obviously quite self explanatory. And now, obviously, when you look back at this, that looks a little bit more confusing than when it was to begin with. Which was that. But what I'm showing you is some basic functionality which is gonna be the building blocks off the functions we're going to look at in the next couple of videos.
24. Loops: right Next. We're gonna talk about loops now. Just put all those colors back how they were now, because it is easier to see it just says Read on or yellow. But I am going to show you a good way that we could use the mapped lists or lists. Generally, Teoh do some functionality so we can see here that there's four articles which each have a different idea. Article one, Article two, article three, Article four And if we look in here, I've created a custom style just for article one and which sets the colors and the contrast color here. And the other three I just left for now. So we're gonna actually create a few different styles for each different article on. Before I do that, I'm going to create a mapped list to give us a little bit of information for each of those articles. So I'm gonna call my map list articles because it's a pretty obvious name to use here and then inside articles. I'm gonna create a different sub list for each off the four articles. I'm not gonna number them because they're already in an order so they don't have any kind of name there just full at four lists inside another list called articles. So let's have three different different variables in this list. Let's have BG, which is gonna be the background, and the 1st 1 is going to be read and let's have a parent which is gonna be pounding, and this one's gonna be 10 pixels and let's have page size, which is going to be the size of the heading, and this one's gonna be 1.6 e. Now, each of these sections, I'm gonna create slightly different rules. This is going to be green. This is going to be yellow on. This is going to be orange. These are gonna have five pixels. This is going to be at one point 4 a.m. Two pixels, 1 a.m. I'm just gonna take these semi colons off the end because that's not the end off. He met list, but one of the end here, Tiny this up a little bit. Okay, so this has got a slightly different paling for the rest of them. This is going to have a different pending as well. And a much bigger faults lies. Well, that's very big Okay, so we've got these three different rules for each three different styles for each article. And now I'm good to go ahead and creates a a loop that's going to look through the articles and create slightly different styles for each one. So if we replace this here, this is what's currently referencing Article one to give it its background and to make the color contrast and to make it contrast with this color. So it's pretty simple rules at the moment. But the way it's referencing is using the ampersand and then without any spaces going straight in on writing Article one. And that ampersand, as we know, is going to just repeat the fact that says article section and it it's allowing me to reference a specific article. So what I'm gonna do is I'm gonna use this each function, and I'm gonna say each article now article is the If we look back at the variables, this was called articles, so article is a new variable. I'm creating a new list, I mean, and I'm going to say each article in articles and then that's going Teoh loop through each article. Now this, says one here but we won't let to be a slightly different number each loop through. So I'm going. Teoh create a new variable in here called I and this is going to Equal Index Index is a built in function in to assess. And what index does is it's going to you look at the articles lists and find the specific article we're currently looking at and gets the index. So if it's the 1st 1 it's going. If it's aware that this is the 1st 1 is going to turn the value of one. If it's a second in return, the value of two. So this variable I now equals 123 or four, depending on which loop through we're on. So we could put this I on the end here like this, But that's not going toe work because it's going to assume that this is part off this I d name. So we need to use an extra little bit off excess syntax, which looks something like this we're going to have as if it was a CSS i d. We're gonna have a hash hair and then opening curly break a brace and a closing one and then this is going to change to 1234 It's don't run through. We should now be able to run this code and it's right running through. So they all have a green background at the moment because if we look at our style sheet, it's now looping through those 1234 and creating the exact same style each time with a separate I D. On the end. Okay, so we don't quite want. We don't quite want it to always have a background of green do. We were going to use Met, gets function and in there we're going to look at our article and we're going to use this key here background. And then let's just use that same reference over here as well, just not the whole thing, but just in here. So it is going to get the contrast in color as well. Let's see how this looks. Okay, so that's good. So that's come through his red. That's yellow. That's orange. And this has also found whether it's going to contrast better with the light color or dark color. So what? It's a yellow background. It's chosen black, and when it's a green background has chosen this yellow card because that's the color that contrasts the best. Okay, so let's look back in here and see what else we have. We have hate size, and we have padding. So until now, we've been using background foot family. Okay, so until now, we've been using this h to tag here, and we've been calling heading front, if you remember rightly, heading front is a mix in. We created and weaken send in a font size. So if we put that now inside each specific article, we can now send this the size for the heading. If we use the hate size key so let's see gets And in here, we're just going to say hit size. Obviously, this is wrapping around quite a lot because I've obviously just change the size of this so you can see it easier. But let me just move over here a bit more. Okay, So now the hate twos should ideally have a heading front, which is going to change the font style to fund one is going to change the size that we put in, and it's going to make it bold, which already is Okay, so there's our various different fund sizes. This is looking quite interesting. And then in this main area here, we have got padding here. But we're gonna take that out, we're gonna have a separate pounding for each off the each off the different articles. And for that, we're going to use my gets again. And in map gets we're going. Teoh, use that pad key, which we got from our variable here. Okay. And as you can see, it's now given each of these boxes a slightly different patting, so that's an each loop. But for the sake of experimentation, let's just show how we could do this exact same problem with a different kind of loop. This is called a four loop now in a four loop were going to say, for we're going to create a new variable called Dollar Sinai, which will work exactly the same as it was before for a dollar sign from one through four. Because we have four in our list, but we don't know if there would be perhaps five or three and future. So we want to use a built in function called length, which we're just gonna wrap around articles, and this function is going to see how many items that are in that list on return us for. So it's going to say is going to loop from 1 to 4 times and this is going to increment each time giving us the exact same idea So we don't we don't anymore need that. This is just going to look through and give us articles as the list the whole time. But let us use the I D to reference which idea in that list we want to use. So actually, what we need to do is we need to create three separate lists down here. So I'm going to have one called colors again, and it's gonna say read green, yellow, orange I'll have one cold panting, which will just say 10 pixels, five pixels, two pixels, 12 pixels and another one called heading size. But she's gonna say 1.6 cm 1.4 AM one. Yeah, 2 a.m. and we're just going to remove this mapped list, and instead we're gonna deal with three simpler lists. So we've got colors padding and heading size. Now. This means we're now going to replace this with colors. I think I spelt the English way and then here we're going to say background colors and we're going to go back to that functional using before the 10th 1 And this time the i d we're referencing is going to change each time. So we're gonna use dollar sign I, which is gonna increment depending on the look on. So let's just use that again. Yeah, that this is going to say patting instead of colors and then down here, it's going to say heading size like that, I believe. Let me just check heading size padding colors. That should be okay now saying understand, I have spelt the American League. Let me take those use out, okay? And this is quite interesting. I seem to have some quite impressive pounding on that 1st 1 Ah, I put 10 pc which you have no idea What of this? If I change back to 10 pixels is now giving me 10 pixels and we've got all the same sizes and poundings we had before, which is using a slightly different system off looming. And finally we have a world loop on what a while loop does is it will do almost the exact same thing as a full loop. Except we can choose how much we increment I by each time. So we could potentially have every other box being having styling applied to it, for example, or we could give it some different mathematical formula to create what number is. But in this occasion, I'm just gonna make eye equal I plus one on each loop through. And while I is less than the length of colors, then we're going to continue the loop. This also means that before we start the loop, we're going to have to give I value. We're gonna give it a value of zero. So what happens here is we're gonna come down here. It's going to say I equals zero while I is less than four, which is the length off colors go through the loop. It's gonna hit here. This is going to make I become one, which is going to let us out. Put all this code. So Articles one has the first color, the first lot of padding and the first heading size. And then because one is still less than four, it's going to go around again, and this time it's going to become, too. And it's just going to look through incremental each time when it hits this and essentially do the exact same thing that that for Luke, just it. The power we have here is, as I said, we could potentially say to each time, and it's going to then skip out certain boxes and style other ones, and we can do any kind of maths functions we want with this. So perhaps a while, Loop has a little bit more power off four loops, possibly a bit simpler to right. So there's three different kinds of loops, and they all can achieve the same things. But in different situations, different loops are going to to suit your needs more than up.
25. If Else: Now we're still using this compass file here to use a couple of functions, and I think we could perhaps recreate those functions ourselves. Now I think we're at the point where we can start to take those learning wheels off a little bit and just create our own. So this is an interesting we've got here. Contrast it. Let's try. If we can recreate this, so contrast did is creating either yellow or black text, depending on what kind of the background is. So let's see if we could just create our own mixing that does the same thing. So if I just couldn't and mixing, I'm gonna call it contrast. I'm going to send an argument with a background color and then inside here we're going to do a little test. Then it's called a If else, and it's gonna look something like this is gonna say if and it's going to check this variable background color and we want to check how light it is, So we're going to use a built in function called lightness, and this is going to return a percentage, so we want to check if it's less than 50% and this is a conditional here where it says this is going to give us a number and we're taking these two numbers against each other so we could put various different things and we could say equals and that would tell us if the color is exactly 50%. If it was very, very specific gray, then this would say yes or no and we could say We want to check if this color is less than 50% or more than 50%. But we could say, Is it less than or equal to? You can also check if it's not equal to by using a explanation mark and then equals. And this will be true if it's anything other than that very specific. Gray is going to run the command that's gonna be in between these two curly braces. But in this instance, I just want to check if it's less than 50% lightness. So this this is going to return a value off 49 or less percent, meaning it's a dark background, meaning I want a light color. So let's put yellow Okay, so that's gonna give us yellow text. If there's a dark colored background but let's have a fullback for if there's a light two color background. So we're gonna write else in here that's at sign else. And then we've got two more brackets and inside those brackets is going to be the color for for light colored backgrounds. And I'm gonna put in this charcoal gray sort of color, and this is the entire Mixon that we need. All we have to do is check this one color to see if it's darker or lighter than 50% and then send back a color for the text accordingly. So this was the original compass function. A mixing contrast ID on mine is called contrast. So we're gonna change over to mine now and let's see how the page looks. Okay, Great. So that's almost exactly the same as it waas. Except now I'm slightly more in control off the mixing, so let's see if we can create a fume or a few more tests in here to see if we can find some other stuff out. So let's actually add this down here as an else if and we're going Teoh, check something else first. So what this is doing is this is going to say if I'm gonna write another conditional here to test, and if it's if it's a yes, it's gonna do this. If it's a no, it's gonna go onto the next one and see if it's this one or not. And if it's a yes, it will make it yellow. If it's a no, it's gonna go down to this. And this is the fullback default. If anything gets down to the else, it's always going to be true, and it's gonna make the text text black. So this one, we're going to say, if background color No, not that sign. We want a dollar sign. Background color equals equals twice because we're not. We're not trying to force it to equal that. We're trying to check if it equals that. So we normally wear equals twice in programming to check these things. If the background color equals, let's see if equals green, so we know the 2nd 1 equals green. So on the occasion that equals green, we're going to give it a um, I Let's give it a whites color, so if I refresh this page now, he's got white for the grain. Otherwise is gonna check how dark the background is. If it's darker than a certain amount, it's going to make it yellow, and it's less than a certain amount. It's gonna make it This said 333 black color. Okay, that's great. Let's see if we can perhaps make it so this orange is also white. So we wanna have to two arguments that were testing against in here. We want to condition ALS. So I'm just gonna go ahead and write or in the middle here, or background color equals equals. Oh, no. Okay, so now this is actually a little confusing, isn't it? Because it says background color equals green or background. Color equals orange, but we need to let it know what order to test these things. And if I put some parentheses around this than everything within these parentheses was gonna equal true or false before it reads the all. And if I put this in print disease, that may distract this over so we don't overlap. I put this imprint. This is then we're gonna have to values that each equal, true or false. If either of them equal true, then it's going to go straight to this next line. If they both equal false, then it will go to this next one. Okay, so let's save that and see if we now have white text on orange box. Alternatively, we could write and in here and this would only be true if these were both true. So only if the background color was green and orange, which is never going to happen. And you'll see that will then revert back to what's lights going to yellow And what? Start going to black. Should you have a couple of arguments to test against, you can check if they're both true, and then it will go to this one. So that's an if else statement. But for such a simple piece of code with just a couple of lines, and we might as well use a SAS function called the if function. So I'm just going to expand this out a little bit and show you how this works. So in if function is going, Teoh have a true or false value, and then some code that we're gonna execute for true or code that would execute for false. So I'm gonna write color here, and there's gonna be two possible options. It could be yellow or it could be this gray color. Now all we need now is this first section here is going to either be true or false. So what ideally we should do is put in all of this because we don't want the contrast bit. We just want that map bit into here and and just get the conditional off lightness less than or greater than 50%. I want to just put that in here, going to have the color there. Now, this looks like quite a complicated line at the moment. But if I just save it and refresh this page, you'll see that that codes black on that. Coz yellow what this is doing. Is it saying if this is true, make it yellow. If this is false, make it black. And this is what we're testing which says lightness great than or less than 50%. And it has this color in the middle, which is the map gets article background. Now that looks a little bit complicated in there. So what we could do is at the start of each loop, we could create a new variable Let's cool it background color on Let's just make it equal. Matt Gaetz article background color. Now that's gonna reduce a little bit because then we don't We're not repeating that text. We can just use that each time, which is a bit nature. But this is still quite complicated, so we could actually se and have another variable called Is Light. Let's call it is light, and this is going to simply be just a Boolean value, as in it will equal true or false. And I'll put this in here, and it should really be called his dark. Wouldn't it put this in here? And this will either have a value of yes, true or false, depending on whether this has a lightness of more or less than 50%. So now you can see that this is a much, much clearer, a little bit of code. And if I refresh this page here, it's still working exactly as we thought. So what we're doing here is which is creating some variables at the start of each loop through, so we could also just add this padding. Here. I have a variable cold padding on. We could do the same with the heading size, so it's just showing much clearer code
26. Congratulations: Well, congratulations. You've made it to the end of our course And in just two hours he have changed the way you write Style sheets forever. You can go ahead and start saving time Writing better style. She's right away. I hope you found the course Fun when I hope you found it informative. If you haven't for any reason please write me a message and let me know how I can improve it in future If you have an please share it with your friends on right to review And I hope to see you again But of course, very, very soon
Rob Sutcliffe, UI Designer / Developer
