Sass (CSS Preprocessor) Crash Course - CSS with Superpowers

hello everybody welcome back to the channel in this video we are going to be covering sas now sas is a substitute for css you can use assass instead of css to style your elements and i really really like sas because out of the box you get a bunch of things that you wouldn't get with css so sas has a bunch of things like variables mix-ins nesting all these cool things that you don't get with just plain old vanilla css and the reason why this is so important is because when you have large scale applications you need a way to organize your style sheets and the best way to do that is to use sas now sas i said was a substitute to css it's not really a substitute sas is a pre-compiler so what it does is it provides a bunch of cool syntax but ultimately it compiles down to css so if we go over here to this diagram what we're going to be doing is we're going to be writing sas and we're going to be using all of the cool features that sas has but at the end of the day the browser cannot read sas code it can only read css code so what ultimately is going to happen is we write the sas we make use of these really cool features that we don't get with just plain old css but at the end it gets compiled down to css and then the browser can read that css and that's really what we want we don't want our browser to use sas we just want to use sas for development purposes make use of all these handy features and then just compile it down to css and that is sas now if you want to follow along what i want you to do is just open up visual studio code that's really all you have to do you have to do nothing else and open up a folder in visual studio code and just create an index.html file and then in there just do doc just to get the boilerplate and then what i want you to do is to download two extensions in vs code and this is why this has to be vs code unless these extensions exist in other code editors go over here i want you to download this one live sas compiler and what this is going to do is it's going to compile our sas in um in a live browser reload as it says over here so as soon as we write sas what it's going to do is it's going to compile it to css and we need this because again our browser it can't understand sas we're only going to be using sas for development purposes now another thing i want you to download is live server and what this is going to do is allow us to open up our html in a live server and view it and as we make changes it will update automatically so for instance when you download these two extensions what you can do is you can go to your html right click on it and then you should see a option called open with live server so you can click on that and then it should trigger you to uh let me just open that in chrome it should go to localhost 5500 whatever it is doesn't matter you can just copy it and you can see here i have this empty html file now if i were to make a change let's add an h1 just say hello you can see here that i get this hello let me just quickly zoom in and you can see here that we get this hello and this is pretty nifty because um i really don't want to continuously reload the page in order to see these updates so this is a lot better so those are the two extensions just really all you need to have is just vs code and those two extensions installed and you'll be able to learn sas very easily with that so i'll see you guys in the next section in this video we are going to be talking about sas variables now variables is not something specific to sas we can utilize variables with css but they're far easier to use with sas so in this section we are going to be talking about how to use variables and why we should use variables and what pain points they alleviate so let's go ahead and let's get right into it so over here we have our index.js file and you can see here that we have our page and it says hello so what i can do right now is let's just get rid of this and let's change this to let's just change this to some lorem ipsum let's say we are we want to create a website that displays a bunch of different texts actually the texts are the same but within different fonts and we just want to display every single font so we want to display some sort of font gallery so let's go ahead and we want to go ahead and let's say lorem15 so we can get 15 random lorem ipsum names or words and now if we go over here and it's not refreshing let's just press refresh seems like the connection has died out so we can just open up our connection again and now if we close this we go back the whole there we go let's fix that up so now if we go here okay we should see this and let me just zoom a little bit out i think that should be visible for you guys okay cool so this is the first uh font that we want to display but we want to style it a little bit let's say for each font we want a different color so let's just style it a little bit so typically when we want to style something we would create a css file and then link it to a particular html element but in but we're working with sas so instead of creating a css file we're going to create a sas file so let's just create a directory where we'll house all of our styles and in here instead of creating a styles.css we're going to create a styles.sas now we have two options we can either use sas or s css typically scss is used at the end of the day it's really just sas we get all the same features but the way we syntactically do things is a little bit different and i prefer scss and i pretty much see scss used commonly throughout every single project just to quickly illustrate the difference between them let's go over here and let's go to the documentation if you go to learn sas i believe it's in learn sas okay let me just quickly zoom in this is a perfect example so over here you can see by default it shows you the scss and you can see here that we have our element that we want to or our selector so here we want to style the body and then just like sas we have curly brackets curly brackets and then or sorry just like css we have curly brackets and then we have our styles within that that's how we do it with s css but with sas we do it a little bit differently we don't have any curly brackets and we rely on indentation i personally don't like that and that's really the only difference between the two other than that they're exactly the same so i prefer to use s css all right so i hope that clears that up uh they're really the same at the end of the day you're your choice so let's go over here and let's give this a class of text so i'm going to give this a class of text and what i want to do is i want to style this text of course so let's go over here and let's style it now how do we want to style it of course we have to select the element let's select it by class and now we want to style it so let's say we want the color to be green we also want the font size let's say our designer wants a very specific font size f 2.43 rams very specific and they want to display for this specific text font family of i'm just going to pick one of these defaults let's do georgia times new rom and then times sheriff so if i were to uh if i were to save this and go back nothing has changed and there's two reasons for this the first reason of course i had i haven't linked this to the html and the second reason is i have to compile this down to css the browser can't read this now this looks like normal css and pretty you can you can utilize normal css practices in a sas file completely fine uh but if we want to utilize this we have to compile it down to css regardless so at the end of the day we should have something that's called styles.css not styles.scss so how do we do that well that's where we utilize the extension that we installed the live size compiler so now what we can do is we can just click on watch sash so you should see this over here watch sas and right now it's going to watch the sas files and if you look at the directory let me just zoom in a little bit if you look at this directory you should see dot scss but you should also see styles.css as well as styles.sdss.map you really don't have to worry about this this is just mapping the two together but you can see that this got compiled down to just regular css now this looks exactly the same and it is exactly the same we just have a text and we have color font size and font family so again you can utilize normal css practices with sas but sas of course gives you additional things that you cannot do with css so now what we can do is we can go over here and we can add a link tag so let's add a link tag and we're going to say yes this is a style sheet and we're going to move into the styles directory we're going to use the css file so now if we were to save this you can see that we have our text okay cool so now we want to display more text with different fonts so let's just go ahead and just copy this five times and let's say that we have over here two three four and five and we want to style this in different ways so let's go ahead and let's just go into our sas file and let's create those those styles so over here we're going to have 2 3 and then 4 and then 5. so if we were to save this this is going to again compile the css over here and we should see all this change now what we want to do is we want to change the color for some of them just so that they're not all the same color so let's say this one is a little bit orange and we're going to say that this one fantasy if you want to display the fantasy uh font family for this one this one will say is yellow and let's say that this one is go with cursive that one seems kind of cool let's go with that and then over here let's say that this one's aqua and this one will say monospace and then over here let's just change this to i don't know red and let's give this one [Music] whatever this is so let's save that and oops i did this in the css file i should have got rid of that okay let's let's actually just copy this and let's just paste it in the sas file it's exactly the same styles anyway so let's save that should get compiled down anyways even though i already did it and now you should see all these texts let me just zoom out so now over here we're displaying all our text we have a nice website that showcases all of these different fonts all right so that's cool but right now there's just a tad bit of a problem let's go to our sas and let's look at the let's look at the code over here so over here we have color and the color seems different for every single one and then similarly we have font family which is of course different for every single one but the size the font size is consistent throughout every single element it's always 2.43 now when something is consistent throughout many elements and we go ahead and just hard code it out that could be very problematic let me tell you why right now our developer is or our designer says hey i want 2.43 rams for the font size but maybe i don't know a week from now he's like you know what i really don't like that font size it doesn't really work i think it needs to be 4.45 or or actually let's just say three rams just so we can see it now in order to make that change we have to go through every single element and change it so we'd have to go here three here three here three and if you have multiple style sheets and you have a very large application for one we can miss things and for two this is very very tedious so that is not great that's not a good option so how do we fix this well one way we can fix this is by having variables so if this is a very common thing then what we can do is we can have variables and in sas we can use variables like this let me just unindent this a little bit i made it worse there we go so in sas we can utilize variables like so so at the top of the file what we can do is we can say dollar sign and over here we're assigning the variable name we can say base font size so we can call it whatever it is that we want and then over here whatever style we want to save that variable as so over here we can just say 2.43 rams so now what we can do is copy this and just paste it in here very very easily so you can just copy that and just paste it in here and that way that way every single text is using this font size and to prove it to you well nothing has changed and even if i refresh nothing has changed and to even more further prove it to you if you go to the css it has transpiled or compiled down to this over here so it looks exactly the same and now if your designer is like yeah i can't i really need this to be a little bit bigger i need it to be 2.75 we don't have to go through every single one now what we can do is we can just change the variable to 2.75 and then you can see it has gotten a little bit bigger and over here in the css you can see every single one is 2.75 and that right there is the power of variables now typically what i like to do is inside of the styles directory i like to create a variables dot css and then in here i like to house all the variables so i can get this variable and i can paste that variable in here and now we have an error so so the error is actually we don't have an error let's let's uh get rid of that now the error is i believe we should have an error let's quickly save this okay i don't believe it's gonna show but if it was a react application it would show actually here we have an error it's saying that hey this is not defined and the reason why it's defined is because we define it in a completely different style sheet so in the variables dot sas file so to get this style sheet and everything inside it right over here all we have to do is utilize the at import so over here we're just importing everything within this style sheet so we can say at import and we want to import everything from the variables.sas and so now we can utilize this variable so we can save this and now we shouldn't have that error anymore and if i were to change this back to 4.3 notice everything's 2.7 or 2.75 yes and i were to save that in just a little bit i guess it's not changing just surprising let's save that it says success okay it took some time but you can see everything has changed all right cool and that's pretty much it that is really all you have to know with variables variables are very neat especially when we have something very very consistent and i highly recommend using them whenever possible because they really organize your style sheets so that is variables in the next section we're going to talk about mixins which is another form of a variable but it allows us to store multiple different classes so i'll get to that in the next section in this section we are going to be talking about a very special sas feature known as mixins and to introduce mixons let's talk about a potential problem that could arise so let's say that we have our website here our designer likes it but we need some improvements for instance we need a margin between each font so we need a margin between each one and we need maybe a little bit of padding so that not everything is squished to the end of the screen so over here our designer is like hey i want you to add for each text i want you to add a margin bottom of let's say five rams so you can go ahead and you can say okay margin bottom of five rims now this is going to be consistent throughout every single one so you could store this as a variable if you want to but let's say that you already did that i'm not going to do it here but let's say you already did this there's still another problem that could arise over here you know what let's just go ahead and just do it quickly so let's say dollar sign and we can say just margin font or margin bottom font and we can say 5 rams so we go ahead we we do the good thing we add our variable inside of our variable.sas file and then we have our variable over here so if you were to save this we should see if we refresh we should see it okay cool but there's still a little bit of a problem here i still have to copy and paste every little thing in here this is very annoying and very problematic so now let's say that okay now we also want to include padding well again we would have to do the exact same thing for this one i'm just not going to add the variables but you could if you wanted they're consistent we're going to three ram of padding and then we're gonna have to copy every single one super super annoying okay so how do we fix this well we can fix this by grouping common styles together with mixins and then giving them to a specific selector so let me just show you what i mean so over here what are the common styles well i mean everything at this point is common but let's just focus on the ones that are consistent we can really just utilize everything but again let's just focus on the ones that are consistent so for instance let's focus on the uh the font size is always consistent and let's also focus on the margin bottom and i missed the padding for this one so let's add the padding here so let's go ahead and let's utilize this so in here we can say at mixin and we can call this mixin let's call it base text and we're going to call this base text styles because well this is going to house a bunch of different styles and so in here we can have a bunch of different styles for instance we can have the font size we could also have the margin and we can also have the padding so we can put that in there and now what we can do with this mixin is instead of having all these redundancies we can just get rid of them and at the very top what we can say is at include and this basically what this does is it allows us to include a specific mixin and the mixing we want to include is this one so we say hey we want to include the styles of this mixon so if i were to save this you can see these styles remain the same let me just quickly just change this and say background color just so it can really illustrate this background color of aqua so now if i were to go to the style sheet you can see here that i get background color of aqua and this is the only one that gets that style so you can see that this is a lot better so now what we can do instead of instead of utilizing all these classes you can see all these redundant classes we can just include this mixin so we can get rid of the font size because that's already within the mixin as well as the margin and the padding just include the mixin let's get rid of the font size because everything is consistent put in the mixing let's get rid of that let's get rid of that and let's put in the mix in and then lastly let's get rid of the font size here and let's just put in the mixin and notice that nothing will change absolutely nothing changes it remains exactly the same and now if you want to add if your designer says hey we need a border around each thing you don't have to go through every single one all you have to do is just say border solid black and then now we have a border around every single element which is really cool of course the border is hideous so let's get rid of it but that is the power of mixins and what's great about mixins is they really feel like programming languages and there's so many different cool things that you can use instead of styling you can really programmatically start picking the styles that you want and let me show you what i mean by that now over here you can see that the color is the same but it is uh it is always we still have the color property of course but the value is different we can actually include this in the mix and if we want to but you might say well this is always going to be consistent how are the values are always going to be consistent how are we going to have these dynamic colors well we can do just like a programming function we can have variables and over here we can say dollar sign and then color so over here what we can do is say hey the color is whatever we pass in to the parameter so the color the property color is going to be whatever we pass in over here so now what we can do is instead of just invoking this over here instead of just using it we can invoke it like a function and over here we can say green so now if we were to get rid of this and we were to let's you can also pass in we can pass in any style that we want so any style value that we want so we can get past that in if we want to uh let's get rid of this and we can of course do the exact same thing with the font family i'm not going to do that but we could also do that with the font family sorry what was the color of this again let's copy that oops let's get rid of this let's pass that in let's copy this and get rid of that and let's pass that in and let's go over here and we can pass oops i forgot to get the right color this red color and you can pass this one all right cool and this is exactly the same you can see the colors are exactly what they were before and we passed those colors in to this mixin all right so let's talk about something else some really cool thing that we can do with mixins so we can do what we can do also is let's say we want to provide the background color and we only want to provide really want to show a different background color for certain texts that we feel like it so what we could do if we want to is we could say that we want the background color so we want the background color and what we could potentially do is say instead of passing it in if we want the background color to be transparent for the ones that we don't pass in the parameter for what we can do is you know let's just change this to background color because this is just a variable what we can do is we can say that by default the styles is transparent so now what we can do is of course over here we can say background color and then we can say dollar sign background color is this one and by default if i were to save this you can see let's just go back hopefully it compiles it takes some time but you can see by default everything is transparent so now we don't see anything but if we want to what we can do is we can go to let's say this third one we can say yellow and i spelled yellow wrong yellow you can save this and now you can see that this is yellow now i don't really like this the reason why i don't like this is because in our css we have this background color and it's always transparent and i really don't like this extra style that we have here we really don't need this by default if we if you have a background if you don't specify a background color it will be transparent i don't really like specifying this style so what we can do and this is what i mean about how mixins can really be functions is we can have logic in here as well so we can say at at if so we can say if the dollar sign background color so if the dollar sign background color and over here we can say is not equal to transparent so if it's not equal to transparent then we want to create this style so then we want to create it but if it's uh but if it is equal to transparent which is what it is by default then we don't want to create this style at all so now over here you can see in the styles you don't have the background color we don't have the background color you only have the background color over here is where we specified it that's that's amazing like this is this is real this is programming where we have if statements and we're passing parameters this is really what's done in javascript to ruby or c this is and we're doing that with css which is pretty nuts so we can do that as well now one really cool thing that i also want to show is we can also define properties which is pretty nuts so over here what we can do is we can say dollar sign property so we can say property and by default let's just say um i don't know if you can just say nothing let's just say this one's tough i'm trying to think of a thing that yeah we'll just say nothing or or no how about that so we'll say null by default and then over here we can also provide a value so we can provide a value and similarly we'll just give this a default value of no so now over here let's just do the act if and then we can say here if dollar sign property equals null then we don't want to do anything so let's just go here and we don't want to do anything or actually if it's not equal to null we want to do something so now what we can do is we can say that we want to use this property and remember the property is something like font size margin bottom padding and so we want to utilize this property to do that we can do dollar sign and we can say dollar sign property and we can say we want this property and we want dollar sign this value so over here what we can do is just go ahead and save this make sure that we don't have any errors and we don't everything is a success terrific but now let's go over here and let's say we also want to specify uh a border so we can say here this is a border so this is the property matching this property variable over here so the border and then we want the border to be 0.2 rem 0.2 ram solid black that's the value so let's save this and let's go here and cool so we can also define properties and you can see that that's the property right there of course you can also change the property you can i don't know make this to border radius and you can go over here and you can say five ramps is the value so now it's it's kind of circular i don't like this so let's just go back to what we had before so there's a lot of cool things that you can do with mixins and i highly suggest also with mixins put these in their own file you don't want to put them inside of the style sheet where you're selecting the elements and styling them what you want to do is you want to create some sort of mixins.scss just save that there and then in here just do at import and you want to import everything in the mixins dot as css same exact thing and what's cool about this is if you go to the css it just looks like normal css and then over here you can see that we have the border uh but over here there's a lot more complexity and there's a lot more logic and a lot more cool things that we can do with it all right so that is mix-ins i hope that explains it in the next section we're gonna be talking about of course some other really cool sass features in this section we're going to be talking about another very important sas concept known as nesting now again to do this to illustrate the importance of nesting let's just look at a real life example so inside of our index.html what i want to do is i want to copy these this header and what i want to do is i want to get rid of the class styles so over here let's just copy it and i want to paste it in twice so we should see something that looks like this so we should have these nice styles over here and then right over here we shouldn't have any styles okay cool now what i also want to do is i want to wrap these two h1 elements inside of a parent element the first one is just going to be a regular div element so over here let's have a div oops not all capital case let's have a div i'm going to wrap it inside of that div over here i'm going to use maybe something more semantic let's say a section so a section element and i'm going to wrap that inside of the section element now what i want to do is i want to style each one of these without the use of any classes how do we do that well we could use just the h1 selector but the problem with that is the styles is going to apply to every single h1 including these two so you might be thinking okay well what we can do is because we can look at the parent and then we can style the child within that parent so for example we can do something like div and then we can say h1 so the h1 inside of the div in this case there's really only just one we want to style this so we can say here and we can copy this over here we can change the color to something else if we want to let's change it to purple and let's change the font family to uh apple system i've never never seen that before let's see what that looks like so we could do this and that way we can also do the exact same thing but this time instead of the header what we can do is we can say we want to get the h1 inside of the section similarly over here what we can do is we can change the color and we can also change the font family let's just pick one let's pick gil whatever this color is or font family is so if we save this now if we go over here you can see everything works perfectly and well this is this is awesome this is this is terrific uh but there's actually a better way of doing this with sass instead of having the div element and then whatever is underneath it uh this can be a little bit problematic and the reason why this approach is problematic is what if over here we have another one and this is an h2 for instance and now what we want to do is we also want to style this h2 we would have to create a div h2 well there has to be an easier way to do this and for this let me just say that the opacity is 0.2 rams so let's go ahead and save that and we should see this somewhere over here uh right here this one okay so this is again this this is kind of annoying very very repetitive with sass we really don't have to do it this way because we have nesting so we can accomplish this exact same thing by doing something like this so we can say div and over here we can pretend like hey we have our brackets like we're going to style the div but then over here we can specify another child element so we can say h1 and then within the h1 we can have all of the h1 styles so within the h1 we can have all the h1 styles and this achieves the exact same thing as this but now what's great about it is also in here we can style the h2 and over here we can save this and copy that in here and now if i were to get rid of this and notice i didn't save yet so let me just quickly just show you how the styles look right now so over here we have our h1 and our h2 and now over here if i were to save this and refresh these styles stay exactly the same similarly over here it's exactly the same but this is a really really cool and very important feature especially when you want to use this kind of finding selecting elements by looking at the parent and this is a really good way to organize your styles and of course you can nest it however much you want so again let's say over here inside of the html we have over here a span element oops we have this let me just i didn't cut this let's say this a span element and we want this span element so in here we can also specify another element called span and over here we can say font size of let's say 20 rams so just one letter is humongous and this works perfectly okay so over here again in the style sheet you can see that at the end of the day it looks something like this but this is just a cleaner let's get rid of all these other files this is a much cleaner way of doing it and especially when you're using the bem methodology if you don't it's a very very common methodology it's not really a language or anything it's just the methodology of writing class names this is very very useful this kind of nesting all right so that is pretty much it really oh that's that's all we really have to do let's just get rid of that uh span we don't really need that actually i'll leave it in there we're not styling it let's just get rid of this h2 and in here let's just talk about uh something really cool that we can do with this and right now this might not seem as practical obviously when your application gets a lot bigger this is very practical but right now let's say that what we want to do is we want to uh once we hover over this h1 in this section element what we want to do is we want to change the background color now the way that we're doing it right now what we would have to do in normal css is we would have this and then we would say hey when we hover i believe it's only one so when we hover we want to change the background color to aqua okay you can see pretty uh i mean this is pretty annoying so let's just hover over this you can see the background color gets changed to aqua pretty annoying really don't like this so let's just use nesting instead so to do this what we can do is first of all let's say in here we're going to want to nest this in an h1 and now inside of the h1 we want to use this hover now the thing is is if we nest it the way that we're nesting this over here is it it's going to say section and then space h1 as you see let me just get rid of this as you see right over here it's going to be section space h1 but what we want is we want section space h1 and then colon without any space and then hover so the problem with this over here is if we want to also nest the hover we say hover and then we say background color of aqua the issue with that is you can see we get this space now to remove the space all we have to do is provide the end what this does is says hey we want to attach this to this parent element so now what we can do is save that and you should see now we have no space and now this is a very very practical and cool example that we can utilize and of course when we go over this we can hover all right so i think that is pretty much it for nesting uh nesting is is a really really cool and important feature in sas and i hope uh this this section really explained that and in the next sections again we're gonna be dealing with other cool features i'll see you then wow is sas a programming language now we're talking about inheritance well let's talk about that and how we can use inheritance to really easily style our elements so over here i introduced two new elements i introduced the div and i've also introduced the section element now let's say that what we want to do is we want to style these elements so let's go ahead and let's say class we're going to call this let's say that we have different class names for these now at the end of the day this seems kind of redundant but let's just have different class names so over here we're going to say div container and then over here we're going to say that this is a section container now alternatively what we could most definitely do is style things over here and i don't want to do that because uh it's just there's there's a lot going on here and i just want to really showcase inheritance at the way that it works which is which is really cool and to do that i think if i did it within the section or div element because we have all this nesting it might take away from that so what we're going to do is we're just going to use these these class names so let's go ahead and what we want to do is we want to style the div container so we want to style the div container and we want to say that the border is you want to give it a border let's say of solid uh black and uh let's see what else here what else could we give this let's just make it really ugly let's also give it a border radius of 50 percent okay this is hideous and let's also give it a box shadow of um let's give it a box shot of one ram or 0.1 ram 0.1 ram and then let's just say one ram of black let's also make the border radius not that hideous let's just say one ram instead okay okay that looks still kind of terrible let's just give this uh let's just make this more uh give it an opacity a little bit over here okay cool so now let's say that inside of our section container we have a little bit of styles as well here so let's say we have uh let's say i'm really trying to think of different styles for this uh let's come on think think thick let's say the background color is just this this color over here uh and maybe we have a text shadow of 0.1 ram 0.1 ram this just gives it a shadow and let's just say black so over here we have this the shadow here as well it's kind of ugly but we also want to have these styles as well uh in this container so we want to have the border as well as the border radius as well as the box shadow so one alternative we could do is just go ahead and just copy and paste that but again we have this redundant code now what we could do is we already talked about this we could place this in a mixin but i like to use mixins if we are using many elements that use that block of styles let's say for this example really the only two elements that are going to be using these styles are these two the section container and the div container but no other element is using this and i think that's kind of a waste of using mixins you mix things are more typically used when we're consistently using those styles across multiple elements now over here two elements it's kind of a hassle to use the mix in and we're going to have to it's just a lot of work so what we can do instead is we can say hey we want this class or this element to inherit the styles of this element instead so and we can do that extremely easily with the at extends keyword so over here we can say at extends and we want to extend this selector over here so basically what this is doing is it's saying hey we want all of the classes over here plus these classes and really all this is doing is inheriting these classes and as well of course it has its own classes as well so now what we can do is you can see we have it's really not spaced out because we don't have any margins but you can see that it's perfect it works completely fine and it has inherited it so this is another approach if you want to kind of just save on code and make things a lot easier now of course if i were to uh add another thing so we can say i don't know i never know what to do here let's see i'm just i'm just putting like random random things let's say font weight that works let's say 900 that's also inherited over here as well i don't think that was even shown maybe if i did 100 the font way is not really being shown let's pick something else font styles let's pick italic so you can see here this is italic and then also this is italic uh we can always i don't think i mentioned this you can always override things if you don't want it we could say font styles you can say normal or oblique let's just say oblique for this one and you can see here that oh you know what let's just say normal i'm not sure if oblique is similar to italic you can see here that it's back to normal all right so that is pretty much it in the last section we're going to be talking about operators in this section we're going to be talking about operators and i really like this because it's super super cool to utilize so for example let's say that i right now i created this element over here this text 6 and what i want it to be is i want to define the width of this in percentage i want to define the width of this in percentage and i know the whole viewport width let's say for example is 1000 pixels or actually let's make this a little bit more complicated let's say that the full viewport width if you don't know what a viewport is it's the width from the beginning over here to the end so from the far left to the far right let's say it's something like uh let's say 1264 pixels so that is the full viewport width so over here i created this h1 element gave it the class of text six and i also have this over here i just created the at include give it a different color in a different font family and i want to specify its width now i know that the width is again 2 point the the max width is 2.43 pixels now what i want to do is i want to specify this width in percentage so what i can do and this i can't really do this in sas is first i have to figure out okay how long do i want this to be how what does the width have to be let's say i want the width to be uh 433 pixels so i want it to be 433 pixels but again i want to specify the width in percentage so what i can do is instead of doing this calculation in a calculator and figuring out the percentage i can just let sas figure it out so i can say hey i want to divide this many pixels by this many pixels and then i want to multiply it by a hundred percent so if i were to save this you can see here that the width is appropriate and if i were to go to the styles you can see that the width has been calculated really really cool and we can utilize this with mixins if we want to if we can actually pass in the width as a parameter we can also it doesn't have to be we can also put this in parentheses and we can use just normal bed mass so we can say something like this maybe over here we can have another set of parentheses and we can say this plus uh 20 pixels divided by this and maybe we can also multiply it multiply this by um 1.2 pixels so we can do all kinds of wonky things of course we can also subtract as well so we can subtract i don't know two pixels here and then it will recalculate the width and you can see everything is fine so we can use these operators as well which is really really cool all right so that is pretty much it for sas thank you for watching this tutorial i hope you learned a lot and now you can utilize sas in your own projects

Channel: Laith Harb

Views: 2,047

Keywords:

Id: fc3IFF4B6Jw

Length: 51min 55sec (3115 seconds)

Published: Sat Jul 03 2021