말대꾸는 문자열로 변수를 표시하는 것은 내가 다음과 같은 변수를 생성하는 사스에서 루프를 실행하기 위해 노력하고있어

Question

는 :

$size-xs: 1em; 
$size-sm: 1.1em; 
$size-md: 1.2em; 
$size-lg: 1.3em; 

이것은 내가 지금까지 무엇을 가지고 :

$size-base:1em; 
$size-increment:0.1em; 

$size-list: "xs","sm","md","lg"; 

@each $value-size in $size-list { 
    $size-#{$value-size}:#{$i}; 
    $i:$size-base + $size-increment; 
} 

내가 겪고있는 문제는 $ size- 변수로 해석되지만, 그렇지 않다. 생성하고 싶은 변수 집합의 근원이다. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까?

도움을 주셔서 감사합니다.

Answer 1

변수 이름을 그렇게 보간 할 수 없기 때문에 오류가 발생했습니다. (사용자가 정의되기 전에 $i도 사용하려고했습니다.)

하지만 스타일을 지정할 요소의 이름을 직접 지정할 수 있습니다. 예를 들면 다음과 같습니다.

$size-base: 1em; 
$size-increment: 0.1em; 
$size-list: "xs", "sm", "md", "lg"; 

@each $value-size in $size-list { 
    $size-base: $size-base + $size-increment; 
    .#{$value-size} { 
    font-size: $size-base; 
    } 
} 

요소 대신 무언지 자리 표시자를 출력 한 다음 필요할 때 확장 할 수도 있습니다.

$size-base: 1em; 
$size-increment: 0.1em; 
$size-list: "%xs", "%sm", "%md", "%lg"; 

@each $value-size in $size-list { 
    $size-base: $size-base + $size-increment; 
    #{$value-size} { 
    font-size: $size-base; 
    } 
} 

h2 { 
    @extend %lg; 
} 

이것은 h2 스타일 선언 만 컴파일합니다.

http://sassmeister.com/gist/a400ded59756a814c47e의 예를 참조하십시오.