Sass का उपयोग करके स्टाइलिंग प्रतिक्रिया
सैसो क्या है
Sass एक CSS प्री-प्रोसेसर है।
Sass फ़ाइलें सर्वर पर क्रियान्वित की जाती हैं और ब्राउज़र को CSS भेजती हैं।
आप हमारे Sass Tutorial में Sass के बारे में अधिक जान सकते हैं ।
क्या मैं सैस का उपयोग कर सकता हूं?
यदि आप create-react-appअपने प्रोजेक्ट में उपयोग करते हैं, तो आप अपने रिएक्ट प्रोजेक्ट्स में Sass को आसानी से स्थापित और उपयोग कर सकते हैं।
इस कमांड को अपने टर्मिनल में चलाकर Sass इंस्टॉल करें:
>npm i sass
अब आप अपने प्रोजेक्ट में Sass फ़ाइलें शामिल करने के लिए तैयार हैं!
एक सैस फ़ाइल बनाएँ
एक Sass फ़ाइल उसी तरह बनाएँ जैसे आप CSS फ़ाइलें बनाते हैं, लेकिन Sass फ़ाइलों में फ़ाइल एक्सटेंशन होता है .scss
Sass फ़ाइलों में आप चर और अन्य Sass फ़ंक्शंस का उपयोग कर सकते हैं:
my-sass.scss:
पाठ के रंग को परिभाषित करने के लिए एक चर बनाएँ:
$myColor: red;
h1 {
color: $myColor;
}Sass फ़ाइल को उसी तरह आयात करें जैसे आपने CSS फ़ाइल आयात की थी:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './my-sass.scss';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));