Переменная интерполяции строк возвращает не стоимости единицы товара

Question

Это первый раз I'mn создание сайта с помощью LESS и столкнулся с проблемой, лучше всего описываемую ниже код:

@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; 
     } 
    } 
} 

Все это делает код выводит правые размеры заполнения для использования в медиа-запросах.

Любой вызов .section-row-padding() либо с аргументом lg, md, sm и xs должен выдавать соответствующие размеры заполнения.

Проблема возникает из-за того, что размер @ padding не задан как единица px, а скорее как строка. Я пробовал несколько методов интерполяции, но никто из них не работает. isnumber(@padding-size) выходы false и istring(@padding-size) выходы true. @padding-size + 0px также не работает, он говорит об операции с недопустимым типом.

Есть ли что-нибудь, что я пропустил?

Спасибо за ваше время и ответ!

Answer 1

Вложенная интерполяция, то есть ~"@{section-row-padding-size-@{size}}" официально не поддерживается в Меньше. (Он работает в текущих версиях, но может прекратить работать в любой момент).

Правильный способ добиться того, что вы хотите:

.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 и т.д.).