React and Sass Tutorial - Intro to SASS

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be teaching you guys the beginning the basics of sas which is a css framework it is very very well known and the reason for that is because i don't see a lot of react plus sas tutorials um not that there is any like a lot of differences between using sas normally without any javascript framework or using sas with like react however i just thought that using this combination and trying to build like a very simple website while at the same time i'm going over the basics of sas how to configure how to set up would be a good video idea now before we get into the video if you guys could leave a like and subscribe i would massively appreciate it because it will help push my video to more people uh my channel is growing a lot and it is all due to the support of you guys so if you guys could just leave a like help the algorithm promote my videos um i would massively appreciate that so let's get into the tutorial so as you can see over here i have a very simple react website if i open up here google chrome you can see it has literally nothing inside of it just hey guys over here and you can see that my folder structure right now it's very simple i just deleted some um files that already come with react it's not really important i just ran create reg tab and um this is the project that i have right you can see that i can make any changes over here say something like subscribe and you'll see that it should be working in our application now if you want to run sas into your project it takes a little bit of understanding especially when you're trying to configure it however just to make our process run a lot smoother um i would recommend installing two different extensions in vs code i'm gonna open it up over here the one of them is called sas literally sas i guess it's it was invented by sas the company like the the developers who created this framework um it will just help you with auto complete formatting and highlighting um it it definitely helps out i i would 100 recommend it and the next one that i would recommend is um yeah over here life says compiler this is essential because the way that sas works is if you go to any browser and you try to read the the inner html the the css from the browser won't have sas code written inside of it similar to how uh if you build a react website and you go to the html um it will be completely different from what you actually wrote because uh the browser can't read jsx so the browser can't read as css which is actually the extension for sas files what happens is whenever you want to read those files it compiles and creates a css file that corresponds to the sas file that you created it seems to be complicated in the beginning but it really isn't it's just that sas is very useful for developing um it won't make your code run faster or anything like that it is just very very useful when you're developing so it does need that that little push so that you need to compile the css file and the actual css that it's going to be reading won't be assessed because um the browser can't read says so what we have is this extension over here called live sas compiler which will automatically when you save a sas file um and it will automatically save the changes from the that you wrote in that sas file into a different css file and in case you want to implement those styles it will actually be reading from the css file and not from the sas file i'll go over all of this especially when we start writing the code however um this is a very important extension to download okay now that we have that done let's start implementing okay so let's start implementing the various like first um changes to our website and what we want to build first is a simple navbar right so i'll just create over here a component i'll create a components folder a new folder let's call it components and let's create a component called navbar so network.js and i'll use the react snippets to create it by just writing rfce so you can see we generated this component over here and what we want to do is we want to come to this this div over here and let's give it a class name of um something like navbar and right here let's just add some links right i'll just create some links over here um let's say home page i'll just create a bunch of them so i'll just copy this paste it over here let's create a home page uh i don't know about page uh then let's say profile page and then let's create a contact page uh we're not actually gonna create those pages this is just gonna be an example project but you can see that now in our screen if i refresh it i actually didn't import this into our application so i'll come here to our app.js and over here at the top i'll just import the navbar like this and it will automatically import the nav bar into our application so what you can see over here is we have our links perfectly done they don't look like links yet because we didn't add any path so we're going to add a path by saying href and just putting something like slash home just like the routes to the app so i'll put slash home i'll put something like uh slash about slash profile and slash contact so let me just do this um about and then contact or profile and then contact okay so we just build a very very simple um ui for our application for our navbar however how do we translate this and how do we make this look better by using says so the first thing i want to do is i want to create a styles folder over here um let's just come over here and say something like styles and this folder will hold the css and the sas for our application and as i was talking before whenever we create we want to create a like a styling file a css file or a sas file we have to come over here give it a name so let's call it navbar and then put as css at the end so when i save this you can see we created our sas file and the reason why i have automatic support is because i'm using material theme the the the folder icons uh extension that exists in in vs code but it doesn't really matter at the end of the day and what you can do here in this sas file is you can basically write normal css because there isn't a lot of differences initially between sas and css and that's kind of good because uh it is very easy to translate your css knowledge to your sas knowledge so what i'm gonna do over here is i'm gonna create i'm gonna call for the navbar component like this and let's start making some changes the first change is i want to make a div equal to 100 and i want to make the height equal to um something like i don't know 80 pixels and then i'm going to put the background color to be something like uh gray but i'll change this later and you guys will see why so this over here um should will work however there's a difference we need to come here to our network file and import this file over here now when we save this you can see that um it automatically created two different files for you the navbar.css and the network.css.map the reason for that is because we're using the extension the live assass extension which is running down here as you can see um and it's great because uh it will automatically generate the files and you can see that it is exactly like what we wrote however when we start implementing the stuff that only exists in sas it will automatically convert and compile a css file with those changes for us which is amazing so now if we want to see those changes in our application because we currently aren't seeing those changes we have to come to our component and instead of importing the says um css the the sas file we just import the um i'll go back twice we need to import the css file because you can't read sas files in your browser so i'll just say leftboard.css and you'll see that now we should start seeing the changes right however we still haven't done anything related to sas which it's kind of annoying so let's start doing it uh what i want to do is i want to grab a caller in our application let me just look i want to make um i want to make our website have only four colors so it's kind of like a palette right it will have a black color it will have a white color it will have um let's say red or yellow something like that we'll create our palette and we're going to define those colors so that we don't need to write the rgb value for them every single time we want to use them and there's a great thing with says is that you can actually define um variables instead of similar to any programming languages you can define a variable over here called black color and then set it equal to this rgb value and now instead of using the rgb value every time you want to render this color you can just render the black color and you'll see that when i save this and it compiles um if you come over here it actually hasn't finished compiling we need to finish we need to wait for this to be to be done but uh when it finishes compiling the changes you'll see that now we have this color for the background color instead of um what we wrote over here because this isn't says so i'll close this over here and you'll see that now we have this color in our screen and this is really nice it's one of the main benefits of sass now one thing we can do to even improve our design structure and our folder structure is actually create a separate file just for our variables so to do that i'm going to create a folder over here called variables um and inside of here i'm going to create this file which is going to be called variables dot says like this and inside of here i'm just going to declare all of the different variables that we're going to be using in our app and the reason for that is because the whole point of declaring a variable is to be like being able to reuse that variable right so if i want to use the black core caller in many different sas files i can just define it here in this variables file and now instead of directly creating defining this variable over here i can just import um from the path to this file so the path will be the variables folder slash variables.s actually put an extra slash um and when i save this uh it should actually be um correctly like recognizing this black color which is amazing let's see if it still works and as you can see it still works it still shows the black color in our screen so now let's start um just styling this a bit i'm going to create one more variable to our application which is going to be the white color um and it's going to be something like it's going to be a bit white obviously um then i'm gonna use the white as a as an example but it's gonna be a little bit more gray so i'm gonna push this over here so this will be the the css value over here um or the the rgb value over here and we can just use this white color variable inside of this thing over here and now let's just come over here at the bottom and access the a tag inside of this navbar and just give it a color of white like this um white color and then let's also like style it a bit let's increase its font size to something like um i don't know 20 pixels 25 pixels um and then let's also do something like let me think probably uh remove the text decoration um go to none so that it doesn't look like a a link and i think that's probably it uh let's let's just look at what the changes are as you can see over here um our links are changed right they're white um so the next few things i want to do is i want to basically just uh declare a font for our application so i'm going to say font family is going to be arial i like to use this font over here and i probably want to use this like most mostly through my application but i really want to use this specifically for titles so what i want to do is i will just grab this over here and i'll define two new variables one of them is gonna be the uh like the title font and it's gonna be this uh but the other one will be the like text font or whatever uh i'll call it body font which is just going to be some times new roman so as you can see over here these are the two fonts we're going to have and i like also dividing our size our um my sas file uh especially the value like this with fonts and then with colors so um what we want to do now is we want to come here to our navbar.says and we will just say something like um title font like this and the changes should be made so um now i'm going to add some other stuff for example i want to make this a display flex and maybe justify stuff justify content but to the center like this and align items to the center as well let's see the changes you can see they're now perfectly matched in the center and the font also changed maybe i want to put them to the right so i'll just say something like flex end over here and it should be to the right but i want to put some margin between them so i'll say margin over here um of maybe like 10 pixels and you can see that they now are kind of spaced out and i also want to maybe put a like a thing over here a div over here which will encompass all the links so div and let's just make it a class name of links like this and we'll just come over here to network and instead of saying navbar a actually this this can stay like this but we're gonna access the uh navbar.links thing and this one is going to be um push to the right so let's say margin right of 20 pixels and over here you can see that now our links are over here and the reason for this is because we want to push our links a little bit to the right but we only want to push all of them together and not each one individually so i can actually make this even bigger i'll make this 50 and you'll see that we're now being pushed to the right and i think it looks good over here now how do we remove this padding and that is around this this navbar it's actually pretty simple i'll come to the um to any of these files over here i'll make it on the on the network but i'll just access the body and i'll say margin is equal to zero and padding is equal to zero this automatically comes with any react tab which is kind of annoying but you can see that implementing those changes just fixes everything so now we have a beautiful navbar and anywhere in our application we can use the variables that we defined in our sas file okay so now what we want to do is we want to be able to put a simple like background color over here uh maybe this is actually already fine but i want to be able to put like a title of the page um and then some okay so now what we want to do is we want to just build some some sort of part here in the website where it's going to be this main page over here um i don't want to complicate a lot of things but i want to be able to demonstrate all the different um things and that are important with says so for example let's try to put a title over here so i'll come here to our app.js and i'll create another component let's call it um i don't know just the main page dot js and over here is just this is just going to be rendered rendering this part of the page over here so what we want to do is i want to display here i'm going to put a class name of main page like this and for now i'll just put an h1 tag over here um and this h1 tag will have we'll be saying something like welcome to the website now there's one thing that is important to understand i'll just actually import this over here put it below the navbar say min page and it will automatically import and you'll see that now this is in our screen but there's one thing that is important to understand if we want to access and i want to for example edit this um h1 tag over here there's two ways of doing this um you've seen previously by like if i want to edit the a tag inside of the navbar i did this but with sas there's actually something really interesting and i'll show you guys what it is i'll create here um another styles file it's going to be called um main page dot s c s s and over here we're gonna access the main page component and for now we're just gonna give it a display of flex and i'm just i'm just gonna add the justify content center and the align item center as well like this but if i want to edit the the welcome to the website actually i also i have to import this file you see that the mainpage.css has been created so i'll come here to main page and i'm going to import the main page um actual style so i'll come to style slash main page dot css like this um so you'll see that it actually centers in the middle because we added the just the the display flags justify content center and align item center however if i want to edit specifically the h1 tag inside of this website one thing i can do is instead of coming here and saying dot main page and then h1 like this i can actually nest this tag inside of the main page over here i can just come and say something like h1 inside of here and just write the all the styles for the h1 tag inside of this page let's do something like i'll make the caller equal to um let's create a new color i'll say um red color and then let's give it an rgb value actually i'll just say red um but change it a little bit to be something like this and now let me import the um this file over here i'll say import the the actual variables file so let's say variables slash variables.css and we always have to put a semicolon over there and now let's just make this equal to the red color that we created okay so you see that it will work it actually accesses this and it works perfectly right if i didn't do it this way if i actually came over here instead of this page and i added this tag over here outside of the main page i added another h1 tag that said something like hey you'll see that this one won't be red and the reason for it is because it is not nested inside of the div with the class name called main page so i'm just going to delete this because i just wanted to use as an example so now this is actually pretty good because i'll show you guys something imagine if i created a button over here right just created this button i'll say something like click here um imagine that i want to recreate this button and i want to create a specific style for this button and reuse it many times in my application you can see right now it looks pretty ugly but let's add some styles to it i'll come over here and say something like button then just add something like um i don't know let's say uh of 200 pixels height of like uh i don't know 40 pixels let's make the background color be the red color and let's make um maybe give it a porter radius remove the border first and then give it a border radius um just a bunch of styling right of like eight pixels let's see how it looks um the cool thing is that you see we have this button oh i need to also put the color of the text i'll make the color of the text be something like um the white color just so we keep consistency and i'll also increase the font size uh it doesn't need to look uh cool it's just as an example but you can see that um if we come over here we have this button now imagine i want to reuse this this piece of styling many times application what i can do is i can use this very important thing in sas called a mix in which serves as almost like a function uh you can put a name over here to declare it uh to declare the name of this specific um style let's call it button style uh like this and what we can do is we can just condense a large like piece of code inside of here and we can reuse this many times in our application i can come over here in this specific page and just access the button inside of the the main page like this and then say something like uh for the button i want to access i want to display the button stuff and instead of this button i can say i want to include in this styling the button style mixing that we created and now you'll see that if we come over here it still looks the same and you can actually export this to many different um files which is why i would recommend actually keeping this um in your variables or your helpers uh fold over here i would usually create uh like it's not a variable it's almost like a function it's the the distinction between sas variables and and mixins is almost like the distinction between a variable and a function um one is meant to represent uh one single piece of data um either it's a a caller or i don't know a font or whatever you want and this over here a mixin will condense a large piece like a a lot of lines uh into a single function and you'll see that right now i can still access this because we're importing everything from the variables file so you'll see that over here we still see the red button and without having this tile i can even come to the navbar and i can add the same thing to the navbar i'll just say i'll close this over here grab this over here just come to the navbar and i can add a button styling over here and say the same thing right um now one thing that you guys might be wondering if this is your first time actually learning about this is if we can actually add um like parameters or arguments to a mixing function and well the answer to that is yes you can you can actually come over here to this mixin and just add a specific uh argument or different arguments that it takes to so that you can actually customize whatever you want so this is a css framework if you're used to something like style components it does kind of the same thing uh you can come over here and say something like um let's say maybe the caller and then maybe let's say font size like this and over here you'll just pass the color so let's say color and let's also pass the font size over here font size and you'll see that now every time i call this button style uh uh mixin such as over here i can actually pass this piece like this information um specifically to here so i can come over here and say that the first argument is the collar i want to make it a red collar and the second one is font size i want to make it um let's say 35 pixels something like that you'll see that it actually will work it increased the size but for example if i came to here and i created another button that is outside i want to declare that all the buttons outside of the main page should be um let's make this purple like this and make this 205 pixels something huge right you'll see that actually this won't be this way because this is inside of the main page but if we created a button here in our main page component and put it outside of the main page so actually let's just put it here in the navbar or in the app.js you'll see that this will satisfy the conditions it's actually huge you barely can see it but you can see that it actually works um every button outside of the main page will have this styling which is pretty nice you can reuse code very easily without having to just keep writing the same lines of code in css which is pretty annoying and this just helps a lot i definitely think that anyone who've worked who's like worked on a with a css framework before either it be obsessed or working with something like style components in react um you'll definitely know how easy it is and how like you'll probably never go back to writing normal css ever again just because it's so convenient you know what i mean now this is it for this video um i hope you guys gain value from it i hope you guys enjoyed it i just wanted to bring a little bit of sass and react just because i've been enjoying the framework a lot recently um i'm not sure if i'm going to change it from style components on like a future project however sas is it's used in the industry a lot a lot of companies like it so i really like using it as well both sas and style components has their own benefits so for that reason i actually wanted to bring this video because i've made a video in the past just going over style components and i wanted to show an alternative to you guys can decide it on your own if which one you would prefer to use now this was just the basics um i didn't want to make the video pretty very long because it's just an introduction however if you guys want to see more more advanced sas tutorials maybe building a whole website using sas then definitely let me know in the comments down below i'm really open to that um if you enjoyed the video please leave a like and comment down below what you want to see next subscribe because i post um two to three times a week and i would massively appreciate if you guys could support the channel and yeah that's basically it if you guys enjoyed it leave a like and i'll see you guys next time

Channel: PedroTech

Views: 18,328

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, sass, react and sass, react sass, sass tutorial for beginners, sass tutorial, how to use sass css, learn sass

Id: kpcjSaRngg8

Length: 26min 7sec (1567 seconds)

Published: Tue Jun 08 2021