我正在审查使用LESS构建的前端框架UiKit,并注意到一个非常有趣的功能:钩子。请看以下基础框架内容:
如果你想在主题中覆盖这个功能,比如说你正在编写一个核心文件之外的主题(在编译后出现的文件),那么你需要执行以下操作:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
.hook-panel-badge;
}
.hook-panel-badge() {}
如果你想在主题中覆盖这个功能,比如说你正在编写一个核心文件之外的主题(在编译后出现的文件),那么你需要执行以下操作:
.hook-panel-badge() {
right:auto;
}
因此,实质上看起来您能够覆盖/自定义选择器而不添加其他选择器,因此它使您的标记尽可能小。
SASS中是否有类似的功能?这看起来是一个很棒的功能,我作为主要使用SASS的用户,但我没有发现@extend
是同样的。谢谢!
更新
placeholder
功能似乎是我找到的最接近的东西:
.panel {
background:red;
@extend %hook-panel;
}
%hook-panel {
color:blue;
}
这将呈现为:
.panel {
background: red; }
.panel {
color: blue; }
它们可以在定义后进行定义(非常棒),但这仍然会复制选择器。有没有办法仅在原始选择器中呈现占位符的值,而不是复制整个选择器?
@extend hook-class
,即使它们在某种程度上是在之后声明的,冲突的hook-class
属性是否会被覆盖?我假设是这样的,因为您在问题中提到了@extend
... - Ed_uk-panel-badge
类将产生蓝色背景。唯一的区别是SASS版本的CSS文件会稍微大一些(我们说的是非常小的差异)。 - Ed_.scss
文件和一个uikit-mixin.scss
,需要像你在博客文章中建议的那样先包含它?以.uk-alert
类为例,它有一个@include hook-alert();
。如果你使用mixin文件,它将只编译成一个带有mixin修改的css类。 - Samuel