HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 ourSass Tutorial
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:
>npm i 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 Sass files you can use variables and other Sass functions:
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:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);