栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何扩展已动态形成选择器的类/混合

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何扩展已动态形成选择器的类/混合

像这样扩展 动态形成的选择器
(宽松地使用该术语)目前在Less中是不可能的。有一个开放功能要求来支持此功能。直到实施,这里有两个解决方法。

选项1:

.hello
.hello-world
选择器的内容写入单独的Less文件(例如
test.less
),进行编译以获取CSS。为的规则创建另一个文件
.foo
,将编译后的CSS导入为Less文件(使用
(less)
指令),然后
.hello-world
按照您的初衷进行扩展。

无测试:

.hello {  &-world {    color: red;  }}

扩展规则

@import (less) "test.css";.foo {  &:extend(.hello-world);  font-size: 20px;}

编译的CSS:

.hello-world,.foo {  color: red;}.foo {  font-size: 20px;}

该方法之所以可行,是因为在

test.css
导入文件时,选择器已经形成并且不再动态。缺点是它需要一个额外的文件并创建依赖项。


选项2:

写有规则的虚拟选择所有属性需要被应用到

.hello-world
.foo
并扩展它,如:

.dummy{    color: red;}.hello {  &-world:extend(.dummy) {};}.foo:extend(.dummy){  font-size: 20px;}

这会创建一个额外的选择器(虚拟),但差异不大。

注意: 将我的评论添加为答案,以免留下未解决的问题,并且还因为在评论中链接的线程中指定的变通方法不适用于我。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/635383.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号