为了账号安全,请及时绑定邮箱和手机立即绑定

在SASS中访问HTML属性值

/ 猿问

在SASS中访问HTML属性值

慕田峪9158850 2019-12-06 10:35:49

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


任何想法将不胜感激。


查看完整描述

2 回答

?
慕盖茨4494581

Sass只是CSS生成器。它实际上并没有与HTML交互,因此您不能将HTML属性用作Sass变量。


但是,CSS可以基于属性进行选择。因此,它可能会比您希望的更长,但您可以执行以下操作


ul[data-count="3"]:after

  content: "There were three items in that list!"

而且我认为,如果您只想限制自己使用最新浏览器的一个子集†,则可以将CSS calc()函数与attr()一起使用,以在基于CSS的计算中使用该属性。但这是非常前沿的。


†老实说,我不知道哪个浏览器的哪个版本已完全实现此目的。我很确定Firefox拥有它,尽管我没有使用过它,而且我对其他浏览器一无所知。无论如何,它肯定没有得到很好的支持。


查看完整回答
反对 回复 2019-12-06
?
皈依舞

似乎您正在尝试获取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% 当只有一个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标签时

有关实时示例,请参考我使用相同技巧进行的演示。希望对您有所帮助。


查看完整回答
反对 回复 2019-12-06
  • 2 回答
  • 0 关注
  • 380 浏览
我要回答
慕课专栏
更多

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信