gpt4 book ai didi

css - 如何使用 CSS 预处理器将扩展样式应用于不同类名的子选择器?

转载 作者:太空宇宙 更新时间:2023-11-04 09:13:25 24 4
gpt4 key购买 nike

我需要为 Bootstrap 类名添加前缀。我不是说使用 .my-prefix .bs-class 作为包装器,我的意思是实际为 BS classNames 添加前缀,例如; .my-bs-class.

我探索过以编程方式(使用 Gulp 进程)执行此操作,但是一些选择器对于我来说安全转换有点复杂,更不用说处理混合复杂性了。

所以我想知道如何使用 LESS 功能扩展 BS,而对于简单的用例,这很好用,例如;

// BS
.btn {
color:red;
}
// Prefixed BS
.my-btn {
&:extend(.btn);
}

对嵌套选择器做同样的事情并没有像我希望的那样工作,我怀疑它不会。

使用此代码笔:http://codepen.io/davewallace/pen/MJrMVj你可以看到我希望发生的事情的一个简单示例,但是 CSS 输出是:

.btn-group .btn,
.ui-btn-group .btn {
color: red;
}

相对于:

.btn-group .btn,
.ui-btn-group .ui-btn {
color: red;
}

我正在努力实现的目标是否可能,如果可能,如何实现?

注意:我对为 BS 添加前缀的替代方法持开放态度,但是修改 BS 源代码所产生的技术债务是最不可取的,除非它是最小的。

编辑:我已经将这个问题扩大到包括任何 CSS 预处理器,以便不局限于 LESS,如果另一种技术可以实现的话。

最佳答案

Nofix for this,所以我的回答正式包括“切换到支持前缀和组件隔离的框架”;我们选择了 UIKit。

关于css - 如何使用 CSS 预处理器将扩展样式应用于不同类名的子选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41949241/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com