스타일러스 선택기 내에서의 필터링

Question

나는 여러개의 붉은 색이 필요한 .list 요소를 가지고 있습니다. 이 .list 요소 중 .foo 클래스의 글꼴은 더 ​​큰 글꼴이 필요하지만 .bar 글꼴은 작은 글꼴이 필요합니다. .list 세 번을 사용하지 않고이 얻을 수있는 스타일러스있는 방법이 있나요

.list { 
    color: red; 
} 

.list.foo { 
    font-size: 150%; 
} 

.list.bar { 
    font-size: 75%; 
} 

: CSS에서

, 그것의 라인을 따라 것입니까? 나는이 작품을 알고 : 특정 제약 (.foo, .bar)와, .list 요소에 명확 모두가 속한 특정 속성을 추가 할 수 있도록

가

.list 
    color red 

.list.foo 
    font-size 150% 

.list.bar 
    font-size 75% 

내가는 대신 다음과 같은 일을하고 싶습니다. 다음은, 그러나 대신 자손을 선택한다 :

.list 
    color red 

    .foo 
    font-size 150% 

    .bar 
    font-size 75% 

이러한 종류의 구조를 허용 스타일러스의 구문 즉 .list 내부 요소를 필터링하고, 각각의 "분기"에 특정 속성을 적용 할 수 있는가 (.list.foo, .list.bar) ?

Answer 1

스타일러스는 Sass/SCSS 및 LESS과 마찬가지로 이전 중첩 수준 ("부모 선택기")의 선택기를 참조하기 위해 &을 사용합니다. 스타일러스에 대한 Selectors 참조에 나와 있습니다.

내가 전에 스타일러스를 사용하지만,보고하지 않은

경우 당신을 위해 다음과 같은 작품 :

.list 
    color red 

    &.foo 
    font-size 150% 

    &.bar 
    font-size 75%