Visual Studio Code Live Sass Compiler Easy Set Up

hello my name is musa and in this tutorial we'll be setting a live sas compiler a vs code extension that helps you to compile your sas into plain css instantly we'll be getting the best out of this extension by using these great configuration settings they're about to share with you okay let's get started so if you don't already have the extension installed just type in live sass compiler here should be the first one there you go install it if you haven't i'll also recommend having live server installed for a better workflow that's just optional both work nicely together once you have both of them installed second one being optional most importantly live sas compiler and you can either go here we go to settings extension settings or you can go from here settings extension why it's ask compiler then we won um and by the way i'm in a course file called live sas compiler shoot so i'm already in a folder for this um so we're going to first one we're going to sort out is a is format so um by default this is it ignore the window not window zoom level five that's just when i'm zooming in and out um so we're gonna keep it to expanded then we're gonna keep the fire extension name is see css then we're just going to change this to yes so this is a folder that's going to go to now we're going to go back here we're going to go to auto prefix let's just do nope we don't want that we want so this is auto prefix and so it works in all the browsers you know compile it automatically on most of the browsers um last two versions so we'll auto prefix all for you um let's go back here then we'll go to your former um how to prefer then generate mark if you don't want to generate map that'll be false now so that's sorted for that now now we just need to let's just do basic excel to test this out let's just do index.html let's just this is the image involved in this um let's link it so link css because we're going to call it this is a puff so we're going to go and we're going to call it main then in here it's a bit of um content header and just a h1 with hello that's it for the html now we're going to make a folder over there i'm going to use scss you can use extension um so the main we're going to use a main one so if you know sas this is so if you have the main you know the files up feed to the main um but i'll show you now how to add them more effectively with the partials so now we've got the main um [Music] then we have for the header we're going to use a underscore header and css we use underscore to create a partial for the sas files which we then import to the main file so they are separated into parts and linked to the main scss file using the underscore but the good reason why we're using in life in the vs code is well the particular benefit is when it comes to this extension it saves in real time when you're saving partial files um yeah so there's a header and we're just going to add vet for the variables and again underscore css so we've got that now um so for the main we're going to have just to sort of test out the other prefixes box sizing border box and then the body the variables we're going to test our family um ariel i'm gonna do background tomato queen's english is tomato um so let's just add to the header of um content and we're just gonna add h1 as you're doing sus style 10 rpm so that should nesting should work now and then for this we're going to add the variables oh a variable so tomato it's going to be seven that's it yeah so now typically you just add the variables here underscore like that don't forget the semicolon hey i tend to have the variable on top um and should blow up i i tend to put below anything in the body then support the other file so it just structured much better never forget the underscore because partial and that so now we need to tell we need to you look here we've created a css file domain in it with no map now if we just open this with live server there we have it and that's working fine um i'm just going to change up the extension so we can sort of see it in a different light i'm going to i compressed you can change this whatever you want like um when i'm in here i'm gonna add this here then there's a preface let's just keep this true here okay we need to turn this off now then restart it if you look here we have a destination with the uh oh no then press yeah stop huh uh let's get rid of this i'll show you again nope get rid of you and then yeah don't forget the dot here watch us again destination window css and now it's compressed with the auto prefix and i'll show you how to prefix here so if windows prefixed um as well as here then we have a map as well if you need that okay um yeah like i said um i'll add the github of this document the actual official documentation of this um and yeah so i'll be using this cell for upcoming tutorials i'll be doing so stay tuned for them thank you

Channel: Musaa Muhsen

Views: 7,214

Rating: 4.5675673 out of 5

Keywords: live sass compiler, sass, css, live server, compiler

Id: cpbN0YAW44g

Length: 9min 51sec (591 seconds)

Published: Fri Jan 22 2021