Sass @each变量内插 [英] Sass @each variable interpolation

问题描述

我正在写一些简单的错误框样式和想法。我在我最新的网站，我试图做一个巨大的努力，使用Sass功能，

我有以下这些：

$ message-box-types ：错误成功正常

  @each $ type $ message-box-types 
％＃{$ type}框
 @extend％message-box 
 border-color：$ message  - ＃{$ type} 
 color：$ message  - ＃{$ type} 
 background-color：lighten （$ message  - ＃{$ type}，20％）
  

- ＃{$ type}

我有一个类似的问题，我试图写一个以前的@each语句，但最终忽略它，认为这是Sass无法处理的。

任何人都有什么想法？

Neil

解决方案

使用 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％）
  

In my newest site I am trying to make a massive effort to use Sass features to make my life easier.

I am writing some simple error box styles and thought that using each would simplify them a bit.

I have the following:

$message-box-types: error success normal

@each $type in $message-box-types
  %#{$type}-box
    @extend %message-box
    border-color: $message-#{$type}
    color: $message-#{$type}
    background-color: lighten($message-#{$type}, 20%)

The errors identify both lines with $message-#{$type}

I had a similar issue with a previous @each statement I was trying to write but ended up ignoring it and writing it out in scratch as I thought it was something Sass couldn't handle.

Anyone have any ideas?

Neil

解决方案

With Maptastic Maple (v3.3), you can use some simple map functions here

$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变量内插的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！