在Sass中`@ each`循环声明动态id？

Question

我有以下Sass代码：

@each $message_color in red, blue, black {
    .#{$message_color}-font-color{
        color: $message_color;
    }
}

，结果是

/* line 2, ../sass/styles.scss */ 
.red-font-color { color: red; }

/* line 2, ../sass/styles.scss */ 
.blue-font-color { color: blue; }

/* line 2, ../sass/styles.scss */ 
.black-font-color { color: black; }

我现在的问题是，如何创建此结果

/* line 2, ../sass/styles.scss */
#red-font-color { color: red; }

/* line 2, ../sass/styles.scss */
#blue-font-color { color: blue; }

/* line 2, ../sass/styles.scss */
#black-font-color { color: black; }

我需要生成# selector而不是class selector ...

Answer 1

你可以直接替换＆＃39;。＆＃39;用＆＃39;＃＆＃39;

@each $message_color in red, blue, black {
    ##{$message_color}-font-color{
        color: $message_color;
    }
}

示例：http://sassmeister.com/gist/11299601