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%;
}

基本上，这使li标签的宽度为：

100.0%
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标签时

有关实例，请参阅this demo我使用相同的技巧。我希望它有所帮助。

在SASS中访问HTML属性值

2 个答案: