React sass(Styling sheet)

 

React sass(Styling sheet)

Sass – Syntactically Awesome Stylesheet

To install sass use the below command

npm install node –sass .scss-extension

 

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Reactstyle extends React.Component{

  render(){

    return(

      <div>

      <h1>Hello World</h1>

      <h2>Welcome</h2>

      <h3>Thank You</h3>

      </div>

    )

    }

  }

 

 

var mystyle={color:'green',textAlign:'center'}

const element =<div ><Reactstyle/></div>;

 root.render(element);

 

 

Changes in App.css

.App {

  text-align: center;

  color: slateblue;

  text-shadow: #282c34;

  background-color: tomato;

}

 

.App-logo {

  height: 40vmin;

  pointer-events: none;

}

 

@media (prefers-reduced-motion: no-preference) {

  .App-logo {

    animation: App-logo-spin infinite 20s linear;

  }

}

 

.App-header {

  background-color: #282c34;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: calc(10px + 2vmin);

  color: white;

}

 

.App-link {

  color: #61dafb;

}

h1{

  color: #a2b9a2;

}

 

@keyframes App-logo-spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

 

 

Create a new file in src folder and named it myfile.scss

$colorvar:red;

$backcolor:#a2b8;

h1{

    color:$colorvar;

}

h2{

    color:$colorvar;

}

 

Output

Exercise 2:

Changes in myfile.scss

$colorvar:green;

$backcolor:#a2b8;

$mycolor:red;   //global variable

h1{

    font:{

        size: 70px;

        family:sans-serif;

       

    }

    $mycolor:yellow;

    color:$mycolor;

}

h2{

   

    color:$colorvar;

}

 

 

Index.html

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Reactstyle extends React.Component{

  render(){

    return(

      <div>

      <h1>Hello World</h1>

      <h2>Welcome</h2>

      <h3>Thank You</h3>

      </div>

    )

    }

  }

 

 

var mystyle={color:'green',textAlign:'center'}

const element =<div ><Reactstyle/></div>;

 root.render(element);

 

 

 

App.css

.App {

  text-align: center;

  color: slateblue;

  text-shadow: #282c34;

  background-color: tomato;

}

 

.App-logo {

  height: 40vmin;

  pointer-events: none;

}

 

@media (prefers-reduced-motion: no-preference) {

  .App-logo {

    animation: App-logo-spin infinite 20s linear;

  }

}

 

.App-header {

  background-color: #282c34;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: calc(10px + 2vmin);

  color: white;

}

 

.App-link {

  color: #61dafb;

}

h1{

  color: #a2b9a2;

}

 

@keyframes App-logo-spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

 

 

Output