在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 方式可以根据 parent 中的项目数应用条件样式。另外，它很容易用 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%;
}

基本上，这使 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 标签时

有关实时示例，请参阅我使用相同技巧所做的演示。我希望它有帮助。