Sass में गतिशील रूप से चर बनाना या संदर्भित करना

Question 1

मैं दूसरे चर का संदर्भ देने के लिए अपने चर पर स्ट्रिंग प्रक्षेप का उपयोग करने की कोशिश कर रहा हूं:

// Set up variable and mixin
$foo-baz: 20px;

@mixin do-this($bar) {
    width: $foo-#{$bar};
}

// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
@include do-this('baz');

लेकिन जब मैं ऐसा करता हूं, मुझे निम्नलिखित त्रुटि मिलती है:

अपरिभाषित चर: "$ फू-"।

क्या Sass PHP-शैली के चर चर का समर्थन करता है?

Question 2

Sass वैरिएबल को गतिशील रूप से बनाने या एक्सेस करने की अनुमति नहीं देता है। हालाँकि, आप समान व्यवहार के लिए सूचियों का उपयोग कर सकते हैं।

एससीएसएस:

$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}

सीएसएस उत्पन्न:

#smth {
  width: 30px; 
}

Question 3

यह वास्तव में चर के बजाय एसएएसए नक्शे का उपयोग करना संभव है। यहाँ एक त्वरित उदाहरण है:

गतिशील रूप से संदर्भित करना:

$colors: (
  blue: #007dc6,
  blue-hover: #3da1e0
);

@mixin colorSet($colorName) {
    color: map-get($colors, $colorName);
    &:hover {
        color: map-get($colors, $colorName#{-hover});
    }
}
a {
    @include colorSet(blue);
}

आउटपुट के रूप में:

a { color:#007dc6 }
a:hover { color:#3da1e0 }

गतिशील रूप से बनाना:

@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
  $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);

  $colors: map-merge($colors, (
    $colorName: $colorValue,
    $colorName#{-hover}: $colorHoverValue
  ));

  @return $colors;
}

@each $color in blue, red {
  @if not map-has-key($colors, $color) {
    $colors: addColorSet($color, $color);
  }
  a {
    &.#{$color} { @include colorSet($color); }
  }
}

आउटपुट के रूप में:

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

Question 4

कभी भी मुझे सशर्त मूल्य का उपयोग करने की आवश्यकता होती है, मैं कार्यों पर झुक जाता हूं। यहाँ एक सरल उदाहरण है।

$foo: 2em;
$bar: 1.5em;

@function foo-or-bar($value) {
  @if $value == "foo" {
    @return $foo;
  }
  @else {
    @return $bar;
  }
}

@mixin do-this($thing) {
  width: foo-or-bar($thing);
}

Question 5

यदि आप रेल के साथ काम कर रहे हैं, और संभवत: अन्य परिस्थितियों में यह एक और विकल्प है।

यदि आप .bb को फ़ाइल एक्सटेंशन के अंत में जोड़ते हैं, तो रेल SASS दुभाषिए के पास भेजने से पहले फ़ाइल पर एरब प्रोसेस करेगा। यह आपको रूबी में वह करने का मौका दे सकता है जो आप चाहते हैं।

उदाहरण के लिए: (फ़ाइल: foo.css.scss.erb)

// Set up variable and mixin
$foo-baz: 20px; // variable

<%
def do_this(bar)
  "width: $foo-#{bar};"
end
%>

#target {
  <%= do_this('baz') %>
}

निम्नलिखित scss में परिणाम:

// Set up variable and mixin
$foo-baz: 20px; // variable

#target {
  width: $foo-baz;
}

जो, मोटे तौर पर, निम्नलिखित सीएसएस में परिणाम:

#target {
  width: 20px;
}

Question 6

मुझे हाल ही में एक रंग को गतिशील रूप से संदर्भित करने की आवश्यकता है।

मेरे पास हर प्रोजेक्ट के लिए एक _colours.scss फाइल है, जहां मैं एक बार अपने सभी रंगों को परिभाषित करता हूं और उन्हें पूरे चर के रूप में संदर्भित करता हूं।

मेरी _forms.scss फ़ाइल में मैं उपलब्ध प्रत्येक रंग के लिए बटन शैलियों को सेट करना चाहता था। आमतौर पर एक थकाऊ काम। इससे मुझे प्रत्येक अलग रंग के लिए एक ही कोड लिखने से बचने में मदद मिली।

केवल नकारात्मक पक्ष यह है कि आपको वास्तविक सीएसएस लिखने से पहले प्रत्येक रंग के नाम और मूल्य को सूचीबद्ध करना होगा।

// $red, $blue - variables defined in _colours.scss
$colours: 
  'red' $red,
  'blue' $blue;

@each $name, $colour in $colours {
  .button.has-#{$name}-background-color:hover {
    background-color: lighten($colour, 15%);
  }
}

Question 7

डायनामिक वैरिएबल बनाने के लिए SASS में अब तक संभव नहीं है, क्योंकि जब आप sass कमांड चलाते हैं तो आपको एक और वर्जन को जोड़ना / कनेक्ट करना होगा जिसे एक बार पार्स करने की आवश्यकता है।

जैसे ही कमांड चलता है, यह अमान्य सीएसएस के लिए एक त्रुटि फेंक देगा, क्योंकि आपके सभी घोषित चर उत्थापन का पालन करेंगे।

एक बार चलाने के बाद, आप मक्खी पर फिर से चर घोषित नहीं कर सकते

यह जानने के लिए कि मैंने इसे समझा है, यदि निम्नलिखित सही है तो कृपया बताएं:

आप उन चरों को घोषित करना चाहते हैं जहाँ अगला भाग (शब्द) गतिशील है

कुछ इस तरह

$list: 100 200 300;

@each $n in $list {
    $font-$n: normal $n 12px/1 Arial;
}

// should result in something like

$font-100: normal 100 12px/1 Arial;
$font-200: normal 200 12px/1 Arial;
$font-300: normal 300 12px/1 Arial;

// So that we can use it as follows when needed

.span {
    font: $font-200;
    p {
       font: $font-100
    }
}

यदि आप यही चाहते हैं, तो मैं अब तक डरता हूं, यह अनुमति नहीं है