Node-sass is a popular library for Node.js that provides binding for Sass, a CSS preprocessor. It allows developers to write CSS code in a more structured and organized way, with features such as variables, mixins, and nested rules.
When using node-sass with React, developers can import .scss files directly into their React components and use Sass syntax in their styles. This can help make the code more modular and easier to maintain.
To use node-sass with React, you will first need to install it as a dependency using npm:
npm install node-sass
- After installing node-sass you can start using Sass in React. Create a styles folder and inside this folder create test.scss.
Import this file to the component you are working on or index.js. You don't need to import the node-sass to the component.
$primary-color: #007bff;
$secondary-color: #6c757d;
SASS:-
------
- Syntactically Awesome Stylesheet
- Sass is a CSS pre-processor.
- Sass reduces repetition of CSS and therefore saves time.
- Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
Sass files has the ".scss" file extension
