Sass “有吗？”；“挂钩”；你在胡说八道吗？

我正在回顾一个用更少的资源构建的前端框架，并注意到一个相当有趣的特性：挂钩。在基本框架中查看以下内容：

.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

是相同的。谢谢

更新

占位符

功能似乎是我发现的最接近的功能：

.panel {
    background:red;
    @extend %hook-panel;
}

%hook-panel {
    color:blue;
}

其呈现为：

.panel {
  background: red; }

.panel {
  color: blue; }

---

并且可以在之后定义（这非常棒），但这仍然复制了选择器。是否只在包含占位符的原始选择器中呈现占位符的值？

SASS有一个类似的工具，名为

mixins

：

//定义mixin
@混合大文本
字体系列：Arial
颜色：#ff0000
//使用它
.页面标题
@包含大文本
填充：10px
//编译CSS
.页面标题{
字体系列：Arial；
颜色：#ff0000；
填充：10px；
}

mix-ins的美妙之处在于它们可以接受参数，因此您不需要覆盖通常更改的选择器：

//定义
@混合性感边框（$color，$width）
边框颜色：$color
边框宽度：$width
边框样式：虚线
//段落通常会有一个性感的蓝色10px虚线边框
P
@包括性感边框（蓝色，10px）
//“plain”类的段落将有一个普通的黑色1px实心边框
p、 朴素的
@包括性感边框（黑色，1件）
边框样式：实心
//编译CSS
p{
边框颜色：蓝色；
边框宽度：10px；
边框样式：虚线；
}
p、 朴素的{
边框颜色：黑色；
边框宽度：1px；
边框样式：实心；
}

---

就我所见，没有确切的映射将LESS行为映射到SASS等价物

您有以下选项：

@extend

.uk-panel-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    @extend .hook-panel-badge;
}

.hook-panel-badge{
    right:auto;
}

导致：

.uk-panel-badge {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1; 
}

.hook-panel-badge, .uk-panel-badge {
      right: auto; 
}

这会产生比同等级别稍高的CSS，因为保留了原始（未钩住）类

@mixin

//theme.scss:

@mixin hook-panel-badge(){
}

@import "hooks";

.uk-panel-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    @include hook-panel-badge;
}

_hooks.scss:

//theme creator can override hooks in here.

@mixin hook-panel-badge(){
    right:auto;
}

这将创建与SASS完全相同的代码，但缺点是需要为每个可挂接类定义一个空白的mixin，这需要花费一些精力。（当然，您可以将这些都放在

\u hooks.scss

文件中，但这会使重写代码更难读取

编辑： 我想还有一个选项，如下所示，它在extendee端节省了一点输入，但对于扩展程序来说，有点太脱离了标准CSS语法。当然，您可以使用部分文件，如

2

@mixin hook($class){
    //generic override.
    @if($class == "uk-panel-badge"){
        right:auto;
    }

    @else if($class== "selector2"){
        //override other classes in this way.
    }

}

.uk-panel-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    @include hook("uk-panel-badge");
}

---

总的来说，我仍然觉得

1

是最好的方法。

嗨，谢谢你的回答。我完全了解mixin（很抱歉没有澄清这一点），但它们的行为似乎与LESS所做的不一样。在LESS示例中，它包含在声明几乎为“如果存在，那么就这样做”之前这使得它成为一个非常容易插入的区域，而mixin是在前面声明的，与LESS的不同，它不能被调用两次（请参见LESS示例如何在初始包含下面有一个start.hook（）{}）？我并不是一个不那么聪明的人，所以我不理解你所追求的东西的细微差别。是的，mixin确实需要提前声明，但你所说的“[mixin]不能被称为两次”是什么意思-这不是使它们可重用的全部要点吗？我指的是mixin的“声明”，但这不会影响这一部分，因为它们需要提前声明。遇到比SASS更简单的部分（如果这是您所追求的工作流程）肯定很奇怪在这方面帮不了你太多忙，我不相信SASS有那种功能，但是……你是否在WordPress中使用SASS？请查看-一个由SASS驱动的开发WP主题的环境。它将简化你的流程，并很好地处理与在SASS和WP之间来回移动相关的许多头痛问题。@Zach使用参数化mixin with正是这样做的。如果您在SASS类中定义了一个属性负载，那么在该类的底部使用

@extend hook class

是否会覆盖冲突的

hook class

属性，即使它们是（某种程度上）声明之后？我假设你在问题中提到了

@extend

，我看到的问题是，我仍然得到了重复的选择器：我明白你的意思。所以SASS行为是保留原始类，但更少地破坏它。不过，在考试中，标记是一样的你给出的例子，使用class

uk面板徽章将产生蓝色背景。唯一的区别是SASS版本的CSS文件会稍微大一些（我们说的是一个非常小的区别）。您是否看到getUikit提供了
.scss
文件和
uikit mixin.scss
，您在博客文章中建议之前需要包含这些文件？如果我以类
.uk alert
为例，它有一个
@include hook-alert（）；
如果使用mixin文件，它将在修改mixin后只在一个css类中编译。非常欣赏这里的不同选项——因此这里的关键区别似乎是继承（我需要在实际包含mixin之前指定覆盖，而不是在实际包含mixin之后）.I，即使使用示例#2，仍然需要将钩子与原始标记分离，因此我不确定该钩子是否有效（在设置值之前，找不到任何覆盖原始mixin的内容）。再次感谢。