Using SCSS + Mini Assignment

Lecture 314:- Using SCSS + Mini Assignment

To set up SCSS, you will need to follow these steps:

1. Install node-sass package using npm by running the following command:

Copy code

npm install node-sass

1. Create an SCSS file in your project directory. You can name it styles.scss or anything you like.
2. Add your SCSS code to the styles.scss file.
3. Create a public folder in your project directory.
4. Create a css folder inside the public folder.
5. Create an empty style.css file inside the css folder.
6. Open your terminal and run the following command:

bashCopy code

node-sass --watch <path_to_scss_file>/styles.scss <path_to_css_file>/style.css

1. Replace <path_to_scss_file> with the actual path to your SCSS file and <path_to_css_file> with the actual path to your CSS file. For example, if your styles.scss file is located in the root directory of your project and you created the style.css file in public/css directory, then you should run the following command:

arduinoCopy code

node-sass --watch styles.scss public/css/style.css

1. Leave the terminal running. Whenever you make changes to your styles.scss file, node-sass will automatically compile it into a style.css file.
2. Add the following code to your HTML file to link to the compiled CSS file:

bashCopy code

<link rel="stylesheet" href="/css/style.css">

Mini Assignment:

1. Follow the above steps to set up SCSS in your project.
2. Add some SCSS code to the styles.scss file.
3. Make sure that the compiled CSS code is added to your HTML file by linking to it using the link tag.