Loading lesson path
â® Previous Next â¯
Formula
Sass is a CSS pre - processor.Sass files are executed on the server and sends CSS to the browser. Sass adds extra features to CSS like variables, nesting, mixins, and more. You can learn more about Sass in our Sass Tutorial.
To add Sass to a React project, you need to install the Sass package:
npm install sass Now you are ready to include Sass files in your project!
Create a Sass file the same way as you create CSS files, but Sass files have the file extension.scss
In the newly created.scss file, add some simple styling:
$myColor: red;h1 {
color: $myColor;
}Import the Sass file in your React component:
Example import { createRoot } from 'react-dom/client';
import './MyStyle.scss';function MyHeader() {
return (Formula
< h1 > My Header </h1 >);
}createRoot(document.getElementById('root')).render( <MyHeader />
);You can learn more about Sass in our Sass Tutorial.
Formula
Sass has many Built - in Modules that you can use to manipulate colors, math, strings, etc.One example is the sass:color module. It has a function to make a color darker or lighter, just by giving it a percentage:
@use 'sass:color';
$myColor: red;h1 {
color: $myColor;
}h2 {
color: color.adjust($myColor, $lightness: -20%);
}h3 {
color: color.adjust($myColor, $lightness: 20%);
}Let us add the headers to our component:
Example import { createRoot } from 'react-dom/client';
import './MyStyle.scss';function MyHeader() {
return (<div>
Formula
< h1 > My Header 1 </h1 >
< h2 > My Header 2 </h2 >
< h3 > My Header 3 </h3 ></div>
);
}createRoot(document.getElementById('root')).render( <MyHeader />
);You can learn more about Sass in our Sass Tutorial.
Sass files are compiled to CSS at build time. â® Previous Next â¯