Sass Nested Rules और Nested Properties का उपयोग CSS को ज्यादा structured, readable और logical बनाने के लिए किया जाता है। Nesting की मदद से हम parent और child elements के relationship को clearly दिखा सकते हैं। यह तरीका plain CSS के मुकाबले ज्यादा natural और easy होता है, खासकर तब जब HTML structure complex हो।
इस chapter में हम Sass Nested Rules और Sass Nested Properties को बिल्कुल beginner-level पर, step-by-step समझेंगे।
Nested Rules क्या होते हैं
Nested Rules का मतलब है एक CSS rule के अंदर दूसरी CSS rules लिखना। यह HTML structure को follow करता है और यह दिखाता है कि कौन सा element किसके अंदर है।
Plain CSS में हर selector को बार-बार पूरा लिखना पड़ता है, जबकि Sass में nesting से duplication कम हो जाती है।
Nested Rules का Basic Example
nav {
background-color: #333;
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
color: white;
text-decoration: none;
}
}
यह code एक nav element के अंदर ul, li और a elements की styling define करता है।
यह structure यह दिखाता है कि ul, li और a सभी nav के अंदर हैं।
Nesting का use इसलिए किया गया है ताकि code logically grouped रहे और पढ़ने में easy हो।
जब इस Sass code को CSS में compile किया जाएगा, तो output कुछ ऐसा होगा:
nav {
background-color: #333;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: white;
text-decoration: none;
}
यह output दिखाता है कि Sass automatically nested selectors को full selectors में convert कर देता है।
Nested Rules क्यों Use करें
Nested Rules के फायदे:
- HTML structure साफ दिखाई देता है
- Code readable होता है
- Repeated selectors कम लिखने पड़ते हैं
- Maintenance आसान हो जाती है
Beginner के लिए यह तरीका CSS समझने में बहुत helpful होता है।
Nested Rules में Over-Nesting से बचना
बहुत ज्यादा nesting code को confusing बना सकती है।
Example of bad practice:
.header {
.menu {
ul {
li {
a {
color: red;
}
}
}
}
}
यह code जरूरत से ज्यादा nested है, जिससे readability कम हो जाती है।
Best practice यह है कि 2 या 3 levels से ज्यादा nesting avoid की जाए।
Parent Selector (&) का उपयोग
Sass में & symbol का use parent selector को refer करने के लिए किया जाता है।
Example
button {
background-color: blue;
&:hover {
background-color: darkblue;
}
}
यह code button के hover state की styling define करता है।
&:hover का मतलब है button:hover।
यह इसलिए use किया जाता है ताकि pseudo-classes और modifiers को easily manage किया जा सके।
Compiled CSS output होगा:
button {
background-color: blue;
}
button:hover {
background-color: darkblue;
}
Nested Rules के साथ Class Modifiers
.card {
padding: 20px;
&.active {
border: 2px solid green;
}
}
यह code .card.active selector को represent करता है।
यह approach component-based CSS लिखने में बहुत useful है।
CSS output होगा:
.card {
padding: 20px;
}
.card.active {
border: 2px solid green;
}
Nested Properties क्या होती हैं
Nested Properties का मतलब है CSS properties को group करके लिखना।
जब किसी property के कई related sub-properties होते हैं, तब nesting बहुत useful होती है।
Nested Properties का Example
.box {
border: {
width: 2px;
style: solid;
color: black;
}
}
यह code border की अलग-अलग properties को एक group में लिखता है।
यह तरीका इसलिए use किया जाता है ताकि code clean और organized दिखे।
जब इस Sass code को CSS में compile किया जाएगा, तो output होगा:
.box {
border-width: 2px;
border-style: solid;
border-color: black;
}
यह दिखाता है कि Sass nested properties को normal CSS properties में convert कर देता है।
Margin और Padding में Nested Properties
.container {
margin: {
top: 20px;
bottom: 20px;
}
padding: {
left: 15px;
right: 15px;
}
}
यह code margin और padding को nested format में define करता है।
इसका फायदा यह है कि related properties एक साथ रहती हैं।
Compiled CSS output होगा:
.container {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}
Nested Rules और Nested Properties कब Use करें
Nested Rules तब use करें जब:
- Parent-child relationship साफ दिखाना हो
- Component-based styling करनी हो
Nested Properties तब use करें जब:
- Same property के multiple sub-values हों
- Code को organized रखना हो
Beginner के लिए Important Tips
- Nesting को simple रखें
- Over-nesting से बचें
&का use pseudo-classes के लिए करें- Readability हमेशा priority होनी चाहिए
Nested Rules और Nested Properties Sass को powerful और beginner-friendly बनाते हैं और CSS लिखने का तरीका आसान और professional बना देते हैं।