如何覆盖SCSS for循环中的整数步骤（从*到*）

SCSS：（须藤代码）

@for $i from 0 through 10 (increment:0.5) { 
    .bottom-#{$i} { 
    bottom: 1em * $i; 
    } 
}

CSS输出：

.bottom-0 { 
    bottom: 0em; 
} 

.bottom-05 { 
    bottom: 0.5em; 
} 

.bottom-1 { 
    bottom: 1em; 
} 

.bottom-15 { 
    bottom: 1.5em; 
} 

.bottom-2 { 
    bottom: 2em; 
}

我基本上是想for循环通过迭代到十增量为0.5，就像在输出的东西上面的css代码块，没有包含在类名中的.5，因为它将它视为嵌套类。

来源

2015-11-19 Harry L

@cimmanon - 这是松散的关系到你这个标记对作为一个重复的问题。请重新考虑。 –

我会重新考虑的唯一事情是我对重复的选择。 http://stackoverflow.com/questions/18802148/sass-for-directive-how-to-use-steps-in-loops – cimmanon

@cimmanon - 那些是整数的步骤。关闭，但没有雪茄，当然？！我在谈论半数，安全地表示在班级名称中，而不使用。（明显的原因，哈哈！） –

完成它！哈克，但它的工作原理：

SCSS：

@for $i from 0 through 10 { // double 10 if you want to go to ten! 

    $iletter: $i*10/2; 
    @if $iletter < 10 { 
    $iletter: "0" + $iletter 
    } 

    $i: $i/2; 
    .bottom-#{$iletter} { 
    bottom: 1em * $i; 
    } 
}

CSS输出：

.bottom-00 { 
    bottom: 0em; 
} 

.bottom-05 { 
    bottom: 0.5em; 
} 

.bottom-10 { 
    bottom: 1em; 
} 

.bottom-15 { 
    bottom: 1.5em; 
} 

.bottom-20 { 
    bottom: 2em; 
} 

.bottom-25 { 
    bottom: 2.5em; 
} 

.bottom-30 { 
    bottom: 3em; 
} 

.bottom-35 { 
    bottom: 3.5em; 
} 

.bottom-40 { 
    bottom: 4em; 
} 

.bottom-45 { 
    bottom: 4.5em; 
} 

.bottom-50 { 
    bottom: 5em; 
}

来源

2015-11-19 18:21:58

如何覆盖SCSS for循环中的整数步骤（从到）

回答

如何覆盖SCSS for循环中的整数步骤（从*到*）

回答

相关问题

如何覆盖SCSS for循环中的整数步骤（从到）