How to use Sass in HTML file?

Sass stands for Syntactically Awesome Style Sheets. Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variablesnested rulesmixinsfunctions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Steps to use Sass in your HTML project:

  1. Install Sass using npm –
npm install -g sass

2. Compile your Sass to CSS using Sass command:

sass --watch input.scss output.css

In the above terminal command, input.scss is the file from which we are building from. It is outputted to output.css file after compilation. Running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.

--watch flag tells Sass to watch for changes to your input.scss file. It then recompiles if changes are found.

References – https://sass-lang.com/install, https://sass-lang.com/guide

Published by Jayesh Tiwari

I code and energize, loves sharing my journey.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s