덜 믹스를 동적으로 호출하십시오.

Question

어떻게 믹스 인을 동적으로 호출합니까?

유스 케이스는 스타일 가이드를 생성 할 수 있습니다 :

// The mixin which should be called 
.typography-xs(){ 
    font-family: Arial; 
    font-size: 16px; 
    line-height: 22px; 
} 

// The mixin which tries to call typography-xs 
.typography-demo(@typographyName, @mixinName) { 
    @{typographyName} { 
    &:before{content: '@{typographyName}';} 
    // Calling the mixin dynamically 
    @mixinName(); 
    } 
} 

// Example call of .typograhpy-demo 
.typography-demo(xs, typography-xs); 

덜 CSS로 모두 같은 동적 호출 할 수 있습니까?

Answer 1

현재 원하는대로 동적으로 호출 할 수 없습니다.

.typography(xl){ 
    font-family: Arial; 
    font-size: 32px; 
    line-height: 44px; 
} 

.typography(times){ 
    font-family: 'Times New Roman'; 
    font-size: 16px; 
    line-height: 22px; 
} 

지금 당신이 패턴 xl를 호출 할 수 있습니다 : 당신은 다음과 같은 다른 패턴을 만들 수 있습니다, 패턴 매칭을 사용

// The mixin which should be called 
.typography(xs){ 
    font-family: Arial; 
    font-size: 16px; 
    line-height: 22px; 
} 

// The mixin which tries to call typography-xs 
.typography-demo(@typographyName) { 
    @{typographyName} { 
    &:before{content: '@{typographyName}';} 
    // Calling the mixin dynamically 
    .typography(@typographyName); 
    } 
} 

// Example call of .typograhpy-demo 
.typography-demo(xs); 

: 당신은, 그러나, 약간 다르게, pattern matching를 사용하므로처럼 설정할 수 있습니다 또는 times을 입력하고 코드를 생성하십시오. 기본적으로 하이픈 (예 : -xs) 다음에 사용할 타이포그래피 그룹을 구별하고 하이픈을 제거하고 해당 이름을 패턴으로 사용하여 믹스를 일치시킵니다.

.typography-demo(@typographyName, @selector: ~".") { 
    @{selector}@{typographyName} { 
    &:before{content: '@{typographyName}';} 
    // Calling the mixin dynamically 
    .typography(@typographyName); 
    } 
} 

는 기본적으로 클래스를 생성하여이 방법을하지만, ID 또는 최대 어떤 선택 문자열로 만들어 질 수 :

또한, 나는 @{typographyName}과 같이 전에 선택을 넣는 방법을 추가 할 수 @{typographyName}.