在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-countmatches的值与列表项的数量匹配。）SASS可以对列表项进行计数并将该数字保存为变量吗？

任何想法将不胜感激。

Answer 1

似乎您正在尝试获取CSS中无序列表中的项目数量（也许根据同级对象的数量来更改其大小？）。实际上，您不能将数据属性用作Sass变量。但是，给定父项中的项数，有一种纯CSS方法可以应用条件样式。另外，它很容易用Sass编写。假设您列表中的最大项目数为10，并且您要基于列表中li标签的数量来计算li标签的大小。@for $i from 1 through 10 {&nbsp; &nbsp; li:first-child:nth-last-child(#{$i}),&nbsp; &nbsp; li:first-child:nth-last-child(#{$i}) ~ li {&nbsp; &nbsp; &nbsp; &nbsp; width: (100%/$i);&nbsp; &nbsp; }}这将输出以下CSS：li:first-child:nth-last-child(1),li:first-child:nth-last-child(1) ~ li {&nbsp; &nbsp; width: 100%;}li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) ~ li {&nbsp; &nbsp; width: 50%;}li:first-child:nth-last-child(3),li:first-child:nth-last-child(3) ~ li {&nbsp; width: 33.33333%;}li:first-child:nth-last-child(4),li:first-child:nth-last-child(4) ~ li {&nbsp; &nbsp; width: 25%;}li:first-child:nth-last-child(5),li:first-child:nth-last-child(5) ~ li {&nbsp; &nbsp; width: 20%;}li:first-child:nth-last-child(6),li:first-child:nth-last-child(6) ~ li {&nbsp; &nbsp; width: 16.66667%;}li:first-child:nth-last-child(7),li:first-child:nth-last-child(7) ~ li {&nbsp; &nbsp; width: 14.28571%;}li:first-child:nth-last-child(8),li:first-child:nth-last-child(8) ~ li {&nbsp; &nbsp; width: 12.5%;}li:first-child:nth-last-child(9),li:first-child:nth-last-child(9) ~ li {&nbsp; &nbsp; width: 11.11111%;}li:first-child:nth-last-child(10),li:first-child:nth-last-child(10) ~ li {&nbsp; &nbsp; width: 10%;}基本上，这使li标签的宽度为：100.0% 当只有一个li标签时50.00% 当有2个li标签时33.33% 当有3个li标签时25.00% 当有4个li标签时20.00% 当有5个li标签时16.66% 当有6个li标签时14.28% 当有7个li标签时12.50% 当有8个li标签时11.11% 当有9个li标签时10.00% 当有10个li标签时有关实时示例，请参考我使用相同技巧进行的演示。希望对您有所帮助。