Learn Sass in this Free Crash Course - Give your CSS Superpowers!

hey everyone today you are about to take a crash course in sas oh and hey i'd like to point out this video's awesome sponsor skillshare.com which offers thousands of classes in design coding business and more for instance you're about to watch my crash course on sas but you could watch this full course about getting started with sas and improving your css workflow at skillshare now skillshare is just 10 bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in youtube then you get the first two months free all right so let's get started so you're about to begin a crash course in sas from a very beginner's levels perspective so i'm going to assume that you've never touched sas before maybe you've heard about it but you really don't have an understanding of how to exactly use it or integrate it and i'm going to show you exactly how to get up and running and using it so we're going to do it by example because i'm a huge advocate of learning by example not just based on theory and all that stuff so the project that we're going to use to help us learn how to use sas this is just a very simple modern looking landing page and it's also responsive as you can see so i'm going to show you how to make this responsive while using sas all right so again if you want to get more into intermediate to advanced level stuff first watch this and then you're going to have a really strong footing because we're going to get into variables nesting mix-ins and functions uh and you'll see that it really helps you just um it's it's css on steroids essentially all right so i'm going to explain it as best i can and we're going to do all based on this project here all right so today's question is what other learning resources outside of this youtube channel do you learn from i'll go ahead and i'll answer that very question myself in the content in the comments here in the very first pinned comment go ahead and leave your comment as well and let's get started all right so we're going to go ahead and get started here in your console your command line i'm using cmder. console emulator for windows it's free um and i'm in my project folder and we're just going to make a new folder make directory we'll call it sassy and then we'll cd into it or hop into it afterwards all right so at this point when you're creating a new project um you if it's a node-based project you would use npm init and that would create a package.json file for you which will then store your project dependencies including development dependencies and sas would be included as a development dependency now there are different things like gulp which can handle compiling your sas as well as webpack and a few others but i'm not going to use that method we're going to use visual studio code instead and use a live sas compiler which is an extension for visual studio code now visual studio code is very popular for writing code and it's from microsoft and it's free all right so that's what i'm going to use so we're not going to do this whole node stuff so instead i'm just going to put in code period and that will load up visual studio code in the current folder right here which you can see is now blank all right so i'm going to create real quickly an index.html file and i'm going to going to hit an exclamation point and that will give us some quick boilerplate html code and inside of here we're going to reference the css file that we'll use for this project so we'll put it in a folder called css and then forward slash main.css now you may be wondering to yourself why isn't that a sas file like scss file if we're going to be writing sas well that's because sas is compiled into css so if you're new to sas you'll figure out what this means exactly momentarily all right so i right here is good we'll save this and then we'll also create a new folder our css folder and inside of here we're going to create a main dot scss which is the sas extension all right great so at this point we need a way to i pre-compile this sas code that we're about to write and like i said you can use something like gulp and you can and that would really just extend beyond the scope of this tutorial i just want to focus on writing and understanding sas but so what we'll do is just use an extension for visual studio code all right so if you go to google and you type in visual studio code live sas compiler you'll get this url right here and you can install it you can click install and then it'll say open in visual studio code i already have it installed as you can see but this will normally be a i think a green install button you click install and then you hit reload and it reloads uh everything here that you see and it'll be installed at that point you'll see down here a watch sas button uh because we have a sas file selected so all we have to do is just click watch sas and we can see this output and this will give us any type of warnings or errors with our sas code down in this output section and you could just you can also minimize this or close out of it if you want i'll just kind of leave it down here and now i you can see that automatically generated uh a map file which we don't have to worry about but we can also see the main css file so when we're writing uh we're working with a project that has css that is based on sas we don't modify this css file because any changes in here will be overwritten automatically when we save the the changes in our sas file so in our sas file we can write you know we can use the features of sas but also just regular css so you know theoretically i could just write out a complete plain css in here and it would all get compiled regularly in our main css file but that doesn't make sense obviously we're using sas because we want to use some features that aren't really readily available in a regular css all right so the first thing we'll cover and before we get into the project uh of actually developing this landing page is variables in sas it's a very it's the most simple thing and what's interesting is you know now that the the internet has matured since the release of sas and css has matured we can't actually use variables in css sorry css native css without using a precompiler like sas or something like that um right now at the current time of uh recording this tutorial it's at eighty-seven percent usage uh availability in ins and browsers so if you want to know what it is you go to canius.com and you just type in variables and then css variables right here and these are otherwise known as custom properties and you can see it's at 87.52 percent so there'll still be about you know sixteen and a half percent of people who won't be able to see uh you know the the css natively that are that are um depending on uh variables or custom properties so you can still use sas for variables even though they're pretty widely supported already and this way it'll absolutely ensure that everyone can see it because it takes those variables and it doesn't make them variables anymore in the main css file so let's just show you how this works so we'll say for instance we have a variable called my color and the convention is very typical i'm going to hit ctrl b by the way to get rid of the sidebar we'll call it my color and we'll give it a value all right so the the name of the variable is i prefixed here with a uh the cash sign here all right and then we put a colon and we say all right we put a value of some sort if it's a color we'll just put a hex value or you could use rgba or any of the other ways to define colors in css and we'll just say zero zero five dff it's like just a regular blue color then we'll say body this is regular css here at this point we'll say background color and then we'll just say instead of giving it a value we'll say my color up top alright so now this of course is will not work in regular css so if we save it hit ctrl b we go back to our main css file we can now see what has happened is it transformed this my color we don't even see this variable as you can see it's gone all we see is this body color and it says the value that is attached to this variable and so this is handy because if we have a color theme for instance that is with this color that's widely used throughout the site we only have to define it up here once and if we want to change it we only have to change it once all right so we can also use what are called sas maps and if you're familiar with javascript objects which have property value pairs i this is the same sort of thing when it comes to sas sas maps and instead of calling them property value pairs you can call them key value pairs all right so for instance uh what would be really handy is usually when you're working with a site you're developing a site you have a color theme you have multiple colors you have a primary color you have an accent color background color lighter variations of these colors whatever you have multiple of these colors multiple things right well you can use this sass map so the way we do this is we'll create a normal variable except it's going to be based on a sas map colors plural and we open it up here in our curly braces and then inside of here just like a regular javascript object we put in let's say for instance we'll call this one primary and this time we get rid of the actual um the the dollar sign here we just put the name only and then we put the values except with us without a semicolon we put a comma so now we can put multiple oh and by the way these aren't curly braces that's why it was showing a little screw squiggly bracket right there um and so now we could put multiple values in this colors sas map and so i'll show you also how we can reference this because it does change up a little bit uh for the values in terms of how you reference it so now um we'll say we'll have an accent color of fff6bb all right and so that by the way i is just this color right here from our adobe xd this with this right here this sort of yellow color right there all right so now how to re-reference this and by the way we could put as many of these as we wish inside of the sas map so now the way we get a specific value here or property or in other words a key it would be map hyphen get and then we pass it in like a function here or arguments and we pass in in the first argument the name of our sas map which is colors because we can have multiple so we have to specify which and then the key that we want so primary just like that all right so now real quickly i'm going to control b there's also something that we're going to use another plugin if we right click open with live server if you don't have this option just go to google and type in live server extension for visual studio code and you can install that and reload and you'll have the option so now once we do this it'll open on port i have mine set custom to 5.501 but normally it is 5.50 i believe and here it is so now whenever we make an update to our project it's going to refresh and we can see now that this works and if we look at our main css even despite having changed up from a regular variable to a sas map it still looks exactly the same it's really a sas map is really just there to help us uh in terms of organizing the the uh and working with our code here all right so now what i want to do is let's start actually focusing on creating this project right here now we're going to follow the whole convention and the pattern of mobile first so we're going to first design and structure our css based on mobile first meaning we're going to create this variation here first before we do responsive media queries for this over here all right so um the very first thing is our background we could see that it's a it's not just a regular flat background we have sort of this polygonal sort of slanted thing happening here and there's a really handy free tool a web-based tool that can help us generate what's called a css clip path now this isn't specific to sas or anything but i want to show you how this works so i i'm going to get this url up over here all right it's benefit feely.com or bennett with 2t spheli.com forward slash clippy and if you just go to css if you go to google and type css clip path the generator you'll find the same result and this is really cool and handy because what we want to do is kind of recreate this shape right here and if you think about it it's one two three four five different points so we could start off with a pentagon and then simply recreate that general shape as seen here and if we want the dimensions or the proportions from width and height to match up a little bit more close to this iphone x resolution we can come down here and just change the height portion um to maybe like 600 all right so now i can kind of look at that and we'll just push this down a little bit further and a little bit in and yeah that's good right there so then at the bottom we can see we have this clip path code and that's exactly what this just generated and that's the only property we need we don't even have to include the prefix because we have uh um this uh though it'll automatically this live sas compiler will automatically generate the gender or not the gender but the browser the vendor prefixes for us it's late and so here's how we'll do this i what we'll do is let's first before we get to that part put in body and then html and we're going to set the height to 100 and this is going to be necessary for helping us um unders really get that full uh background going and working properly and then um what we're going to do is we're going to put in font family we'll say montserrat i have this already installed on my sheet my machine so um if you don't you're going to need to go to google.com forward slash fonts if you want to use the same font and then find monster at and then import it up top with their import code and then let's go ahead and we'll put margin 0 to get rid of it the default margin that's added by the browser on the body element and then we'll also for the first time do something else that's that's very handy and that is nesting so right now nesting is not supported natively in css it will be shortly but not now and so what i mean in nesting is for instance let's write out a little bit of a html to get us started here we'll put in just simply a div id equals bg for background and that will hold our background on our blue polygonal background so we'll save this here and then what we can do is nest it inside of the body element and we can reference that so we could just put bg and there we go natively in css this would not work you can't do this this would have to be outside here outside of this body element but sas makes this easy and you'll see once we update it how it will change that into the regular css so this is just helpful for for organizational purposes being able to nest so this is where we paste in that clip path right there but we also have to add a few other properties like background color and we're going to use our map hyphen get colors and primary that's the same code that we had earlier we're going to make the width 100 the height 100 and we'll put position i absolute and we're doing this with the z index so that uh the stuff that's it'll be an absolute background basically and that way the stuff on the foreground will be on top of it um you can see we have that success down there we go back to our document and there we go all right so real quickly i'm going to hit ctrl shift i here in chrome and we're going to click on this little toggle device toolbar when we're on iphone x so now we'll just keep on we'll refer to this version going forward awesome awesome stuff all right so let's look at this main.css file after you know having our first nesting experience uh you could see that it's not inside of body the the bg element it simply manip it adjusted it so that i we have a body and then bg right in here uh right afterwards so um you can also see it automatically generated the prefix for us so then we didn't have to copy both of those lines and we don't have to add offender prefixes so very very handy and helpful stuff all right all right excuse me all right so now let's continue writing um the html that's necessary for all this to take place right here and don't worry it's not that much and none of this has anything to do with sas at this point um so if you want to i mean there's going to be a github repo for this in the description of the youtube video you can just clone it or download the zip file and just copy and paste to see it at the html if you don't want to follow this um but really it's not going to be much so we're going to have a header element with an ahref going nowhere with our zoom zoom i don't know what i was thinking with that name our zoom zoom anchor text we're going to use a main element and then we'll have two section elements so section id we'll say is card that'll be that'll house this right here this whites part and then the second section will be for this stuff down here the headline sub headline and call to action button all right so um inside section id we're going to have an unordered list for those little chat things i guess you can call them with a list item and then a span now the span is just going to be there to help us generate the necessary markup for these little things right here um normally those would be like an image or something for an avatar but i'm not messing around with that um we're just going to make empty span elements you could use by the way the pseudo class of before with the content property to generate these but just to keep the market more similar to how it normally would be i'm just going to put some tags here all right and then we're going to put in strong and how may i help you bro oh man i need to think of better content and then i'm just going to copy that and paste it three times and then i'll just really quickly um i'll just copy this off screen i don't feel like typing i don't know if i can be helped and that's deep let me help um something like that i i think will be pretty yeah that'll be pretty good just like that um and then finally um after that we have our second section and we're just going to call this one primary and then we're going to put in h1 so your personal assistant if i can type there we go a paragraph element for our sub headline and this will be get help with your daily life stuff all right good and then finally just one more and we'll be done so this is going to be ahref going nowhere get help already this is our call to action button that's it so now if we save this it's going to look like crap so let's make it look good with the help of sas all right so if we go here back to our main sas file one thing i another concept that i want to introduce that's specific to sas are functions and functions are relatively new in the sas world um i think roughly just about a year even though sas is quite old um and basically they are what they are they're they're functions that you can use so you define a function name along with arguments that are acceptable into that function and then you return something based on the values that were inputted or the arguments so for instance i there's a lot of different use cases for functions i'm not going to go into them you can use google to you know to figure out potential use cases where functions can be helpful one such use case here is this for instance this is not pretty this whole map hyphen get and then having to specify first the name of the sas map and then the key that you want to make this a little bit better looking what we can do is we can make this function up here so the function the way we create one is we put the at sign in the name function all right so it's always that and then we're gonna give it a name i'm gonna call this one just simple something that's that makes relevant sense and would be color so color will accept simply one argument and that will be color hyphen name and you can name this whatever you want all right so then inside of it we use at return and then we're going to return map hyphen get so really we're just using this as a proxy to call map get and do all this ugly stuff here so we're going to put map get and we're going to pass in and we're going to hard code the name colors up top for the sass map so we're not going to have to specify that anymore because this is only going to accept one argument and then the color name which is that's going to be the thing that we specify as an argument for this function all right so just like this that's our function so now this can go ahead and completely get changed to simply i'll start from scratch color that's the name of our function and which color do we want well we want a primary right because we could see up here we want primary so we simply pass in primary all right so now we can go ahead and save this and we can see it still worked and you could check that and verify that right here and yes it did so now this is a lot more friendly and now you know how to use functions here in sas all right good good stuff so let's continue on here and i we're going to get into the responsive stuff after we get the mobile first stuff ready so uh looking at this nesting thing uh what is it next that we need to specify um some markup for so let's look at our current so let's start at the top which is um the logo that is not what this document looks like we want it to look like that all right so let's create the rule set for that and we can nest this as well because it's inside of the body element and it's inside of header and a nothing's happening with our header element so we can just put in header space a just like that all right so now we'll make the color of it white text decoration we're going to say none that gets rid of the default text underline that it adds let's also create another variable or a variable up here called padding all right and padding will be 15 pixels all right so again it can accept any type of property value when it comes to uh the uh variables that we have defined up here so padding equals padding whatever and then um we'll go ahead and continue on we're going to put in display block and text decoration uppercase to transform everything uppercase so let's save this and now let's check it out much better much more consistent with what we're we're working with all right so now we can keep on nesting a bunch of levels in but usually the convention is is not to add too many different levels so you can just come right back outside of the body element here that we've been working with and we can just start fresh with the next element which is the main element because this we can see the main already has several levels deep of of elements that are nested there so we'll just say main i don't really have any markup for main but we'll just leave we'll leave it there as a starting point and we're going to reference the next element in our html which is section id card so section card all right and inside of here this is this is right here this section right here and how many times am i going to say here i don't know all right so now we're going to have background white for that padding will be 20 pixels i'm going to make that a little bit bigger than the other padding margin 1em on the top and bottom in auto on the right and left and that will center it and then we'll put in border radius and i'm going to make another one called borders a variable so just above here we'll say well beneath it no big deal borders we're going to make that 15 pixels as well and the reason i wouldn't just use the same is because i want to give myself flexibility in the future if i want to adjust these two different properties all right so borders is there and then we're going to put in let's see here yeah box shadow because i have a shadow on it so we're going to put 0 on the x value on the y value we're going to push it down 10 pixels and then a blur radius of 30 pixels and then the color we're going to use rgba and we'll say black which is 0 0 0 and then opacity will be 0.2 for this shadow and then finally we'll make the width 80 percent so let's save that and see what happens now looking a lot closer so now let's work on this unordered list so we'll nest this this element ul for unordered list and this will simply have two properties and that will be list style type none that gets rid of those little circles and then we'll also put margin 0 and padding 0 as well so now the result we got rid of those and then let's go ahead and we'll reference our list item element which comes next margin bottom we're just going to push them away by 10 pixels and then also our span element which is for the circles so we're going to make this position absolute and we're going to put content and we're going to make it empty we're going to put width 30 pixels height 30 pixels background color is going to be color and then we're going to create a new key and it's going to be primary hyphen light by the way this content thing i don't think i had to add that i was using um this different technique before and i was looking off screen i don't think we really need that because we used a span element so this primary light key i let's go ahead back up to our uh our colors up here and we're gonna make another one called primary hyphen light and we're gonna use the lighten function here and this isn't specific to uh to sas it's already in css itself and then we can just pass in this value and we'll lighten it up here by 40 percent and the reason i'm doing this is because i we're using light and instead it's just we could just change these values right here um and the lighting will work no matter what so i'm not dealing with different um hex value colors so let's continue on i with background color so um all right so we have border radius 50 now i'll make it a circle and then margin right will be 10 pixels let's save that all right still not there yet we have to fix it so also we have a strong element right here so that comes nested in the li as well just underneath span and this will be strong and we're going to display display inline hyphen block it's going to push it over margin left will be max we're going to use the max function here 40 pixels and then margin top and by the way the max function is not specific to sas either that's already in css all right so there we go coming along quite well awesome now let's work on the other stuff at the bottom beneath that and inside of main we're going to nest in the next section so just right here we're going to put in section primary and we're going to do color it's going to be white padding is going to be our padding again and then text align we're going to center everything because we're working with mobile right now at the moment all right then after that we're going to have an h1 with the font size of 3m a margin top of 10 pixels and a text transform of uppercase so let's save this and see what's going on getting better getting real close to being finished with the mobile version all right and then next we have our paragraph element and the paragraph we're just going to make this slightly larger 1.4 em and then also our call to action button text um and so this one has a lot of properties just to transform you know this ugly thing in over to this much more pretty looking thing so let's go ahead and add those it's going to be color is going to be color and primary hyphen dark key so we haven't created that let's go create that real quick i'll just copy this line so shift alt and the down arrow key change this to dark and then this is going to be darken and by 40 same thing all right so primary dark so now it's going to look almost the same as it did before by the way so i let's go on and i will continue by adding after color we'll have our border radius borders ready to find that text decoration is going to be none text transform will be uppercase if i can type and then font weight is going to be bold background color will be our color accent we already defined that it's that light yellow display block text align will be center to center it up the margin will be 50 pixels from the top auto and zero from the bottom and auto on the left and right to center it up and then padding will be padding and then we're going to include oh sorry i'm going ahead of myself that was for the responsive part and that's it all right so now there we go so we're real close basically um to the this this version right here i may have probably need a little bit more padding in order to make it more like this but still very very very close i'm pretty satisfied with the outcome right here so i can just move this over and very similar oh text transform uppercase was um we need to apply that on the uh the logo where did that go let's see here where is it we have our logo which is header a so let's find header a text uh i use text decoration text transform there we go now it will be uppercase that's much better sorry about that all right so this is pretty good um for the most part yeah awesome stuff so now uh how would we make this responsive uh because for instance if we get out of this device toolbar and we start going like this on a desktop that just looks stupid right so um with the help of sas we can make the process of responsive design with media queries a little bit better than it is when you're just dealing with straight up css all right so the next topic that we're going to talk about here that's specific to sas are mixins all right so mixums are very handy especially if you're going to use them and there's a lot of different use cases for them i'll just show you one use case and that will be when we're dealing with media queries all right so um basically uh having a media query um and just typing it straight out like normal um can be very verbose or you know very wordy um when you're doing it in each of these um areas and in these rule sets so we can create a mix in that will make and simplify the coding as it appears in here so what we'll do is first we're going to define a variable and that will define a pixel-based value for a breakpoint and so what i'm talking about is you know if you're not really familiar with responsive design and you're new um what i'm talking about if you have ctrl shift i here in chrome open or or firefox um we'll see if we we expand this the left side we can see this pixel value 644 and it changes and it shows up when we're adjusting it's letting us know how you know what the width and the height is of the current viewport um and we have to determine as designers at which point should this design change in some way all right so um and for our case we have to ask ourselves at which point should it go from this to this you know at which point do we have enough room to have two columns instead of just stacking everything like on the mobile view all right so i at a certain point this may start to look a little bit strange so we have to determine you know what or when would that point be so this is more like of a tablet size right here i would say right around 840 is probably a good area to change this into a two column layout so let's go ahead and define that variable right here this is just a simple variable we'll call it desktop and we'll say 840 pixels just like that now we're going to define a mix-in for a media query so mix-in so just like function you want to create a function you put at function for mixing its app mix in and then the name desktop all right so then we put in the normal property value for a a mix-in or not sorry for a media query so we're going to put media and we're going to put min with so the minimum width is going to be this variable so the way we put a variable in a mix in is we're going to put in this uh the hash sign with the screw squiggly braces along with the name here desktop all right so then we open it up and we put in at content and the content is going to be based on whatever we specify when we use the the mixing so you'll see how this works in a second so that's all our mixin is and you could create multiple mix-ins here for multiple viewports and sizes we're just going to use desktop just one of them essentially so now let's work with our very first media query using this mix-in and we're going to focus on the bg element so nested in bg is going to be this mix-in and we're going to do it by putting include at include desktop so that's the name of our mix-ins that's how we use mix-ins in rule sets and then we just put in the regular properties for our media query you know what what we how exactly do we want to change the bg element for i when the viewport or you know the width of the device or the browser is a minimum width of 840 pixels what what are we gonna change all right so looking at our our adobe xd document we'll see that this actually does change the shape of this clip path changes from a um not a hexagon what am i talking about but a five five pointed side here here uh to here which is just you know four points so we have to go back to our little clippy thing over here and what the heck was that yeah a pentagon i'm very slow i didn't pay attention to geometry but anyhow we're going to go from that to just a a trapezoid for instance and so now let's change this uh more to a desktop orientation like a um a canvas mode so we'll put like 500 here so now i think it was something like this if we look back at our adobe document yeah maybe more like this yeah something like that that's close enough copy clip path right here we'll go back and we're simply going to change we're just going to put that in right here that's it let's give it a go i hope it works so now there it goes uh why is it going up to 890 or 924 i put it 840 840. we'll we'll keep going here um oh it's because i probably have that yeah there we go i was zoomed up by accident so now right at 840 it changes but we're not done there we have other things that we need to do so for instance i we're going to have we're going to use this again so let's copy this we're not going to use this property but just this this mix in here so we're going to use it in several areas wherever it makes sense to do this so for our main element our main element we didn't need to on desktop or on mobile to use any type of a grid for alignment because they're just stacked on top of each other naturally but in here this main main element houses these two sections or these two columns so on desktop they're going to float left and right of each other and we can use the css grid for that for for you know creating that you know if you're unfamiliar with what the css grid is by the way i have a bunch of videos on my channel about the css grid and how you can use it to position and structure your layouts it's it's the best latest thing all right so uh what we'll do is we didn't put any properties here for our main element but we're going to have a property for it or multiple properties just for desktop only so again we put at include desktop and we nest it in there and we're going to say display grid and then the grid template columns and this is all css grid stuff fifty percent auto and that'll make it basically both fifty percent and then grid template areas we're gonna say we're gonna give them a name so the first column name is gonna be primary and the second column name will be card all right and then for section card we're going to put at include our desktop mix in again and we're going to say the grid area name for this one is the card and then we're going to put height is fit hyphen content and align self center with a margin of 1 em and then also we'll have another mix in for our second uh section right here so add include desktop let's get rid of that this grid area this is going to be defined as the the primary greater area name which we defined up here in the main section right here primary and card and then where are we at yep and then we're going to put text align left because it's centered currently on mobile and that's the headline the sub headline we're going to put margin 4em at the top zero on the bottom on the right and bottom right here and then 4am on the left and that's going to just push it down and away from the side of the browser let's save this by the way so far to see what's happening so now we can see we're going from this to that and while we're pretty much already there almost uh there's a couple other things like i'm going to change the h1 value a little bit here so we'll have another mix in i'm just going to copy that paste it here and so for h1 value i want to change the width here to 30 percent to shrink a little bit so each line is each word is on its own line we're going to put font size here of 4 em make it a little bit larger and line height will be 0.9 am to bring them a little bit closer together like that yeah all right and then also we'll have one more in our uh our call to action button text here at include desktop and this one we're going to say display inline block and then the padding and an inline block applied to this will make it so that doesn't span 100 of the parent container and then in the padding we're going to have another specific thing to to sass which is we're going to put padding and then padding times 4. and so what this will do is on the top and bottom we'll have a regular padding on the right and left it's going to take that padding and multiply it because you can do math and sass by by 4 so i think it's 15 times 4 and now we have this button down here which has been changed awesome awesome stuff so definitely uh that was definitely a crash course i have to say hopefully that you guys gained a lot from that but that that's basically it for the crash course um and we covered really a lot of stuff that's pertinent and in in most of this stuff when it comes to functions mix-ins um nesting and variables that's pretty much the most of what you will use from sas now of course there's a lot of other more intermediate to advanced topics but for a crash course hopefully that will really be enough to get your feet wet and started using sass all right guys hopefully you learned a lot throughout that let me know what you think in the comments also answer today's question which is what other learning resources outside of this channel do you learn from also be sure to check out this video's sponsor skillshare.com let's go [Music] [Music] you

Channel: DesignCourse

Views: 412,222

Keywords: learn sass, learn sass css, learn scss, sass tutorial, scss tutorial, sass tutorial 2018, scss tutorial 2018, how to install sass, visual studio code sass, visual studio code scss, vsc, visual studio code, free sass tutorials, sass tutorial youtube, web design tutorial, responsive web design, responsive web design tutorial, how to install sass 2018, scss tutorial for beginners, how to install sass css, free sass course

Id: roywYSEPSvc

Length: 46min 26sec (2786 seconds)

Published: Wed Aug 01 2018

Reddit Comments

[u/bitdweller]

When did it stop being relevant? Who said that??

[u/samwsmith]

Is there anything new that might replace it??

[u/faithmauk]

I just learned how to use sass(using the scout app) and writing in scss, and I don't think I'd go back to just plain CSS. I love being able to use variables and mixins, it makes things super easy to edit, I don't have to go through all my elements and change the color I can just change one variable. I also find it a lot easier to understand nesting with scss, idk why it's just been hard for me to grasp css nesting but that might just be me being dumb lol