2014-04-25 1 views
2

나는 다음 말대꾸 코드가 있습니다`@ each` 루프가 Sass에서 동적 ID를 선언하겠습니까?

@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 ...

+1

+1 나도 일주일 정도 그것에 대해 궁금이 질문에 정말 관심이 있어요. – jhamPac

+1

[ID를 사용하는 것은 나쁜 습관입니다] (http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/). 레이아웃과 같은 주요 요소와 관련이 없습니다. – LeBen

+0

MR LeBen, 좋은 정보를 주셔서 대단히 감사합니다. 당신의 말은 진실이고 도움이되었습니다 ... 나에 대해 나는이 클래스보다 재사용이 가능하며 더 잘 사용할 수 있기 때문에 이드보다 더 많이 사용합니다 ... 너의 지식을 가져 주셔서 감사합니다 ... 그리고 나는 너를 구독 할 것이다^_^.. –

답변

5

그냥 '을 대체하십시오.' '#'

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

예와 함께 : http://sassmeister.com/gist/11299601

관련 문제