Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Zero to Hero in SASS & SCSS with integration in React JS App

Name: Zero to Hero in SASS & SCSS with integration in React JS App
Rating: 4.3 (47 reviews)

Learn everything about SASS & SCSS with Handson Practical Examples, also learn how to work with SASS or SCSS in React JS

Created byRanjan Pandey

Last updated 6/2023

English

English [Auto],

What you'll learn

You will learn the difference between SASS, SCSS and CSS
You will learn the difference between SASS, SCSS and CSS
You will learn about Variables, Operators, Nesting, Mixin, Partials and Comments in SASS/SCSS
You will be learn the advantages of using SASS/SCSS
You will learn to setup a React JS project and integrate SASS/SCSS to it.
You will learn to style React JS components using SASS/SCSS

Course content

5 sections • 19 lectures • 1h 5m total length

About your Instructor0:18
What is and Why do we need SASS or SCSS2:17
Learn what CSS is, why we need Sass and SCSS as a preprocessor, and how CSS styles web pages—from fonts and colors to layouts and images—with powerful features.
Features of SASS or SCSS3:19
Installing Visual Studio Code Editor1:02
Install Visual Studio Code as your local editor for frontend development and beyond; download from the official site, select your operating system, and complete the installation.
Installing Node JS1:25
Install Node.js to run JavaScript outside the browser; this Chrome V8 runtime enables server-side execution, so download the long-term support version and complete the installation.
Local development environment setup4:10
Learn to set up a local development environment for sass and scss by using Visual Studio Code, creating index.html and style.scss, enabling Live Server, and understanding scss to css compilation.

SASS Compiler and Compiled Output files3:54
Explore how a live sass compiler converts scss to css so the browser understands it, producing css and css.map files and enabling source map debugging in the browser.
Applying Styling to Page4:01
Reset margins and paddings to zero, set box-sizing to border-box, style a main container with 100vw by 100vh using grid to center content, and note Sass to CSS compilation.
How to use Operators in SASS or SCSS3:03
Master Sass and SCSS operators to perform on-the-fly calculations, like font-size in rem, using addition, subtraction, multiplication, and division, with compiled CSS reflecting results.
How to Declare and use Variables in CSS and SCSS or SASS3:39
Learn to declare and use variables in css and sass (scss/sass), define $bg-color and $font-size, reuse values across styles, perform arithmetic, and see automatic updates reflect across the project.

Nesting of Style with SASS or SCSS - Part-13:58
Explore nesting in sass and scss to organize styles by parent containers, using a main container, paragraph tags, and flex layout, and observe the generated css changes.
Nesting of Style with SASS or SCSS - Part-24:17
Master advanced nesting in sass and scss by nesting inside parent selectors, applying hover effects to h2 and p, and using pseudo elements like before to generate readable, compiled css.
Mixin in SCSS or SASS - Part-12:53
Discover how to create and reuse styles in SCSS or SASS with mixins, defining a mixin, naming it, and calling it across your project to avoid repetition.
Mixin in SCSS or SASS - Part-23:12
Reuse styles in SCSS or SASS with mixins, creating a font style mixin to update across elements; learn to use parameters for controlling capitalized text and letter spacing.
Parameterized Mixin in SASS or SCSS4:10
Discover how to reuse styles in sass by creating parameterized mixins, pass parameters to control text transform and letter spacing, and build dynamic, reusable code.

Single line Comment in SASS or SCSS1:13
Master single line comments in sass and scss, while css supports only multi-line comments. Discover how partials and import help organize multiple scss files.
Partials and Import in SASS or SCSS5:41
Learn how to use partials and import to split scss into underscore-named files for variables and mixing, import them into the main file, and see automatic updates without recompiling partials.

Setting up React and Installing node-sass4:18
Set up a React app and install node-sass to compile scss into css, enabling sass in your project and running npm start to preview.
Using SASS or SCSS features in React Application8:28
Learn to use Sass and SCSS features in a React application by converting CSS to SCSS, creating and importing variables and mixins, and applying nesting, operators, and comments.

Requirements

Basic knowledge of CSS and ReactJS will be good to have.

Description

Learn everything about SASS & SCSS with Hands-on Practical Examples, also learn how to work with SASS or SCSS in React JS Application.

This course covers all the basics of SASS or SCSS and it covers both theory and handson part. We will first start by learning the what and why part of using SASS or SCSS, then implement every feature with practical handson approach.

Then we will create React JS application and add SASS or SCSS capability and start styling React components using SASS/SCSS.

Following are the topics that are covered:

1-Why do we need SASS or SCSS

2-Features of SASS or SCSS

3-Local development environment setup

4-SASS Compiler and Compiled Output files

5-Applying Styling to Page

6-How to use Operators in SASS or SCSS

7-How to Declare and use Variables in CSS and SCSS or SASS

8-Nesting of Style with SASS or SCSS - Part-1

9-Nesting of Style with SASS or SCSS - Part-2

10-Mixin in SCSS or SASS - Part-1

11-Mixin in SCSS or SASS - Part-2

12-Parameterized Mixin in SASS or SCSS

13-Single line Comment in SASS or SCSS

14-Partials and Import in SASS or SCSS

Applying SASS/SCSS to React JS Project:

1-Setting up React and Installing node-sass

2-Using SASS or SCSS features in React Application

After completing this course you will master all the SASS/SCSS concepts and learn to apply them in any project. You will also be now able to work any ReactJS projects using SASS/SCSS.

Who this course is for:

Anyone who wants to work in Industry based real world projects where SASS/SCSS are being used.

Zero to Hero in SASS & SCSS with integration in React JS App

What you'll learn

Explore related topics

Course content

Introduction and Setup6 lectures • 13min

SASS/SCSS Compiler, Operators, Variables4 lectures • 15min

Nesting of Styles, Mixin and Parameterized Mixin in SASS/SCSS5 lectures • 19min

Partials, Import and Comment in SASS/SCSS2 lectures • 7min

ReactJS App with SASS/SCSS2 lectures • 13min

Requirements

Description

Who this course is for: