2013-02-28 6 views
47

के साथ मैं सोच रहा था कि क्या आप @each loop के लिए तत्व अनुक्रमणिका प्राप्त कर सकते हैं।@each loop इंडेक्स

मेरे पास निम्न कोड है, लेकिन मैं सोच रहा था कि $i चर ऐसा करने का सबसे अच्छा तरीका था।

वर्तमान कोड:

सभी की
$i: 0; 
$refcolors: #55A46A, #9BD385, #D9EA79, #E4EE77, #F2E975, #F2D368, #F0AB55, #ED7943, #EA4E38, #E80D19; 

@each $c in $refcolors { 
    $i: $i + 1; 
    #cr-#{$i} strong { 
     background:$c; 
    } 
} 

उत्तर

70

पहले, @each समारोह कम्पास से, लेकिन सास से नहीं है।


अपने प्रश्न, यह एक प्रत्येक पाश के साथ नहीं किया जा सकता उत्तर देने के लिए, लेकिन यह एक @for लूप में बदलने के लिए, यह कर सकते हैं जो आसान है:

@for $i from 1 through length($refcolors) { 
    $c: nth($refcolors, $i); 

    // ... do something fancy with $c 
} 
+0

मीठा। धन्यवाद: डी – ignacioricci

+9

आईएमएचओ, 'प्रत्येक' का उपयोग करते समय, एसएएस लेखकों को स्वचालित रूप से '$ idx' चर बनाया जाना चाहिए जो इंडेक्स के रूप में उपयोग किया जाएगा। यह बहुत उपयोगी है। – vsync

40

इस जवाब को अद्यतन करने के लिए: हाँ आप @each पाश के साथ इस लक्ष्य को हासिल कर सकते हैं:

$colors-list: #111 #222 #333 #444 #555; 

@each $current-color in $colors-list { 
    $i: index($colors-list, $current-color); 
    .stuff-#{$i} { 
     color: $current-color; 
    } 
} 

स्रोत: http://12devs.co.uk/articles/handy-advanced-sass/

+11

दुर्भाग्यवश यह दृष्टिकोण टूट जाता है यदि $ रंग-सूची में 2 समान मान होते हैं (उदा। # 111, # 222, # 111, # 333)। इस मामले में इंडेक्स ($ रंग-सूची, # 111) हमेशा 1 लौटाएगा, इसलिए आपके $ i मान 1, 2, 1, 4 के रूप में बाहर आ जाएंगे। अन्यथा शर्म की बात यह है कि यह एक बहुत ही साफ दृष्टिकोण है :) – Joel

+1

यह भी 1 है सामान्य 0-इंडेक्स के बजाय -इंडेक्स किया गया –

4

कभी-कभी आपको किसी सरणी या मानचित्र का उपयोग करने की आवश्यकता हो सकती है।

$list = (('sub1item1', 'sub1item2'), ('sub2item1', 'sub2item2')); 

मैंने पाया कि यह सबसे आसान था सिर्फ एक वस्तु के लिए इसे परिवर्तित करने के लिए:

$list: (
    'name': 'thao', 
    'age': 25, 
    'gender': 'f' 
); 

और का उपयोग $i प्राप्त करने के लिए निम्नलिखित:

@each $property, $value in $list { 
    $i: index(($list), ($property $value)); 
मैं यानी सरणियों की एक सरणी, था

एसएएस टीम ने निम्नलिखित की भी सिफारिश की, हालांकि मैं अधिक प्रशंसक नहीं हूं:

[...] उपर्युक्त कोड यह है कि मैं इसे कैसे संबोधित करना चाहता हूं। इसे रेंज ($ एन) जैसे सास फ़ंक्शन जोड़कर अधिक कुशल बनाया जा सकता है। तो वह सीमा (10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)। तो हो सकता है की गणना:

@function enumerate($list-or-map) { 
    @return zip($list-or-map, range(length($list-or-map)); 
} 

link.

संबंधित मुद्दे