sass
लूप्स और कॉन्डिटन्स

घुमाव के दौरान

जब तक निर्दिष्ट शर्त झूठी नहीं हो जाती, तब तक @while निर्देश कोड के एक ब्लॉक पर लूप करेगा। निम्नलिखित उदाहरण में, यह लूप $font-size <= 18 तक चलेगा जबकि $font-size का मान 2 से $font-size ।

$font-size: 12;

@while $font-size <= 18 {
    .font-size-#{$font-size} {
        font-size: ($font-size * 1px);
    }

    $font-size: $font-size + 2;
}

उपरोक्त कोड का आउटपुट

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

पाश के लिए

@for निर्देश आपको पुनरावृत्तियों की एक निर्धारित राशि के लिए कुछ कोड के माध्यम से लूप करने की अनुमति देता है और इसके दो रूप हैं:

• @for <var> from <start> through <end> {}
• @for <var> from <start> to <end> {}

दो रूपों में अंतर के माध्यम से और करने के लिए है ; कीवर्ड के माध्यम से शामिल होंगे <end> जहां नहीं होगा करने के लिए लूप में; के माध्यम से का उपयोग कर का उपयोग कर के बराबर है >= या <= जैसे C अन्य भाषाओं में ++, जावा स्क्रिप्ट, या PHP।

टिप्पणियाँ

• दोनों <start> और <end> पूर्णांक या फ़ंक्शन होने चाहिए जो पूर्णांक लौटाते हैं।
• जब <start> <end> से अधिक होता है, तो काउंटर वेतन वृद्धि के बजाय घट जाएगा।

SCSS उदाहरण

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }

सशर्त निर्देश (यदि)

@if नियंत्रण निर्देश किसी दिए गए व्यंजक का मूल्यांकन करता है और यदि यह false अलावा कुछ भी देता है, तो यह शैलियों के ब्लॉक को संसाधित करता है।

सास उदाहरण

$test-variable: true !default

=test-mixin
  @if $test-variable
    display: block
  @else
    display: none

.test-selector
  +test-mixin

SCSS उदाहरण

$test-variable: true !default

@mixin test-mixin() {
  @if $test-variable {
    display: block;
  } @else {
    display: none;
  }
}

.test-selector {
  @include test-mixin();
}

उपरोक्त उदाहरण निम्नलिखित सीएसएस का उत्पादन करते हैं:

.test-selector {
  display: block;
}

प्रत्येक लूप

@ नीच निर्देश आपको किसी भी सूची या मानचित्र के माध्यम से पुनरावृत्त करने की अनुमति देता है। यह @each $var or <list or map> {} का रूप लेता है जहाँ $var का कोई भी चर नाम हो सकता है और <list or map> कुछ भी हो सकता है जो किसी सूची या मानचित्र को लौटाता है।

निम्न उदाहरण में, पाश पुनरावृति जाएगा के माध्यम से $authors के लिए प्रत्येक आइटम बताए की सूची $author , की है कि मूल्य का उपयोग कर शैली के अपने ब्लॉक की प्रक्रिया $author , और सूची में अगले आइटम के लिए आगे बढ़ें।

SCSS उदाहरण

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

सीएसएस आउटपुट

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

एकाधिक असाइनमेंट

मल्टीपल असाइनमेंट आपको @each निर्देश में कई वेरिएबल्स घोषित करके सभी वेरिएबल्स तक आसान पहुंच प्रदान करने की अनुमति देता है।

नेस्टेड सूची

सभी नेस्टेड तत्वों तक आसान पहुंच के लिए, आप प्रत्येक नेस्टेड तत्व से मेल खाने के लिए अलग-अलग वेरिएबल्स घोषित कर सकते हैं। सुनिश्चित करें कि आपके पास चर और नेस्टेड तत्वों की सही मात्रा है। निम्नलिखित उदाहरण में, प्रत्येक लूप तीन तत्वों की सूची के माध्यम से पुनरावृत्ति कर रहा है, जिनमें से प्रत्येक में तीन तत्व निहित हैं। घोषित चर की गलत मात्रा होने से एक संकलक त्रुटि होगी।

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

मैप्स

एकाधिक असाइनमेंट मैप्स के लिए भी काम करता है, लेकिन केवल दो वेरिएबल्स तक सीमित है, कुंजी तक पहुंचने के लिए एक वैरिएबल और मूल्य तक पहुंचने के लिए एक चर। निम्नलिखित उदाहरण में $key और $value नाम हैं:

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}

नक्शे / सूची मूल्यों के साथ प्रत्येक लूप

नक्शे में $color-array उदाहरण के नीचे दिए गए उदाहरण के मूल्य में जोड़े की सूची के रूप में माना जाता है।

SCSS इनपुट

$color-array:(
  black: #4e4e4e,                       
  blue: #0099cc,
  green: #2ebc78
);
@each $color-name, $color-value in $color-array {
  .bg-#{$color-name} {
    background: $color-value;
  }
}

सीएसएस आउटपुट

.bg-black {
  background: #4e4e4e;
}

.bg-blue {
  background: #0099cc;
}

.bg-green {
  background: #2ebc78;
}