Scribd
Upload
102 views

Use of SASS and SCSS With React JS

SASS is a CSS preprocessor that extends CSS by adding features like variables, mixins, and inheritance. SCSS (Sassy CSS) is the newer syntax of SASS that uses CSS-like formatting with braces and semicolons. SCSS is a superset of CSS that aims to fill gaps and incompatibilities between CSS and SASS. To set up a React project with SASS/SCSS, install the node-sass package and create files with .scss or .sass extensions.

Uploaded by

Hassaan Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
102 views

Use of SASS and SCSS With React JS

SASS is a CSS preprocessor that extends CSS by adding features like variables, mixins, and inheritance. SCSS (Sassy CSS) is the newer syntax of SASS that uses CSS-like formatting with braces and semicolons. SCSS is a superset of CSS that aims to fill gaps and incompatibilities between CSS and SASS. To set up a React project with SASS/SCSS, install the node-sass package and create files with .scss or .sass extensions.

Uploaded by

Hassaan Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Use of SASS and SCSS with React

JS
Hassaan Ahmed
SASS

SASS is short for Syntactically Awesome Style Sheets, and it is among the most popular CSS
preprocessors. It extends CSS by adding features of traditional programming languages, particularly
object-oriented programming languages.

Inheritance selector, mixin


What is SCSS?

SASS consists of two syntaxes. The older one is called the indented syntax and is similar to Python, which
is a templating system aimed at generating clean HTML code by avoiding writing inline code in a web
document.

The other syntax, the newer SASS syntax, is SCSS or Sassy CSS. Unlike the indented syntax, it uses CSS-
like block formatting. While braces denote code blocks, semicolons separate rules with a code block. This
makes the SCSS syntax strict but at the same time more expressive in terms of readability. SCSS is built on
top of CSS and contains more features in addition to all the features of CSS. Thus, SCSS is a superset of
CSS. The main aim of SCSS is to fill the gaps and incompatibilities between CSS and SASS.
Setting up a Project

● Create a React JS APP


● Open React JS App
● Run the Command below in order to Install Node SASS Package

npm install node-sass --save

● Create file with extension scss or sass


Features
Features
Features
Features
SCSS Example
SASS Example
Demo
References

● https://www.interviewbit.com/blog/sass-vs-scss/
● https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/
● https://www.freecodecamp.org/news/the-beginners-guide-to-sass/
Thank You

Any Questions?

You might also like