SASS सिंटैक्स और SCSS सिंटैक्स
यह लेख SASS सिंटैक्स और SCSS सिंटैक्स को समझाता है।
हम SASS और SCSS सिंटैक्स के बीच के अंतर को विस्तार से समझाएँगे और आपकी समझ को गहरा करने के लिए व्यवहारिक उदाहरण देंगे।
YouTube Video
SASS सिंटैक्स और SCSS सिंटैक्स
SASS एक स्टाइलशीट भाषा है जिसे CSS की क्षमताओं को बढ़ाने के लिए डिज़ाइन किया गया है। SASS के दो सिंटैक्स हैं। ये हैं SASS सिंटैक्स और SCSS सिंटैक्स।
SASS और SCSS का अवलोकन
SASS सिंटैक्स
SASS सिंटैक्स इस प्रकार लिखा जाता है:।
1$primary-color: #3498db
2$secondary-color: #2ecc71
3
4body
5 font-family: Arial, sans-serif
6 color: $primary-color
7
8h1
9 font-size: 2rem
10 color: $secondary-color
11
12 &:hover
13 text-decoration: underline- यह एक इंडेंटेशन-आधारित सिंटैक्स है जिसमें कर्ली ब्रेसेज
{}या सेमीकोलन;का उपयोग नहीं किया जाता। - इसे संक्षिप्त और पढ़ने में आसान कोड लिखने के लिए डिज़ाइन किया गया है।
- इसकी फ़ाइल एक्सटेंशन
.sassहै।
SCSS सिंटैक्स
SCSS सिंटैक्स इस प्रकार लिखा जाता है:।
1$primary-color: #3498db;
2$secondary-color: #2ecc71;
3
4body {
5 font-family: Arial, sans-serif;
6 color: $primary-color;
7}
8
9h1 {
10 font-size: 2rem;
11 color: $secondary-color;
12
13 &:hover {
14 text-decoration: underline;
15 }
16}- यह CSS के समान एक सिंटैक्स है, जिसमें कर्ली ब्रेसेज
{}और सेमीकोलन;का उपयोग होता है। - यह मौजूदा CSS कोड के साथ अत्यधिक संगत है, जिससे CSS को सीधे SCSS फ़ाइल में बदला जा सकता है।
- इसकी फ़ाइल एक्सटेंशन
.scssहै।
SASS और SCSS के मुख्य अंतरों
| विशेषता | SASS सिंटैक्स | SCSS सिंटैक्स |
|---|---|---|
| सिंटैक्स | इंडेंटेशन आधारित | CSS के समान |
| एक्सटेंशन | .sass |
.scss |
कर्ली ब्रेसेज {} |
उपयोग नहीं | उपयोग किया गया |
सेमीकोलन ; |
उपयोग नहीं | उपयोग किया गया |
| CSS संगतता | कम | ज्यादा |
| पठनीयता | संक्षिप्त और सुंदर | विस्तृत और परिचित |
चयन मानदंड
कौन सा उपयोग करना है यह परियोजना और टीम की आवश्यकता पर निर्भर करता है।
-
SASS सिंटैक्स कब चुनें
- SASS सिंटैक्स में आप संक्षिप्त और साफ़ कोड लिख सकते हैं।
- अगर पूरी टीम SASS सिंटैक्स से परिचित है, तो यह एक उपयुक्त विकल्प है।
-
SCSS सिंटैक्स कब चुनें
- अगर CSS के साथ संगतता महत्वपूर्ण है और अधिकांश टीम सदस्य CSS से परिचित हैं, तो SCSS सिंटैक्स अधिक उपयुक्त है।
SASS और SCSS के लाभ
SASS और SCSS सिंटैक्स दोनों के सामान्य फायदे निम्नलिखित हैं:।
- वेरिएबल्स का उपयोग
1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5 font: 100% $font-stack;
6 color: $primary-color;
7}- वैरिएबल्स का उपयोग करके, आप एक ही स्थान पर एक शैली परिभाषित कर सकते हैं और उसे कई स्थानों पर पुनः उपयोग कर सकते हैं। सिर्फ वैरिएबल के मान बदलकर पूरे डिज़ाइन में बदलाव लागू किया जा सकता है, जिससे रखरखाव आसान होता है।
- मिक्सिन्स
1@mixin border-radius($radius) {
2 -webkit-border-radius: $radius;
3 -moz-border-radius: $radius;
4 border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}- मिक्सिन्स आपको उन शैलियों या वेंडर-प्रिफिक्स कोड को समूहित करने की अनुमति देते हैं जो कई स्थानों पर बार-बार उपयोग किए जाते हैं, और उन्हें आर्ग्युमेंट्स के साथ लचीले तरीके से लागू कर सकते हैं। यह कोड दोहराव को कम करता है और रखरखाव को बेहतर बनाता है।
- नेस्टेड नियम
1nav {
2 ul {
3 margin: 0;
4 padding: 0;
5 list-style: none;
6 }
7
8 li { display: inline-block; }
9 a { text-decoration: none; }
10}- नेस्टिंग का उपयोग करके, आप HTML संरचना के अनुसार शैलियों को अनुक्रमिक रूप से लिख सकते हैं, जिससे संबंधित नियमों को समूहित करना आसान होता है। यह कोड की पठनीयता और रखरखाव दोनों को बेहतर बनाता है।
- उत्तराधिकार
1%button-style {
2 display: inline-block;
3 padding: 10px 20px;
4 font-size: 16px;
5}
6
7.btn-primary {
8 @extend %button-style;
9 background-color: blue;
10 color: white;
11}
12
13.btn-secondary {
14 @extend %button-style;
15 background-color: gray;
16 color: black;
17}- इनहेरिटेंस का उपयोग करके, आप सामान्य शैलियों को समूहित और पुनः उपयोग कर सकते हैं। यह कोड दोहराव को कम करता है और एक स्थिर डिज़ाइन बनाए रखता है।
निष्कर्ष
SASS और SCSS का चुनाव डेवलपर की पसंद और परियोजना की आवश्यकताओं पर निर्भर करता है।
SASS सिंटैक्स सादगी को प्राथमिकता देता है, जबकि SCSS सिंटैक्स CSS की संगतता पर जोर देता है। दोनों सिंटैक्स शक्तिशाली हैं और CSS की उत्पादकता को बहुत बढ़ा सकते हैं।
आपकी परियोजना के लिए सबसे उपयुक्त विकल्प चुनना स्टाइलशीट प्रबंधन को अधिक प्रभावी बनाता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।