如何使用SASS @for循環將值傳遞給斷點？

我正在嘗試設置一個循環，該循環將爲我定義的每個斷點創建一組類，使用我設置的另一個循環。這些是BP的如何使用SASS @for循環將值傳遞給斷點？

$mobileMedium : 480px; 
$tabletVertical : 768px; 
$desktopNormal : 1024px; 
$desktopWide : 1200px;

這是我的scss。

@each $bpName in "mobileMedium", "tabletVertical", "desktopNormal", "desktopWide"{ 
     @include breakpoint($$bpName) { 
     @include generate("$bpName", "Container", "width"); 
     } 
    }

我希望這樣的事情（例如）：

@media (min-width: 768px) { 
    .tabletVerticalContainer-1_12 { 
    width: 8.33333%; 
    }

但這是終端返回：

error sass/screen.scss (Line 36 of sass/_grid.scss: 
Invalid CSS after "...ude breakpoint(": expected ")", was "$$bpName) {")

我猜它歸結爲我怎麼能結合文本（'$'）和參數中的變量。

任何想法？

來源

2013-09-27 Alexander Fjelldal

你不能做變量名插值，雖然薩斯3.3將引入map功能，您就可以使用來獲得你想要的效果（見https://github.com/nex3/sass/issues/642）。

現在，而不是遍歷字符串列表，嘗試遍歷字符串/變量對列表的列表：

@each $breakpoint in "mobileMedium" $mobileMedium, "tabletVertical" $tabletVertical, "desktopNormal" $desktopNormal, "desktopWide" $desktopWide { 
    @include breakpoint(nth($breakpoint, 2)) { 
     @include generate(nth($breakpoint, 1), "Container", "width"); 
    } 
}

（我不知道是什麼產生混入呢，我想從你的例子中，你想第一個參數是一個字符串雖然。）

來源

2013-09-27 18:36:48 Jackie

如何使用SASS @for循環將值傳遞給斷點？

回答

相關問題