在SASS中使用選擇器的名稱作爲變量的值

我想採用我正在應用樣式的div的ID並設置一個變量以將該ID作爲其值。這是薩斯能做的嗎？所以選擇器#eleven會將變量的值設置爲「十一」。在SASS中使用選擇器的名稱作爲變量的值

這是當前的代碼。首先，我使用一個混合：

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) { 
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; 
    & h2, & p {margin-left: $iconmargin;} 
}

這就是我所說的混入：

#eleven { 
    @include left-icon(#de4c3f,eleven,$defaulticonmargin); 
}

所以，當我使用了混入有一個背景顏色，文件名的一部分，邊緣值（已添加到某些子選擇器）的值。您可以看到$bgurl變量與選擇器的名稱相匹配。基本上我想自動化，以便將$bgurl設置爲來自ID的文本字符串（並且散列符號已被去除）。

原因是我將有幾十個具有相同基本模式但獨特背景圖像的盒子，在我的腦海中，似乎最簡單的做法是使用ID名稱保存每個PNG作爲文件名，然後讓薩斯匹配起來。我可以按照我在這裏所做的那樣做，並把價值放在手中，但似乎Sass可能會這樣做，所以我寧願花時間去正確地學習Sass，而不是做一半的工作。

希望是有道理的，而不是一個荒謬愚蠢的問題 - 我會承認（你不會感到驚訝）我是一個非常原始的薩斯招聘，但我想我可以從這個問題中學習。

來源

2014-06-07 user3717789

對我們而言有何反饋？ –

是的，只是回來了。 Pezholio的解決方案正是我所需要的。我也會看看你的實施情況，但我不完全清楚它是如何回答問題的 - 這是我的知識侷限性，希望通過嘗試使用版本 – user3717789

嘗試是這樣的：

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) { 
    ##{$bgurl} { 
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; 
& h2, & p {margin-left: $iconmargin;} 
    } 
} 

@include left-icon(#de4c3f,eleven,10px);

基本上，你可以在任何地方使用添加變量薩斯的interpolation syntax

來源

2014-06-07 14:40:56 Pezholio

來了解更多關於SASS的信息。這非常酷，謝謝回覆。對於任何新來SASS的人都試圖將其貫徹到最後，值得澄清的是，這需要我概述問題的方式進行一點改變：在我的場景中，我試圖將選擇器名稱傳遞給變量在@include中，在我們實際上命名選擇器的時候，當我們調用include的混合時 - 它實現了效果，但我的問題的邏輯是回到前面：O） – user3717789

你可以做什麼，而不是使它更簡單的是所謂的b11使用ID或類（或bg11，字母是任意的）

$colorArray = [ #de4c3f, ... ]; 
@for $i from $min through $max { 
    .b#{$i} { 
     @include left-icon(colorArray[$i], $i, $defaulticonmargin); 
    } 
}

然後更改背景名稱以匹配新的格式，如images/#11.png或可以使用this process將字符串轉換爲int

這樣，您就可以遞歸定義所有的元素！

來源

2014-06-07 14:54:21

在SASS中使用選擇器的名稱作爲變量的值

回答

相關問題