संलग्न सामग्री ब्लॉक में मिश्रित घोषणा के अंदर से एक चर पारित करना?

Question

रूबी में, आप आसानी से एक चर एक विधि के अंदर से जुड़ी कोड ब्लॉक में पारित कर सकते हैं:

=my-mixin 
    @for $i from 1 to 8 
    .grid-#{$i} 
     @content 

+my-mixin 
    color: nth("red green blue orange yellow brown black purple", $i) 

इस कोड को जीता:

def mymethod 
    (1..10).each { |e| yield(e * 10) } # Passes a number to associated block 
end 

mymethod { |i| puts "Here comes #{i}" } # Outputs the number received from the method 

मैं एस.ए.एस.एस. mixin में एक ही बात करना चाहते हैं काम नहीं करते क्योंकि $ i को मिक्सीन घोषणा के अंदर घोषित किया गया है और बाहर नहीं देखा जा सकता है, जहां मिश्रण का उपयोग किया जाता है। :(

तो ... मैं कैसे चर mixin घोषणा के अंदर घोषित लाभ उठाते हैं?

जब मैं एक ग्रिड ढांचे और मीडिया के प्रश्नों के साथ काम करते हैं, मैं बुरी तरह से इस कार्यक्षमता की जरूरत है। वर्तमान में मैं अंदर क्या है नकल करने के लिए है mixin घोषणा हर बार मैं इसे की जरूरत है, सूखी नियम का उल्लंघन करने।

युपीडी 2013-01-24

यहाँ एक वास्तविक जीवन उदाहरण है।

मैं एक mixi है n कि breakpoints के माध्यम से चक्र और हर ब्रेकप्वाइंट के लिए एक बार प्रदान की कोड लागू होता है:

=apply-to-each-bp 
    @each $bp in $bp-list 
    +at-breakpoint($bp) // This is from Susy gem 
     @content 

जब मैं इस mixin मैं @content अंदर इस $ बीपी मान का उपयोग करने के लिए है का उपयोग करें। यह इस तरह हो सकता है:

// Applies to all direct children of container 
.container > * 
    display: inline-block 

// Applies to all direct children of container, 
// if container does not have the .with-gutters class 
.container:not(.with-gutters) > * 
    +apply-to-each-bp 
    width: 100%/$bp 

// Applies to all direct children of container, 
// if container has the .with-gutters class 
.container.with-gutters > * 
    +apply-to-each-bp 
    $block-to-margin-ratio: 0.2 
    $width: 100%/($bp * (1 + $block-to-margin-ratio) - $block-to-margin-ratio) 
    width: $width 
    margin-right: $width * $block-to-margin-ratio 

    &:nth-child(#{$bp}) 
     margin-right: 0 

लेकिन यह काम नहीं करेगा, क्योंकि $ बीपी का मूल्य @content के अंदर उपलब्ध नहीं है।

मिश्रण को कॉल करने से पहले चर को घोषित करने से मदद नहीं मिलेगी, क्योंकि @content को एक बार और पहले मिलाकर मिलाया जाता है।

1. एक तदर्थ mixin घोषित,
2. , चक्र लिखने सूखी सिद्धांत का उल्लंघन:

इसके बजाय, हर बार मुझे लगता है कि जरूरत है, मैं दो बदसूरत जांघों क्या करना है

// Each of the following mixins is mentioned in the code only once. 
=without-gutters($bp) 
    width: 100%/$bp 

=with-gutters($bp) 
    $block-to-margin-ratio: 0.2 
    $width: 100%/($bp * (1 + $block-to-margin-ratio) - $block-to-margin-ratio) 
    width: $width 
    margin-right: $width * $block-to-margin-ratio 

    &:nth-child(#{$bp}) 
    margin-right: 0 

// Applies to all direct children of container 
.container > * 
    display: inline-block 

// Applies to all direct children of container, 
// if container does not have the .with-gutters class 
.container:not(.with-gutters) > * 
    @each $bp in $bp-list 
    +at-breakpoint($bp) // This is from Susy gem 
     +without-gutters($bp) 

// Applies to all direct children of container, 
// if container has the .with-gutters class 
.container.with-gutters > * 
    @each $bp in $bp-list // Duplicate code! :(
    +at-breakpoint($bp) // Violates the DRY principle. 
     +with-gutters($bp) 

तो, सवाल यह है: क्या इस रूबी शैली को करने का कोई तरीका है?

Answer 1

तो यह वर्तमान में सास में अनुपलब्ध है।

सास मुद्दे कतार में एक प्रासंगिक टिकट है: https://github.com/nex3/sass/issues/871 यह नियोजित राज्य में है लेकिन शायद कम से कम Sass 4.0 तक इसे नहीं बनाएगा।

Answer 2

सास में चर स्कोप उनके लिए है। वे ब्लॉक वे में बनाया गया में ही दिखाई रहे हैं आप चर के भीतर और mixin के बाहर से पहुंचा होना चाहते हैं, तो यह वैश्विक क्षेत्र में परिभाषित किया जाना है:। आप के रूप में जब तक

$var: 0; 

@mixin test { 
    $var: $var + 1; 
    color: red; 
} 

.test { 
    $var: 5; 
    @include test; 
    @debug $var; // DEBUG: 6 
} 

बहुत लंबे समय तक $var की स्थिति परवाह न करें, यह आपके उद्देश्यों के लिए ठीक काम करना चाहिए।

आपके उदाहरण के लिए, यह काम नहीं करेगा क्योंकि ऐसा लगता है कि @content पहले संसाधित किया गया है।

@mixin test($properties...) { 
    @for $i from 1 to 8 { 
     .grid-#{$i} { 
      @each $p in $properties { 
       $list: nth($p, 2); 
       @if length($list) > 1 { 
        #{nth($p, 1)}: nth($list, $i); 
       } @else { 
        #{nth($p, 1)}: $list; 
       } 
      } 
      @content; 
     } 
    } 
} 

.test { 
    @include test(color (red green blue orange yellow brown black purple)); 
} 

उत्पन्न सीएसएस:: क्या आप की जरूरत एक mixin कि अलग ढंग से लिखा है है

.test .grid-1 { 
    color: red; 
} 

.test .grid-2 { 
    color: green; 
} 

.test .grid-3 { 
    color: blue; 
} 

.test .grid-4 { 
    color: orange; 
} 

.test .grid-5 { 
    color: yellow; 
} 

.test .grid-6 { 
    color: brown; 
} 

.test .grid-7 { 
    color: black; 
} 

इस तरह का mixin तर्क के किसी भी संख्या खिलाया जा सकता है और फिर भी आप @content उपयोग करने के लिए यदि आप चाहें तो अनुमति देता है।

Answer 3

मैंने स्वयं इस समस्या में भाग लिया है और AFAIK यह एसएएसएस में वर्तमान सीमा है।