2016-07-21 22 views
1

Ich versuche, mit SASS auf das vorherige Element in einer Liste zuzugreifen, so dass ich meine Variable $ itemWidthIncrement auf den Wert der vorherigen Artikel hinzufügen kann und somit für jedes Element ein Inkrement von 3px hat :SASS - vorherige Artikelbreite erhalten und Variable hinzufügen

$totalItems: 12; 
$itemWidthIncrement: 3px; 
$itemMarginIncrement: 1px; 

@for $i from 1 through $totalItems { 
    .item-:nth-child(#{$i}) { 
     float: if($i % 2 == 0, left, right); 
     width:/*get previous item here*/ + $itemWidthIncrement; 
    } 
} 

Ist dies mit SASS machbar oder komme ich nicht in der richtigen Weise an?

Antwort

2

Try this - halten eine $currentWidth Variable und erhöhen als notwendig:

$totalItems: 12; 
$itemWidthIncrement: 3px; 
$itemMarginIncrement: 1px; 
$currentWidth: 1px; 

@for $i from 1 through $totalItems { 
    .item-:nth-child(#{$i}) { 
     float: if($i % 2 == 0, left, right); 
     width: $currentWidth; 
    } 
    $currentWidth: $currentWidth + $itemWidthIncrement; 
} 
+0

Fast! - Wie mache ich den ersten Gegenstand bei 1 beginnen? –

+0

Bearbeitete meine Antwort. –