Shubham Vandara's blog

Supercharge Your Styles: Adding SCSS to Your HTML Project

Streamline Your Workflow with Live Sass Compiler in Visual Studio Code

Shubham Vandara's photo
Shubham Vandara
·

2 min read

Supercharge Your Styles: Adding SCSS to Your HTML Project

Table of contents

As you should know SCSS (Sass - Syntactically Awesome Style Sheets) is a CSS preprocessor that allows writing more maintainable and reusable styles. If you use a code editor such as Visual Studio Code (VS Code), simply make the switch from SCSS to CSS with only one extra hack if the LIVE SASS COMPILER extension is running. In this blog, I am going to show you the steps to set up your project and use SCSS in your HTML file with the help of the LIVE SAAS Compiler in VS Code.

Step1: Set Up Your Project

Create a project directory: Organize your files in a directory structure.

my-project/
├── index.html
├── scss/
│   └── styles.scss
└── css/
    └── styles.css

Step 2: Write SCSS Code

Create an SCSS file: In the scss directory, create a file named styles.scss and write your SCSS code.

// scss/styles.scss
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: white;
}

Step 3: Install Live Sass Compiler Extension in VS Code

  1. Open Visual Studio Code.

  2. Go to the Extensions view by clicking on the extensions icon in the activity bar on the side of the window or by pressing Ctrl+Shift+X.

  3. Search for "Live Sass Compiler".

  4. Install the Live Sass Compiler extension by Glenn Marks.

Step 4: Compile SCSS to CSS

  1. Open thestyles.scss file in the editor.

  2. Click the "Watch Sass" button at the bottom of the VS Code window. This will start watching your SCSS files for changes and automatically compile them to CSS.

  3. Check the output: You should see the compiled styles.css file in the css directory.

Include the generated CSS file in your HTML:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SCSS Example</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Conclusion:

Applying SCSS to your web projects can dramatically improve how you work on CSS and help make your styles more maintainable and reusable Easy-to-use compilation of SCSS to CSS and linking in HTML files using the VS Code extension Live Sass Compiler. In other words, your SCSS files will be automatically converted into CSS whenever you save changes so you can work efficiently.

HTML5CSS3scss