SASS की बुनियादी बातें
यह लेख SASS की बुनियादी बातें समझाता है।
हम SASS की मूल सुविधाओं को चरण दर चरण समझाएंगे और उन्हें व्यावहारिक उदाहरण कोड के साथ इस्तेमाल करना दिखाएंगे।
YouTube Video
SASS की बुनियादी बातें
SASS (सिन्टेक्टीकली ऑसम स्टाइलशीट्स) एक स्टाइलशीट भाषा है जो CSS को बढ़ाता है। SASS का उपयोग करके, आप ऐसे उन्नत फीचर्स का लाभ उठा सकते हैं जो CSS में उपलब्ध नहीं हैं, जैसे कि वेरिएबल्स, नेस्टिंग, मिक्सिन्स और इनहेरिटेंस। यह स्टाइलशीट प्रबंधन और पुन: उपयोग को बहुत आसान बना देता है।
SASS क्या है?
SASS एक ऐसी भाषा है जो CSS लिखना सरल बनाती है और अधिक लचीला तथा शक्तिशाली स्टाइलिंग संभव बनाती है। SASS SCSS (Sassy CSS) सिंटैक्स भी प्रदान करता है, जो सामान्य CSS सिंटैक्स के समान है। यहाँ एक उदाहरण है:।
SCSS उदाहरण
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS उदाहरण
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASS सेटअप करना
इंस्टॉल कैसे करें
SASS का उपयोग करने के लिए पहले Node.js इंस्टॉल करें और फिर निम्नलिखित कमांड से SASS इंस्टॉल करें:।
1npm install -g sassकंपाइल कैसे करें
SASS फाइलों (.scss या .sass) को CSS में कंपाइल करने के लिए निम्न कमांड का उपयोग करें:।
1sass input.scss output.cssआप फाइल में बदलाव की निगरानी करने और रियल-टाइम कंपाइलिंग करने के लिए watch विकल्प का भी उपयोग कर सकते हैं।
वेरिएबल्स
SASS आपको वेरिएबल्स का उपयोग कर रंगों और फॉन्ट साइज जैसी वैल्यूज को दोबारा प्रयोग करने की सुविधा देता है।
नमूना कोड (Sample Code)
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- यह कोड SASS वेरिएबल्स का उपयोग रंग और फॉन्ट निर्धारित करने के लिए करता है, और इन्हें
bodyसेलेक्टर के अंदर पुन: इस्तेमाल करता है ताकि लगातारता और रखरखाव में सुधार हो सके।
कंपाइल परिणाम
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}नेस्टिंग
SASS CSS सेलेक्टर्स को नेस्ट करने की सुविधा देकर कोड की पठनीयता बढ़ाता है।
नमूना कोड (Sample Code)
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- यह कोड स्टाइल्स की संरचना को दृश्यमान रूप से स्पष्ट करने के लिए नेस्टेड heirarchy का उपयोग करता है।
कंपाइल परिणाम
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}मिक्सिन्स
मिक्सिन्स की मदद से आप कोड को कई सेलेक्टर्स में दोबारा उपयोग कर सकते हैं।
नमूना कोड (Sample Code)
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- यह कोड
@mixinका उपयोग करborder-radiusस्टाइल को परिभाषित करता है और@includeके माध्यम सेbuttonऔर.cardमें इसका पुन: उपयोग करता है, जिससे डुप्लिकेशन के बिना प्रभावी स्टाइलिंग संभव होती है।
कंपाइल परिणाम
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}इनहेरिटेंस (@extend)
इनहेरिटेंस से आप मौजूदा स्टाइल्स को दूसरे सेलेक्टर्स पर लागू कर सकते हैं।
नमूना कोड (Sample Code)
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- यह कोड
%button-styleनामक प्लेसहोल्डर सेलेक्टर को परिभाषित करता है और@extendका उपयोग करके सामान्य स्टाइल्स कोbuttonऔर.link-buttonदोनों पर लागू करता है, जिससे पुन: उपयोग और लगातारता को बढ़ावा मिलता है।
कंपाइल परिणाम
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}कंडीशनल्स और लूप्स
SASS कंडीशनल्स और लूप्स को सपोर्ट करता है, जिससे आप डायनामिक स्टाइल्स बना सकते हैं।
कंडीशनल स्टेटमेंट का उदाहरण
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- यह कोड SASS के
ifफंक्शन का उपयोग करके$themeमूल्य के आधार पर बैकग्राउंड और टेक्स्ट रंग बदलता है, जिससे कंडीशनल के माध्यम से डायनामिक स्टाइल जेनरेशन संभव होती है।
लूप का उदाहरण
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- यह कोड SASS के
@forलूप का उपयोग करके.column-1से.column-3तक डायनामिक रूप से क्लासेज़ बनाता है।
कंपाइल परिणाम
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}फाइल स्प्लिटिंग और इम्पोर्टिंग
SASS से आप फाइलों को बाँट सकते हैं और उन्हें @use या @import के जरिए दोबारा इस्तेमाल कर सकते हैं।
फाइल संरचना
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}कंपाइल परिणाम
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}सारांश
SASS के उपयोग से CSS लिखना आसान होता है और कोड की पुन: उपयोगिता तथा अनुरक्षण बेहतर होता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।