可變插值媒體查詢屬性在較少 - 丟失關閉「）」

Question

我試圖將一個sass函數「轉化」爲一個較少的函數。 原來這裏是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; 
    } 
} 

當我「M編譯此，我得到了以下錯誤：

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

所以這個錯誤似乎來自閉幕@ {}功能右括號，但以下的文件和Severa的l互聯網上的博客帖子，似乎自1.6.0版本以後，css屬性插值是一個應該起作用的功能。

有沒有人知道這裏可能會出現什麼問題？ 實際上可以在媒體查詢中使用變量作爲屬性嗎？

也許我這樣做是完全錯誤的，但似乎mixins guard feature在更少的工作不完全相同，因爲與SASS和@if條件，所以「翻譯」是有點不同。

預先感謝您

塞巴斯蒂安

Answer 1

插值或使用媒體查詢變量較少的工作稍有不同。

• 首先，你不應該使用正常的插值語法（@{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(); 
    } 
} 

---

下面是該代碼的Sass完全成其不太等效的採樣轉換。少於不支持像@content這樣的Less，所以它應該是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; }); 
}