訪問SASS中的HTML屬性值

Question

是否可以訪問SASS中的HTML屬性值？ 我有一行代碼，

<ul id="my_id" data-count="3"> 

其中3是一些jQuery的東西，結果說。我需要3來計算一些CSS。我怎樣才能將它保存爲SASS變量？

另外，有沒有一種方法來計算某個父元素的子元素的數量？說我有這樣的代碼：

<ul id="my_id" data-count="3"> 
    <li>First list item</li> 
    <li>Second list item</li> 
    <li>Third list item</li> 
</ul> 

（正如你可能已經猜到了，的data-count值相匹配的列表項的數量。）SASS能指望列表項，這個數字保存爲一個變量？

任何想法將不勝感激。

Answer 1

Sass只是一個CSS生成器。它並不真正與您的HTML交互，因此您不能將HTML屬性用作Sass變量。

但是，CSS可以根據屬性進行選擇。因此，它會更囉嗦比你可能會喜歡，但你可以做這樣的事情

ul[data-count="3"]:after 
    content: "There were three items in that list!" 

我認爲如果你願意自己只限制的非常最新的瀏覽器^†一個子集，您可以使用CSS calc()函數以及attr()在基於CSS的計算中使用該屬性。但這是非常流行的優勢。

^{†坦率地說，我不知道哪個版本的瀏覽器完全實現了這個功能。我很確定Firefox有它，儘管我沒有使用它，我也不知道其他瀏覽器。無論如何，它當然得不到很好的支持。}

Answer 2

看起來好像你正在嘗試獲取CSS中無序列表中的項目數（可能根據兄弟的數量來改變它們的大小？）。

的確，您不能將數據屬性用作Sass變量。然而，有一種純粹的CSS方式來應用條件樣式，給定父項中的項目數。另外，它很容易在Sass中編寫。

假設您的列表中的項目的最大數量是10，並且您希望根據列表中存在的li標籤的數量計算li標籤的尺寸。

@for $i from 1 through 10 { 
    li:first-child:nth-last-child(#{$i}), 
    li:first-child:nth-last-child(#{$i}) ~ li { 
     width: (100%/$i); 
    } 
} 

這將輸出以下CSS：

li:first-child:nth-last-child(1), 
li:first-child:nth-last-child(1) ~ li { 
    width: 100%; 
} 
li:first-child:nth-last-child(2), 
li:first-child:nth-last-child(2) ~ li { 
    width: 50%; 
} 
li:first-child:nth-last-child(3), 
li:first-child:nth-last-child(3) ~ li { 
    width: 33.33333%; 
} 
li:first-child:nth-last-child(4), 
li:first-child:nth-last-child(4) ~ li { 
    width: 25%; 
} 
li:first-child:nth-last-child(5), 
li:first-child:nth-last-child(5) ~ li { 
    width: 20%; 
} 
li:first-child:nth-last-child(6), 
li:first-child:nth-last-child(6) ~ li { 
    width: 16.66667%; 
} 
li:first-child:nth-last-child(7), 
li:first-child:nth-last-child(7) ~ li { 
    width: 14.28571%; 
} 
li:first-child:nth-last-child(8), 
li:first-child:nth-last-child(8) ~ li { 
    width: 12.5%; 
} 
li:first-child:nth-last-child(9), 
li:first-child:nth-last-child(9) ~ li { 
    width: 11.11111%; 
} 
li:first-child:nth-last-child(10), 
li:first-child:nth-last-child(10) ~ li { 
    width: 10%; 
} 

基本上，這給出了李標籤的寬度：

• 100.0%當僅存在一個李標籤
• 50.00%當有2個標籤時
• 33.33%當有3個李標籤
• 25.00%當有4個李標籤
• 20.00%當有5個李標籤
• 16.66%當有6個李標籤
• 14.28%當有7個李標籤
• 12.50%當有8個李標籤
• 11.11%當有9個李標籤
• 10.00%當有10裏噸ags

舉一個實例，請參考this demo我的確使用了相同的技巧。我希望它有幫助。