fbpx

ReactJS with SASS/SCSS

Have you ever thought about style management? Styling is one of many processes during the web building process. As the development grows, its stylesheets increase in size and complexity, making them harder to maintain as time passes. That's where a CSS pre-processor comes in handy.

What is SASS/SCSS?

SASS (Syntactically Awesome Stylesheet) / SCSS (Sassy Cascading Style Sheets) are CSS pre-processors that add special features such as variables, mixing, nesting selector, and inheritance selector. While their functions remain the same, the main difference between SASS and SCSS is their syntax. For example, SASS does not require curly brackets.

Here are four significant advantages:

  • Variables -> to store information that is to be re-used later
  • Nesting -> to allow you to nest CSS selectors in the same way as HTML
  • Mixin -> to allow you to create CSS code that can be re-used
  • Interpolation -> a mixin function that can pass expressions

Demonstration

Let's jump into the codes. This article will provide examples of three types of extensions for us to learn the differences between SASS, SCSS, and CSS. Let's use ReactJs for our demonstration to make it simple and easy.

Open the terminal and complete these commands to spin up a new react project with SASS/SCSS ready to use.

  • npx create-react-app react-SASS
  • cd react-sass
  • npm install node-sass -save
  • npm start

In App.js

Please note that you can either use SASS or SCSS. First, let's demonstrate how to use SASS as our style extension.

import './App.sass';

function App() {
  return (
    <div className="App">
      <div className="purple">
        <p>Purple</p>
      </div>
<div className="divider"></div>
      <div className="black">
        <p>Black</p>
      </div>
    </div>
  );
}

export default App;

Let's make our SASS file by creating a file called App.sass.

//variable example
$i-want-turquoise: turquoise
$i-want-black: black
$i-want-purple: purple

//mixin example
@mixin div-style
    width: 100%
    height: 100%
    align-items: center
    display: flex
    justify-content: center

@mixin p-style 
    padding: 20px  
    font-size: 60px  
    font-weight: bold
    text-align: center

//interpolation example
@mixin div-theme($name, $bg-color, $color) 
    #{$name} 
        background-color: #{$bg-color}
        color: #{$color}

//the line below is an example of how to call the interpolation method
@include div-theme(".black", $i-want-black, $i-want-purple)
@include div-theme(".purple", $i-want-purple, $i-want-black)

.App 
    display: flex
    height: 100vh

.purple
    //the line below is an example of how to call the existing mixin
    @include div-style
    p //this p tag is placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style

//the line below is an example of how to call the variables that stated earlier
.divider
    width: 5%
    background-color: $i-want-turquoise

.black
    //the line below is an example of how to call the existing mixin
    @include div-style
    p //this p tag is placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style

That is how we use SASS. Now, let's build the SCSS extension by creating a file called App.scss.

//variable example
$i-want-turquoise: turquoise;
$i-want-black: black;
$i-want-purple: purple;

//mixin example
@mixin div-style{
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

@mixin p-style {
    padding: 20px;  
    font-size: 60px;  
    font-weight: bold;
    text-align: center;
}

//interpolation example
@mixin div-theme($name, $bg-color, $color) {
    #{$name} {
        background-color: #{$bg-color};
        color: #{$color};
    }
}

//the line below is an example of how to call the interpolation method
@include div-theme(".black", $i-want-black, $i-want-purple);
@include div-theme(".purple", $i-want-purple, $i-want-black);

.App {
    display: flex;
    height: 100vh;
}

.purple{
    //the line below is an example of how to call the existing mixin
    @include div-style;
    p{ //this p tag placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style;
    }
}

//the line below is an example of how to call the variables that stated earlier
.divider{
    width: 5%;
    background-color: $i-want-turquoise;
}

.black{
    //the line below is an example of how to call the existing mixin
    @include div-style;
    p{ //this p tag placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style;

    }
}

Suppose you compare the two style pre-processor files. The syntax is different, but their function remains the same, generating this page.

As a comparison, if we use CSS as our stylesheet, the code below will be the result, generating many duplications of properties with the same value.

.black {
  background-color: black;
  color: purple; 
}

.purple {
  background-color: purple;
  color: black; 
}

.App {
  display: flex;
  height: 100vh; 
}

.purple {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center; 
}

.purple p {
  padding: 20px;
  font-size: 60px;
  font-weight: bold
  text-align: center; 
}

.divider {
  width: 5%;
  background-color: turquoise; 
}

.black {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center; 
}

.black p {
  padding: 20px;
  font-size: 60px;
  font-weight: bold;
  text-align: center; 
}

Conclusion

Using SASS/SCSS style pre-processors, we can quickly write code while preventing the duplication of called properties with the same value.

This article has covered the primary or essential features of using variables, nesting, mixin, and interpolation features. There are many uses for SASS/SCSS. To find out more, check out their official page here https://sass-lang.com/documentation.

Author: Danny Gandasasmita, Programmer

Share

Get the latest news from us to your inbox

(Weekly newsletter)

Leave a comment



from Indonesia:
from Australia:
from New Zealand:
from Singapore:
Our social media
        
© Copyright 1991 - 2022 Mitrais