@for पाश

Question

मैं एस.ए.एस.एस. सीख रहा हूँ और मैं एक @mixin और इस प्रक्रिया पर आधारित है कि में डेटा का एक संग्रह (एक सरणी) पारित करने के लिए कोशिश कर रहा हूँ में उपयोग के लिए एस.ए.एस.एस. में एक संग्रह (सरणी) बनाएँ। मुसीबत मैं डेटा संरचना को परिभाषित किया गया है @mixin

यहाँ में मान पास करने के आ रही है कुछ छद्म कोड है:

 
.mybox { 
    border-top-right-radius: 9px; 
    border-bottom-left-radius: 9px; 
} 

Answer 1

:

 
@mixin roundcorners($collection) { 

    $collectionLength = length(collection); 

    @for($i from 0 to $collectionLength) { 
     border-#{$collection[$i]}-radius: 9px; 
    } 

} 

.mybox { 

    @include roundcorners(['top-right','bottom-left']); 

} 

वांछित आउटपुट इस होगा SASS के पास सबसे नज़दीकी चीज एक सूची है, जिसे आप @Each निर्देश के साथ पुन: सक्रिय कर सकते हैं, जैसे:

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0) 
    @each $corner in $collection 
    border-#{$corner}-radius: $radius 

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

मैं स्ट्रिंग प्रक्षेप का उपयोग किया है शासन में ही सूची प्रविष्टि के मान को छोड़ - मैं पूरी तरह से यकीन है कि कानूनी है नहीं कर रहा हूँ, लेकिन मैं अपने देव पर नहीं कर रहा हूँ। जांचने के लिए मशीन।

मैंने तर्कों पर डिफ़ॉल्ट मान भी उपयोग किए हैं, जिसका अर्थ है कि आप कस्टम त्रिज्या में जा सकते हैं। यदि आप सूची में किसी भी कोने में पास करते हैं, तो आप पूरी डिफ़ॉल्ट सूची को साफ़ कर देंगे (जो मुझे लगता है कि आप क्या चाहते हैं, लेकिन कुछ पता होना चाहिए)।

एक अलग, सरल करने के लिए जिस तरह से यह हो सकता है: 'असत्य' के बजाय डिफ़ॉल्ट के रूप में 0 का प्रयोग

@include rounded(false, 9px, false, 9px) 

:

@mixin rounded($topLeft:false, $topRight:false, $bottomRight:false, $bottomRight:false) 
    @if $topLeft != false 
    border-top-left-radius: $topLeft 
    @if $topRight != false 
    border-top-right-radius: $topRight 
    @if $bottomRight != false 
    border-bottom-right-radius: $bottomRight 
    @if $topLeft != false 
    border-bottom-left-radius: $topLeft 

चूक सेट करके, आप की तरह इस mixin कॉल कर सकते हैं इसका मतलब है कि आप की आवश्यकता से अधिक त्रिज्या नियम नहीं बनाते हैं। इसका मतलब यह भी है कि यदि आप की जरूरत है तो आप ओवरराइड कर सकते हैं और कोनों को 0 त्रिज्या में वापस सेट कर सकते हैं।

Answer 2

@ बीजमैन I द्वारा प्रदान किए गए कोड का उपयोग करके कुछ वाक्यविन्यास मुद्दों को ठीक करने के बाद निम्नलिखित समाधान तैयार करने में सक्षम था।

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0) { 
    @each $corner in $collection { 
     border-#{$corner}-radius: $radius 
    } 
} 

@include roundcorners((top-right, bottom-left), 9px); 

हालांकि मैं अपना अंतिम समाधान पसंद करता हूं जो मुझे प्रत्येक कोने में अलग-अलग त्रिज्या सौंपने की अनुमति देता है।

Answer 3

इस प्रकार मैंने इसे हल किया और आपको विभिन्न त्रिज्या सेट करने की अनुमति दी।

@mixin border-radius($radius:5px){ 
    @if length($radius) != 1 { 
     $i:1; 
     //covers older modzilla browsers 
     @each $position in (topleft, topright, bottomright, bottomright) { 
      -moz-border-radius-#{$position}:nth($radius, $i); 
      $i:$i+1; 
     } 
     //Covers webkit browsers 
     -webkit-border-radius:nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4); 
     //Standard CSS3 
     border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4); 
    } @else { 
     -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
     border-radius: $radius; 
    } 
} 

आप सभी त्रिज्या एक ही सेट कर सकते हैं इसका मतलब है:

@include border-radius(5px) 

या इस तरह अलग अलग:

@include border-radius((5px, 0, 5px, 0)) 

उम्मीद है कि अपने उत्पन्न सीएसएस संक्षिप्त रखना भी :)