React SAAS

SAAS is a CSS pre-processor, and reduces the repetition of code. Execution of SAAS files occurs on the server, and CSS is sent to the browser.

Using SAAS in a React App

Once a React App is created, SAAS can be installed using:

Saas File

Saas file can be created using the .scss extension. In Saas files, variables and Saas functions can be used:

$bodyColor: #ffffff;
$textColor: pink;
body {
  background-color: $bodyColor;
}
p {
  color: $textColor;
}

Importing SAAS File

SAAS file can be imported the same way as the CSS file. Here's an example:

import React from 'react';
import './styles.scss';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
      <h4>Hello World!</h4>
      <p>Styling will be applied on this</p>
      </div>
    );

  }
  }

  ReactDOM.render(<MyComponent />, document.getElementById('root'));