Переменная интерполяция для свойства медиа-запроса меньше - отсутствует закрытие ")"

Question

Я пытаюсь «перевести» сасс-функцию в меньшую функцию. Вот оригинал SASS один:

@mixin bp($feature, $value) { 
    // Set global device param 
    $media: only screen; 

    // Media queries supported 
    @if $mq-support == true { 

     @media #{$media} and ($feature: $value) { 
      @content; 
     } 

     // Media queries not supported 
    } @else { 

     @if $feature == 'min-width' { 
      @if $value <= $mq-fixed-value { 
       @content; 
      } 
     } @else if $feature == 'max-width' { 
      @if $value >= $mq-fixed-value { 
       @content; 
      } 
     } 

    } 
} 

А вот функция, которую я начал делать меньше, как это кажется каждая декларация не может быть реализована так же, как и в дерзости:

.bp(@feature; @val) when (@mq-support = true) { 
    @med: ~"only screen"; 

    @media @{med} and (@{feature}:@val) { 
     @content; 
    } 
} 

Когда я «м компиляции этого, я получил следующее сообщение об ошибке:

Missing closing ')' on line 15, column 34: 
15  @media @{med} and (@{feature}:@val) { 
16   @content; 

Так эта ошибка, кажется, исходит от закрытия @ {} особенность закрывающей скобки, но после документации и СЕВЕРА l в блогах в Интернете, кажется, что, поскольку версия версии 1.6.0 меньше, интерполяция свойств css - это функция, которая должна работать.

Есть ли у кого-нибудь представление о том, что может быть неправильным здесь? Можно ли использовать переменную как свойство в запросе на медиа?

Возможно, я делаю это совершенно неправильно, но кажется, что mixins guard feature меньше работает не так же, как при использовании SASS и @if, поэтому «перевод» немного отличается.

Спасибо заранее

Себастьен

Answer 1

Интерполяция или с помощью переменных в запросах медиа работают немного по-разному в Less.

• Прежде всего, вы не должны использовать стандартный синтаксис интерполяции (@{med}). Вместо этого это должно быть только @med.
• Далее второе условие также должно быть установлено на переменную, а затем добавлено к медиа-запросу, как и переменная @med, или она должна быть включена как часть самой переменной @med. Я привел образец для обоих подходов ниже.

.bp(@feature; @val) when (@mq-support = true) { 
    @med: ~"only screen and"; 
    @med2: ~"(@{feature}:@{val})"; 
    @media @med @med2{ 
    @content(); 
    } 
} 

или

.bp(@feature; @val) when (@mq-support = true) { 
    @med: ~"only screen and (@{feature}:@{val})"; 
    @media @med { 
    @content(); 
    } 
} 

---

Ниже приведен пример преобразования этого кода Сасс полностью в ее Меньше эквивалент. Меньше не поддерживает @content, как в Меньше, поэтому он должен быть passed as a detached ruleset with the mixin call.

@mq-support: true; 
@mq-fixed-value: 20px; 

.bp(@feature; @val; @content) { 
    & when (@mq-support = true) { 
    @med: ~"only screen and (@{feature}:@{val})"; 
    @media @med { 
     @content(); 
    } 
    } 
    & when not (@mq-support = true) { 
    & when (@feature = min-width) { 
     & when (@val <= @mq-fixed-value){ 
     @content(); 
     } 
    } 
    & when (@feature = max-width) { 
     & when (@val >= @mq-fixed-value){ 
     @content(); 
     } 
    } 
    } 
} 

a{ 
    .bp(max-width, 100px, { color: red; }); 
} 
b{ 
    .bp(min-width, 10px, { color: blue; }); 
}