एसएएसएस में @for डायरेक्टिव

@for डायरेक्टिव की सहायता से निश्चित स्टाइल्स को काउंटर वेरिएबल द्वारा निर्दिष्ट मात्रा में आउटपुट किया जा सकता है। @for लिखने का पहला विकल्प इस प्रकार दिखता है:

scss@for $var from (start) through (end)

इस मामले में रेंज में (start) और (end) मान सख्ती से शामिल होते हैं। ध्यान देने योग्य बात यह है कि (start) और (end) को पूर्णांक संख्याएं लौटानी चाहिए, क्योंकि वे गिनती की दिशा निर्धारित करते हैं, अर्थात यदि (start) (end) से कम है, तो काउंटर बढ़ेगा और तदनुसार, यदि विपरीत होगा - तो घटेगा।

आइए @for डायरेक्टिव के काम को सिंटैक्स के पहले विकल्प में निम्नलिखित उदाहरण पर देखें:

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

कंपाइलेशन का परिणाम:

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

दूसरे विकल्प में रिकॉर्ड इस प्रकार दिखती है:

scss@for $var from (start) to (end)

इसके अलावा यहाँ (end) का मान छोड़ दिया जाता है।

पिछला उदाहरण लेते हैं और इसे दूसरे विकल्प में लिखते हैं:

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

अब प्राप्त कोड पर ध्यान दें:

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}