How to Use Sass in Next.js | Use SCSS in Next.js for Beginners

hello everyone in this video I'm going to teach you how to use SAS or scss in next.js this is next year as project if you don't know how to install nextgis please feel free to watch my video I will put the link in the description alright let's get started first of all I want you to go to next.js documentation by going to nextjs.org and then go to docs and search for says and click over here says support so this is the document actually natural support SAS or stss okay you have to use this command to install SAS in your project okay I'm going to stop next.js over here Ctrl C and type y let me type npm install that Dash save SAS hit enter after you have installed set you have to include it into your projects copy this one con you have to declare the path for SAS okay go to next.config.js over here over here paste the path over here and this one you just copy this one says option and over here con next config so you put SAS option over here okay this should be good save it and then run npm run Dev again okay it's worked fine there's no error so let's test uh set in our project let's go to like Styles and create new like variable dot module dot SCS okay let's create that variable over here uh color primary it can be blue okay safe and then create class title color we call valuable color primary okay save it and then go to index.js next you have to import variables.machu.scss over here okay import ant variable form styles variable okay dot module dot scss save okay next let me remove this div so if you don't have this div just create this for example div hello we only create this div for testing sets in our project okay hello set okay and next over here we put class name Curry braces and then we call variable call this variable okay copy it and put it over here and then we call title class okay which is this class okay save it and let's go back to our web browser you will see Hello says it's blue okay how about uh nesting so if I put a tag over here and link to davetamine.com [Music] okay and then over here I pushed href equal HTTP as worldwide web to mean.com save and if I go to SAS files over here I put ATAC inside here Curry braces and then I put background color is green so I save so let's take a look over here you will see nesting work fine okay how about mixing Let's test mixings over here Styles create new files underscore mixins dot scls okay let's add mixins over here for mobile and then mediocre media screen so max with 600 pixel okay and over here add content so we can put content inside here okay in variable.maju.scss let's call mobile over here add include mobile okay and then we can determine class title to change background in Mobile screen we can do gray okay you will see L over here because I forgot to import mixins in this file so I have to import mixings over here at import code mixing save it okay let's take a look at our web browser if it's zoom in to be mobile you will see the background color of title div has been changed to gray alright this is all about this video If you like this video don't forget to click like subscribe and comment down below thank you so much for watching

Channel: Devtamin

Views: 15,460

Keywords: CSS, programming, web application, web development, code, frontend, web design, Install Sass, sass, sass/scss, scss/sass, install sass, next.js sass, sass next.js, scss next.js, next.js scss, install sass in next.js, install scss in next.js, use sass in next.js, use scss in next.js, install scss/sass in next.js, next.js scss/sass, SCSS file in next.js, next.js, next js, Next.js, Next JS Sass, Next.js SCSS, Next.js Sass, use SCSS in Next.js, use Sass in Next.js, Sass Next.js

Id: X2QZ40B5E4w

Length: 5min 44sec (344 seconds)

Published: Wed Dec 07 2022