Sass
What is Sass and how to setup Sass.
May 05, 2020
1 min

Setting Sass up

Setting Sass up is really simple.

Do either, npm i node-sass --save or yarn add node-sass and you’re ready to use Sass.

What is Sass

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that helps us to write css in a much more powerful yet a convenient way. It allows us to use variables, mixins, loops, functions, imports, mathematical operations etc.

Two syntaxes of Sass

SCSS (.scss files) is the main syntax for sass which uses semicolons and brackets like css. In the other hand, SASS(.sass) uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties.

SASS Example

$primary-color: green
$primary-bg: red
  
body 
  color: $primary-color
  background: $primary-bg

SCSS Example

$primary-color: green
$primary-bg: red

body{
  color: $primary-color;
  background: $primary-bg;
}

Once you set up Sass, you can use either or both of these syntaxes in your ReactJs project.


Tags

setting up SASSnode-sassreactsass

Related Posts

Sass
Creating a pure-CSS progressbar in React.
July 05, 2020
1 min
React JS
How to add TinyMCE as Rich Text Editor in your React project
May 15, 2021
1 min