2017-11-17 16 views
0

믹스 인을 사용하여 일부 스타일러스 코드를 줄이려고합니다. 특정 경우에 매개 변수로 클래스가 필요합니다. 우리는 다음을 얻었습니다 :Stylus의 mixin에 매개 변수로 클래스를 전달할 수 있습니까?

.parent:hover .child 
    color: lighten(red, -25%) 

.child 
    color red 

두 클래스를 매개 변수로 사용하는 믹스 인을 갖고 싶습니다.

문서에서 길을 찾을 수 없습니다. ((

답변

1

당신은 보간이를 얻을 수 있습니다

/* Stylus */ 
 

 
.box { 
 
\t height: 2rem; 
 
\t width: @height; 
 
\t background-color: blue; 
 
\t padding: 1rem; 
 
} 
 

 
.red-box { 
 
\t background-color: red; 
 
} 
 

 
$blockColor(parentClass, childClass) { 
 
\t {parentClass} { 
 
\t \t background-color: green; 
 
\t \t 
 
\t \t {childClass} { 
 
\t \t \t background-color: yellow; 
 
\t \t } 
 
\t } 
 
} \t 
 
\t \t 
 
$blockColor('.box', '.red-box');
<div class="box"> 
 
\t <div class="box red-box"></div> 
 
</div>

: codepen에서 https://codepen.io/webdevdani/pen/POVLpr

코드 예제 : 여기

http://stylus-lang.com/docs/interpolation.html가 codepen 예입니다