12

是否可以在 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 可以计算列表项并将该数字保存为变量吗？

任何想法将不胜感激。

4

2 回答 2

14

Sass 只是一个 CSS 生成器。它不会真正与您的 HTML 交互，因此您不能将 HTML 属性用作 Sass 变量。

但是，CSS 可以根据属性进行选择。所以它会比你想要的更冗长，但你可以做类似的事情

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

而且我认为，如果您愿意将自己仅限于最新浏览器的子集†</sup>，您可以使用 CSScalc()函数以及attr()在基于 CSS 的计算中使用属性。但这是非常前沿的。

† 老实说，我不知道哪些浏览器的版本已经完全实现了这一点。我很确定 Firefox 有它，虽然我没有使用过它，而且我不知道其他浏览器。无论如何，它肯定没有得到很好的支持。

于 2012-11-21T20:47:42.400 回答
5

似乎您正试图在 CSS 中获取无序列表中的项目数量（也许根据兄弟姐妹的数量来改变它们的大小？）。

实际上，您不能将数据属性用作 Sass 变量。但是，给定 parent 中的项目数，有一种纯 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%当只有一个 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 标签时

对于一个活生生的例子，请参考我使用相同技巧做的这个演示。我希望它有所帮助。

于 2013-02-19T14:46:26.187 回答