SCSS क्या है CSS और SCSS में अंतर | Html में SCSS का इस्तेमाल कैसे करे हिंदी में

आज हम सीखेंगे SCSS क्या है जब भी हम कोई website बनाते है तो हम webpage को design करने के लिए html के साथ CSS का इस्तेमाल करते है बहुत सालों से हम इसका इस्तेमाल करते आ रहे है जिसमें हमे बहुत ज्यादा code लिखना पड़ता है और हमें समय भी ज्यादा लगता है लेकिन अब इसकी जगह SCSS का इस्तेमाल होने लगा है.

लेकिन SCSS में हमें code कम लिखना पड़ता है और काम समय में आसानी से code लिख सकते है SCSS का full form – Syntactically Awesome Style Sheet होता है जिसका हिंदी में मतलब एक बहुत बड़िया stylesheet का निर्माण करना है इसे SASS भी कहा जाता है code में कुछ बदलाव के साथ यह नाम दिया गया है.

CSS और SCSS में क्या अंतर है – difference between css and scss

1) हमे CSS में code को बहुत ज्यादा लिखना पडता जिससे हमे समय भी ज्यादा लगता है SCSS में हमे code को बहुत काम लिखना पडता है जिससे हमें कम समय लगता है. और काम करने में आसानी होती है.

2) CSS file को हमेशा .css extension नाम से save करते है तथा SCSS file को .scss extension नाम से save किया जाता है.

• CSS file save = style.css
• SCSS file save = style.scss

SCSS file run command

3) style.css file को run कराने के लिए हमें किसी command की जरुरत नहीं होती है और style.scss file को run कराने के लिए हमें एक command की जरुरत होती है. command चलाने के बाद हम scss file में बदलाव करते है उसका code हमें style.css file में मिलता है. नीचे command है जिसे हमें अपने project के terminal में चलाना होता है.

watch scss--scss/style.scss scss/style.css

4) CSS में हमें किसी color को लिखने के लिए color का नाम लिखकर तथा color का code लिखकर लिखते है लेकिन SCSS में हम variable बनाकर color का इस्तेमाल करते है variable को SCSS में हमेशा $(dollar) से लिखा जाता है.

5) CSS में हम एक ही file style.css के अंदर पूरा code लिखते है लेकिन SCSS file में button के लिए अलग page में, form के लिए अलग, modal के लिए अलग तथा अपनी जरुरत के हिसाब से हर चीज़ के लिए अलग file बना सकते है.

6) CSS में हम main class या id के आगे उसके अंदर के सारे class को सीधे आगे की तरफ लिखते है लेकिन SCSS में main class के अंदर हम नीचे की तरफ SCSS लिखते जाते है.

SCSS Variables क्या है

अगर आपको सीखना है SCSS क्या है और variables के बारे में तो आपको पूरा article पढ़ना जरुरी है – SCSS में हम बहुत सरे variables को एक file variable.scss बनाकर उसके अंदर रख देते है तथा variable को हमेशा SCSS में $ लगाकर लिखते है. जैसे कोई black color है हमें variable.scss file में $black : #000; लिखकर class देते है.

तथा हम अपने website पर कही पर भी या किसी page में black-color या background-color देना हो तो हम $black का इस्तेमाल करेंगे. जिसके बाद हमें color black दिखाई देगा.

SCSS file को compile करने के लिए हमें text browser जैसे – notepad, visual studio code , sublime के terminal में watch scss–scss/style.scss scss/style.css command को run करना पड़ता है. जिसके बाद सारे SCSS file compile होने के बाद एक style.css file बनती है जहा पर हमें सारा code दिखता है.

क्योकि browser SCSS file का code browser पर नहीं दिखाता है इसलिए हमें SCSS file को CSS में compile करने की जरुरत होती है. variable बनाने का सबसे बड़ा फायदा यह होता है की हम पूरी website में एक साथ color change कर सकते है. variables.css file में $black code में color बदलने से जहाँ black color है वह पर color बदल जाएगा.

SCSS media query और इसका इस्तेमाल कैसे करें

अगर हमे अपनी website को responsive बनाना है तो SCSS file में code लिखने का तरीका अलग होता है जिसमें हमें mobile, tab, laptop तथा desktop के लिए variable.scss file में variable बनाकर लिखते है.

variable.scss file में –

$phone-landscape: 576px;
$tablet-portrait: 768px;
$tablet-landscape: 992px;
$desktop: 1280px;

SCSS file structure और SCSS file कैसे बनाए

file का structure बनाने के लिए हम SCSS folder के अंदर variable.css file में सारे variable को रखते है. base.scss file जिसके अंदर हम webpage की width, heading tags, paragraph, common font size आदि चीज़ें लिख सकते है.

जो पूरे page के लिए common होता है दूसरा हमारे website में जितने भी button है उनकी class हम button.scss के अंदर लिखते है. तीसरा हम जितने भी modal box है उनकी common class modal.scss के अंदर लिखते है चौथा हम जितने भी font का इस्तेमाल करते है उसे fonts.scss के अंदर रखते है.

पाँचवा हम page का structure यानि कि किसी element की width, height, margin, padding को pages.scss के अंदर रखते है. SCSS folder के अंदर हम एक style.scss file बनाते है जिससे हम सारी SCSS file को path देते है.

जैसे –

../variable.scss
../button.scss
../modal.scss
../pages.scss
../font.scss
../base.scss

SCSS क्या है, CSS, SCSS में अंतर तथा SCSS variable के बारे में basic और सरल भाषा में समझाया गया है SCSS से संबंधित सवाल आप नीचे पूछ सकते है SCSS install कैसे करें और इसके बारे में ज्यादा जानकारी के लिए आप SCSS की website पर जाकर पढ़ सकते है.