Sass @each 变量插值
Posted
技术标签:
【中文标题】Sass @each 变量插值【英文标题】:Sass @each variable interpolation [duplicate] 【发布时间】:2012-10-09 20:11:54 【问题描述】:在我的最新网站中,我正努力使用 Sass 功能让我的生活更轻松。
我正在编写一些简单的错误框样式,并认为使用每个样式都会简化它们。
我有以下几点:
$message-box-types: 错误成功正常
@each $type in $message-box-types
%#$type-box
@extend %message-box
border-color: $message-#$type
color: $message-#$type
background-color: lighten($message-#$type, 20%)
错误用 $message-#$type 标识这两行
我之前尝试编写的 @each 语句也有类似的问题,但最终忽略了它并从头开始写它,因为我认为这是 Sass 无法处理的。
有人有什么想法吗?
尼尔
【问题讨论】:
【参考方案1】:有了Maptastic Maple (v3.3),你可以在这里使用一些简单的地图功能
$message-box-types:
foo #ccc,
bar #ddd
@each $type, $color in $message-box-types
%#$type-box
@extend %message-box
border-color: $color
color: $color
background-color: lighten($color, 20%)
【讨论】:
以上是关于Sass @each 变量插值的主要内容,如果未能解决你的问题,请参考以下文章