Sass and SCSS

CSS Modules:

Sass is the most stable, powerful, professional-grade CSS extension language. It’s a CSS preprocessor that adds special features such as variables, nested rules, and mixins or syntactic sugar in regular CSS. The aim is to make the coding process simpler and more efficient.

Installation Steps:

Step 1: Before moving further, firstly we have to install node-sass , by running the following command in your project directory, with the help of terminal in your SRC folder or you can also run this command in Visual Studio Code’s terminal in your project folder.

npm install node-sass

Step 2 : After the installation is complete we create a file name StudentList.scss .
Step 3: Now include the necessary CSS effects in your CSS file.
Step 4: Now we import our file the same way we import a CSS file in React.
Step 5: In your app.js file, add this code snippet to import StudentList.scss.

import './ StudentList.scss';

Example: This example demonstrate above approach.

Javascript

// Filename - App.js
 
import React, { Component } from "react";
import StudentList from "./StudentList";
 
const App = () => {
    return (
        <div>
            <StudentList
                name="Ashank"
                classNo="X"
                roll="05"
                addr="Kolkata, West Bengal"
            />
            <StudentList
                name="Samir"
                classNo="Xi"
                roll="09"
                addr="Jalpaiguri, West Bengal"
            />
            <StudentList
                name="Tusar"
                classNo="Xii"
                roll="02"
                addr="Howrah, West Bengal"
            />
            <StudentList
                name="Karishma"
                classNo="ix"
                roll="08"
                addr="Mednipur, West Bengal"
            />
        </div>
    );
};
 
export default App;

Javascript

// Filename - StudentList.js
 
import React, { Component } from "react";
import "./StudentList.scss";
 
const StudentList = (props) => {
    const { name, classNo, roll, addr } = props;
    return (
        <ul className="list">
            <li className="details">Name : {name}</li>
            <li className="details">Class: {classNo}</li>
            <li className="details">Roll: {roll}</li>
            <li className="details">Address : {addr}</li>
        </ul>
    );
};
 
export default StudentList;

CSS

/* Filename: StudentList.scss */
 
 
&blue-shade: #264BC4;
&pale-green-color: #3CC27F;
 
.list{
    border: 2px solid &pale-green-color;
    width: 40%;
    list-style-type: none;
}
 
.details{
    color: &blue-shade;
    font-size: 23px;
}

Output :

Styling using Sass

8 Ways to Style React Components

React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

There are about eight different ways to style React JS components, there names and explanations of some of them are mentioned below.

Inline CSS
Normal CSS
CSS in JS
Styled Components
CSS module
Sass & SCSS
Less
Stylable

Here are a few examples to style React Components.

Table of Content

Inline CSS
Normal CSS
CSS in JS
CSS Modules
Sass and SCSS

Tags:

#ReactJS #Web Technologies

CSS Modules:

Sass and SCSS

Javascript

Javascript

CSS

8 Ways to Style React Components

Similar Reads

Contact Us