×


Sass Part 6 – Sass with Node.js based applications, Sass output styles

This part of the Sass series aims at helping to set up Sass in Node.js projects. Sass
preprocessor used with Node.js is the one written in c++ called libSass. node-sass is the library which binds
Node.js applications to LibSass preprocessor.

Part 1      – Introductionvariables, and nesting in Sass.

Part 2     – @-rules and Directives.

Part 3     – Operators and control directives in Sass

Part 4     – Built-in modules and functions. Writing custom functions with @function and @return

Part 5     – Understanding mixins, creating mixins in Sass using @mixin

 

WHAT YOU WILL LEARN

  • Setting up Sass in Node.js applications.
  • The four output styles of Sass.

 

Sass with Node.js applications and Sass output styles

Create a project with npm init. Install node-sass using the command

Now create an SCSS file, test.scss with the following syntax.

Now, there are four output styles in Sass.

compressed

nested

compact

expanded

Output styles determine the style of generated CSS. –output-style provides the option for providing output style.      Now run the command

This command will generate a CSS file test.css, with a compressed style.

 

–output-style nested will generate a CSS file test.css with style like the one above.

 

–output-style compact will generate a file test.css with style like the one above.

 

–output-style expanded will generate a file test.css with style like the one above.

TRY IT OUT

 

 

WHAT YOU HAVE LEARNED

  • Setting up Sass in Node.js applications with node-sass.
  • The four output styles of Sass –  compact, nested, compressed and expanded.

This is the end of our Sass series. All the best with Sass.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *