THE WORLD'S LARGEST WEB DEVELOPER SITE

React Sass


What is Sass

Sass is a CSS pre-processor.

Sass files are executed on the server and sends CSS to the browser.

You can learn more about Sass in our Sass Tutorial.


Can I use Sass?

If you use the create-react-app in your project, you can easily install and use Sass in your React projects.

Install Sass by running this command in your terminal:

C:\Users\Your Name>npm install node-sass

Now you are ready to include Sass files in your project!


Create a Sass file

Create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss

In Sass files you can use variables and other Sass functions:

mysass.scss:

Create a variable to define the color of the text:

$myColor: red;

h1 {
  color: $myColor;
}

Import the Sass file the same way as you imported a CSS file:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './mysass.scss';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );
  }
}

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

Run Example »