सास मिक्सिन: कॉलबैक या बदलें @content

Question

मुझे नहीं पता कि सैस ऐसा करने में सक्षम है, लेकिन यह पूछने में कोई दिक्कत नहीं है।

समस्या

असल में मैं तीन रंगों पैटर्न है कि आवेदन के कई वर्गों में दोहराया जाता है, blue, green और orange की तरह है। कभी-कभी क्या परिवर्तन background-color, या घटक के border-color आदि

मैं क्या सोचा है ... कभी-कभी पाठ चाइल्ड तत्व के color है?

1. सामग्री के अंदर एक स्ट्रिंग पैटर्न को बदलें।

.my-class { 
    @include colorize { 
    background-color: _COLOR_; 

    .button { 
     border-color: _COLOR_; 
     color: _COLOR_; 
    } 
    } 
} 

2.@content के लिए एक कॉलबैक चर प्रदान करना।

// This is just a concept, IT DOESN'T WORK. 
@mixin colorize { 
    $colors: blue, green, orange; 

    @each $colors in $color { 
    // ... 
    @content($color); // <-- The Magic?! 
    // ... 
    } 
} 

// Usage 
@include colorize { 
    background-color: $color; 
} 

मैं ऐसे समाधानों को लागू करने की कोशिश की, लेकिन सफलता नहीं मिली।

यह करने के बजाय

...

मेरी वैकल्पिक हल नीचे देखें यह आंशिक रूप से काम कर रहे प्राप्त करने के लिए:

@mixin colorize($properties) { 
    $colors: blue, green, orange; 

    @for $index from 1 through length($colors) { 
    &:nth-child(#{length($colors)}n+#{$index}) { 
     @each $property in $properties { 
     #{$property}: #{nth($colors, $index)}; 
     } 
    } 
    } 
} 

आप इस mixin उपयोग कर सकते हैं कि जिस तरह से:

.some-class { 
    @include colorize(background-color); 
} 

.some-class:nth-child(3n+1) { 
    background-color: blue; 
} 


.some-class:nth-child(3n+2) { 
    background-color: green; 
} 


.some-class:nth-child(3n+3) { 
    background-color: orange; 
} 

समस्या:क्या उत्पादन आएगा? खैर, मैं इसे बाल चयनकर्ताओं के साथ उपयोग नहीं कर सकता।

---

उपरोक्त जानकारी के आधार पर, इस मामले के लिए कुछ जादू समाधान है?

Answer 1

मुझे लगता है कि मैंने यह समझ लिया कि आपका क्या मतलब है; यह एक छोटे (बहुत) गंदा है, लेकिन यह आप क्या चाहते हैं करना चाहिए:

@mixin colorize($parentProperties,$childMaps) { 
    $colors: blue, green, orange; 

    @for $index from 1 through length($colors) { 
     &:#{nth($colors, $index)} { 
      @each $property in $parentProperties { 
       #{$property}: #{nth($colors, $index)}; 
      } 
     } 

     @each $mapped in $childMaps { 
      $elem: nth($mapped,1); 
      $properties: nth($mapped,2); 
      #{$elem}:nth-child(#{length($colors)}n+#{$index}) { 
       @each $property in $properties { 
        #{$property}: #{nth($colors, $index)}; 
       } 
      } 
     } 
    } 
} 

यह पता बारी मानेंगे:

/* -------------- USAGE ------------------*/ 

.some-class { 
    @include colorize(
     background-color,(        //Parent properties 
      (button, background-color),    //Child, (properties) 
      (span,  (background-color,border-color)) //Child, (properties) 
     ) 
    ); 
} 

/* --------------- OUTPUT ----------------*/ 

.some-class:nth-child(3n+1) { 
    background-color: blue; 
} 
.some-class button:nth-child(3n+1) { 
    background-color: blue; 
} 
.some-class span:nth-child(3n+1) { 
    background-color: blue; 
    border-color: blue; 
} 
.some-class:nth-child(3n+2) { 
    background-color: green; 
} 
.some-class button:nth-child(3n+2) { 
    background-color: green; 
} 
.some-class span:nth-child(3n+2) { 
    background-color: green; 
    border-color: green; 
} 
.some-class:nth-child(3n+3) { 
    background-color: orange; 
} 
.some-class button:nth-child(3n+3) { 
    background-color: orange; 
} 
.some-class span:nth-child(3n+3) { 
    background-color: orange; 
    border-color: orange; 
} 

आशा है कि है कि आप :)

के लिए क्या देख रहे