변수이 덜 사용하여 사이트를 구축 I'mn 처음이 아닌 단위 값을

Question

를 반환하고 가장 아래의 코드에 의해 기술 문제가 발생했습니다

@section-row-padding-size-xs: 30px; 
@section-row-padding-size-sm: 50px; 
@section-row-padding-size-md: 100px; 
@section-row-padding-size-lg: 140px; 

.section-row-padding(@size) { 
    @padding-size: ~"@{section-row-padding-size-@{size}}"; 

    .section-row { 
     padding: @padding-size 0; 

     &.quarter-padding-top { 
      padding-top: @padding-size * 0.25; 
     } 

     &.quarter-padding-bottom { 
       padding-bottom: @padding-size * 0.25; 
     } 

     &.half-padding-top { 
      padding-top: @padding-size * 0.5; 
     } 

     &.half-padding-bottom { 
      padding-bottom: @padding-size * 0.5; 
     } 

     &.three-quarters-padding-top { 
      padding-top: @padding-size * 0.75; 
     } 

     &.three-quarters-padding-bottom { 
      padding-bottom: @padding-size * 0.75; 
     } 
    } 
} 

이 모든 코드가 출력되어 수행을 미디어 쿼리에 사용할 오른쪽 패딩 크기

lg, md, sm 및 xs 인수를 사용하여 .section-row-padding()을 호출하면 적절한 패딩 크기가 출력되어야합니다.

이 문제는 @ 패딩 크기가 px 단위로 해석되지 않고 문자열로 인해 발생하기 때문에 발생합니다. 몇 가지 보간 방법을 시도했지만 그 중 아무 것도 작동하지 않습니다. isnumber(@padding-size)은 false를 출력하고 istring(@padding-size)은 true를 출력합니다. @padding-size + 0px도 작동하지 않습니다. 잘못된 유형의 작업입니다.

내가 빠진 것이 있습니까?

시간과 답변에 감사드립니다.

Answer 1

중첩 된 보간 즉 ~"@{section-row-padding-size-@{size}}"은 Less에서 공식적으로 지원되지 않습니다. (현재 버전에서는 작동하지만 나중에는 언제든지 작동하지 않을 수 있습니다.) 당신이 원하는 것을 달성하기 위해

올바른 방법은 다음과 같습니다

.section-row-padding(@size) { 
    @var-name: "section-row-padding-size-@{size}"; 
    @padding-size: @@var-name; 
    padding: (@padding-size * 2); 
} 

이하 :

.section-row-padding(@size) { 
    @padding-size: "section-row-padding-size-@{size}"; 
    padding: (@@padding-size * 2); 
} 

이 @@ 의미를 "variable references"를 참조하십시오.

이 문제는 @padding-size이 px 단위로 해석되지 않고 문자열로 해석되어 발생합니다.

정확히. ~""을 사용하는 것은 컴파일러에게 "이 값을 해석하지 말고, 어떤 값을 가진 문자열 일뿐입니다."라고 말하는 것과 같습니다. 따라서 귀하의 예제에서 ~"@{section-row-padding-size-@{size}}"에 의해 반환 된 값의 유형은 숫자가 아니며 산술 연산 (따라서 : "유효하지 않은 유형의 연산")과 함께 사용할 수 없습니다.

("~"" 피해야한다 이유 가능한"에 대한 몇 가지 링크 : 1, 2, 3, 4 등).