访问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我的确使用了相同的技巧。我希望它有帮助。