Learn Sass In 20 Minutes | Sass Crash Course

hello there my gorgeous people on the Internet how you doing today in this video we're gonna cover SAS now what is SAS SAS basically allows us to do a lot of cool things that we normally would not be able to do in CSS things like nesting imports and a lot of things that I'm gonna cover in this video so I think this is actually a super necessary tool to learn because once you learn SAS I feel like you're gonna have a very hard time just writing normal CSS so without further ado get your BS code ready let's get going alrighty so let's get started hope you're excited I just created an empty index.html page here let me remove this really quickly I'm not empty I just added some basics just random text I created a header with h1 a button a div with a class of contact just random submit button and a class of info doesn't really matter it's just a way just so I have some text so I can explain sass for you ok the first thing we need is the actual extension so if you go to the extension store here and let's expand this all you have to do is search for a little SAS compiler and you can click on this and you can install it mine is already installed it's probably gonna ask you to restart your vs code just hit restart and after that you're gonna see this watch says button down here ok so again what this is gonna do is just basically gonna take our SAS and it's gonna transform it into CSS because the browser cannot read SAS it only can read CSS so this is just basically transforming one thing to another okay so let's create a folder here called styles ok and rather them writing a style that CSS we're gonna create a new file called style dot s CSS so s C s s hit and on this big boy and in here we can just write normal CSS if we want so we can get the header for example we can add a background of I blew and that's gonna work the same way but how can we make the CSS out of this well we can click the watch size button and we can close this out of the panel and as you can see it just generates for us a style dot CSS wah-pah how cool okay we can link this I think I linked it before but let's link the normal CSS because that's the thing that actually is gonna work for us style at CSS link it in here okay let's open up the live server and as you can see it works perfect so now we can just write sass in here now one cool thing that this extension already does is let's see if we a display flex justify Content Center hit save ctrl s as you can see it says success it compiles it again for us look at that it actually adds all the vendor prefixes for the different browsers that don't necessarily support flexbox and that applies to all the other CSS properties that might not work cross browser so it does everything for you so you don't have to worry so that's really cool I think okay but that doesn't really have to do anything with set and just life SAS compiler is a gentleman enough to also drive you home after the date okay so what can we do with this fast thing well first thing we can create variables so if you know a bit of JavaScript then this is super easy if you don't don't worry I'll explain let's just create one and we're gonna see what it does so to create a variable all we have to do is set the dollar sign and we can give it a name so let's say that I want to have a button or buttons on a website and I want those buttons to have a specific color like always so I can create one let's say primary called primary button okay that's gonna be the name of it we can add colons like we normally do in CSS and we can just save color that we want so red well let's change it to something more appealing bluish maybe okay something like that hit save okay now this does nothing for now however when we well let me show you normally how we would do things so in this header I have a button and in this contact I have it's normal you would do Heather button and you would addy that's at a background of red and then we would go to the contact button and we would have a background of red okay so we want to have a consistent color here and look at that it works everything is fine but what if I decide that I don't like this color because yeah we change our minds so many times well then I would have to go here and then just change this one to something greenish for example then I would have to copy this across all the different buttons I have on the website right you're gonna drive yourself crazy because you just want to change the color a bit and well you have to change all the buttons that you have well that's the problem however with variables this kind of fixes everything so rather than adding a a color in here we can just add the variable so let me copy this and paste it in here and in here so rather than adding a color in here we just add the variable and what that does is as you can see now we have this greenish color from up here but now if I just change this to like something like a purplish or pinkish it's gonna change all instances where I have this primary button so now it's super easy to change everything on the website so we can have multiple here we can have a maybe a text color okay we can have a black or something or we can just change it to a bit grayish but right now we can just go to each section where I would have like text rather than add in black here we can just add this new variable so text color and then we can easily just maneuver with this and change everything on our website so that's variables it's really helpful it's probably one of the most powerful things and SAS that we can do okay another thing that we can do is we can nest different things so what I mean by rather than writing header here and they're writing header the button what we can do is in here in the header where we would write a normal property we can just add the button in here okay I wouldn't just opening up its abnormally like that let me just copy this background from here paste it in here I can delete this when we hit save as you can see nothing really changes because what SAS basically does it reads this button in here like this as their button and actually I can show you in the CSS that gets generated as you can see it just generates header button so everything that we have in this header ap so we can add a paragraph as well or maybe have a class in here like main text or something all of these basically just mean Heather B and header main text okay so this is a really cool way that you can organize all your codes so right now I know that everything in this header is basically in here I'm not gonna find header all across my file okay so it's a really good way of condensing everything into one now what if I want to add let's say a hover or a focus or something like that because I know a lot of people want to do that well any button if I want to add a hover I can just do the + symbol like so I can just add a cola and I can write hover background let's say you read it save let's see if that works look at that no problem and I can also add things like after and before so for that I'm gonna need two colons here and just say after and let's just change I have content and I'm gonna say hello hit save and look at that it just adds it normally so remember if you want to add focus hover things like that just add the end symbol and just handy : and that's it good awesome let's move on another really good probably my favorite thing you can do in SAS is you can separate your codes into multiple parts and what I mean by that is rather than having all your CSS or SAS in here we can take everything out of here and put it into another file and let me just show you that's gonna work perfectly fine so let's see this file is super huge and I just kind of want to have the header out of here so in the Styles folder I'm gonna create a new file I'm gonna call this header actually what we need to do almost forgot is add a underscore and then you give it the name you want and then it's a header dot add CSS Thanks so seeing underscore underlined is underlined underscore I'm so sorry header that as CSS okay and in here I can just paste this code in here hit save and now I can work on this separately but this is not gonna work yet if we take a look it's not working so what we need to do is we need to import this one in our main file in our Styles that CSS CSS so in here I can just add an import so an @ symbol and an import and I can just add quotes a dot slash and we can just add the header dot CSS hit save and actually I don't think we need the hazard s CSS let me delete this hit save and as you can see it works yeah we don't need the extension it's gonna recognize it automatically then close this up and let's say I want to also have the variable separate so just cut this and let's add a new file I'm gonna add an underscore variables variables Ferriero variables that SCSS face this sucker in here close this up and just import it above import variables here we go so look at that now I know that everything related to variables it's gonna be in this file so everything is gonna be way easier to read and it just helps you organize your code so there you go everything still works fine everything is perfect nice moving on let's add let's go into our header and just add a height of 100 VH to this okay let's make it fullscreen that's kind of looks awful but hey it is what it is okay so we added a display flex to this a justify content center let's also add an a line items Center you're gonna find yourself doing this a lot of times adding display flex justify content the line item Center well then it'd be nice to kind of separate all of this into a small like function like we do in JavaScript well fear no more because we can so let's go above the header here and I'm gonna talk about mix-ins so what is a mixin it's exactly like a function in JavaScript basically allows us to take some code and kind of put it in there and then we can use it across multiple and basically anywhere we want so to create a mixin how we have to do is add an add symbol I'm gonna write mixin and it's gonna ask me for a name now I'm gonna do the Flex here so I want to Center everything so I can name this flex Center again you give name this whatever you want okay flex Enter and here I can just add the aligned items justify content and display flex copy it paste it in here hit save now as you can see if I go back here this is back to normal but I can now use this in here so how do we do that well we can go in here and we can just do let's go let's go all the way up here we can do @include and we can just get the name of the mixin Flex Center and we need to add the parameters in here hit save go back as you can see everything is centered how cool is that let's also add a height let's say I want to add a height 100 V Asian here okay it's safe take a look everything is still the same and now look I can just go to my let's let's go to this contact page again I can just add include and I can give this name as well like Center hit save and now look everything in here got the same thing got display flex justify Content Center and the height cool now what if I want to maybe change this what if I want this to go in the row maybe I want to make this go in a column or maybe I want to even change the background colors well what we can do is we can add parentheses and here and we can add custom parameters that we can change in here so let me quickly show you what I mean so maybe I wanted the direction to be different from this and this so we can just add a variable now remember how we created variables we can just add the dollar sign I'm gonna name this direction okay and in here I can just add a flex direction and rather than write in column because that's gonna make everywhere column okay everywhere where we include this flex Center we can just add this direction that we created up here so let me copy and paste it and this okay and now what we can do is in here is we can actually define this direction okay so the way this works is we write something in here column this is gonna go in here and it's gonna pass down here so basically this is gonna mean column but the cool thing is I can use column in here if I want I can use row in here hit save and it's gonna work just like that let's go back here as you can see this one is in the column now this one is in the row so let me give you another example maybe we want to change the background so I'm gonna create a dollar sign background maybe I want to change the background color I can just do background and I'm gonna add this variable again so let's do background okay and in here I can add a comma and just define the background color red in here I can do blue it's safe let's go back and as you can see and go and blind now this one applies this light blue because I think we have a defined down here so let me remove this and yeah look at this gorgeous these gorgeous colors all right so these are make sense quite cool really helpful if you want to just create small little functions that again just like this display flexus is gonna do wonders because you can just write one line code everywhere and you're gonna be fine but you can again customize it with different kind of properties in here okay I just add the different properties add it in here and then you define them down here okay that's makes sense let's look at extensions let's get rid of this for now okay just to keep everything more simple and this is quite similar to the other one we had so let's go back to the header and yeah I can have the heights maybe the text color let's also add the background of light blue back okay so maybe I have a lot of different styles on this header and maybe I want to inherit it to this contact so maybe I kind of want all of these tiles so rather than copying everything from here all the styles and paste them in here we can just extend by writing add extend and the name of the thing that we want to extend in this case header and what that's gonna do is if we scroll down it's just gonna inherit all the styles from the header and now if we want to override those styles we can just go down here and just define our own styles maybe I just want to change the background color and as you can see here everything still remains the same but we change the background color because remember style sheets work from up to down so everything you have up everything yet below is gonna override it so if I change the background color down here again if I change this well this is gonna take place because everything up here is gonna be overridden okay there we go so that's basically extending and inheriting different properties good last thing we can do really quickly is we can also do calculations by minus plus divided and the star not the star it's the multiply okay so maybe you can also do width let's see 100% minus 20% well this is something super obvious but this is gonna work just fine as you can see so if you on the experiment with different calculation operators that works just fine and SAS so there you go that's kind of the whole thing it's quite simple it's about just kind of remembering the syntax a bit but there's no doing really complicated so we learned we can do nesting we can separate our files with partials we can use variables mix-ins which is really good of writing small little functions and also inheritance so hopefully you enjoy this one I really want you to try it out if you haven't tried it and maybe you tried it but you haven't tried a life science compiler which is it's just amazing alright everybody thank you so much for sticking around here and watching and I hope you're having a wonderful wonderful day see you next time [Music]

Channel: Dev Ed

Views: 629,461

Rating: 4.9722009 out of 5

Keywords: learn sass, learn sass css, learn scss, sass tutorial, scss tutorial, sass tutorial 2018, how to install sass, visual studio code sass, visual studio code scss, visual studio code, free sass tutorials, scss tutorial for beginners, how to install sass css, free sass course, Learn Sass In 20 Minutes, sass in 20 minutes, sass course, sass compiler

Id: Zz6eOVaaelI

Length: 19min 42sec (1182 seconds)

Published: Wed Mar 13 2019