Installing and setting up SCSS allows you to write cleaner and more maintainable styles using features like variables, nesting, and mixins. First, install Sass using npm with npm install -g sass or add it to your project locally. Then, create .scss files and compile them into regular CSS using a command like sass input.scss output.css. You can also use build tools like Webpack, Vite, or Gulp to automate the compilation process. Once set up, SCSS helps you organize and scale your styling workflow efficiently.
Initialize Your Project
Start by creating a project folder and initializing Node.js. This helps you manage dependencies like Sass easily.
Example:
mkdir my-scss-project
cd my-scss-project
npm init -y
Install Sass (SCSS Compiler)
Install Sass using npm. This allows you to compile .scss files into standard CSS.
Example:
npm install -D sass
Create SCSS File Structure
Organize your project by creating a scss folder and adding your main SCSS file.
Example:
mkdir scss
touch scss/style.scss
$primary-color: #3490dc;
body {
background-color: $primary-color;
}
Compile SCSS to CSS
Use the Sass CLI to compile your SCSS file into a CSS file that browsers can understand.
Example:
npx sass scss/style.scss css/style.css –watch
Link CSS to HTML
Finally, link the compiled CSS file to your HTML so styles are applied in the browser.
Example:
<link rel=”stylesheet” href=”css/style.css”>
<h1>Hello SCSS</h1>
