SASS中有“钩子”吗？

Question

SASS中有“钩子”吗？

3

我正在审查使用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; }

它们可以在定义后进行定义（非常棒），但这仍然会复制选择器。有没有办法仅在原始选择器中呈现占位符的值，而不是复制整个选择器？

- Zach

如果您在SASS类中定义了大量属性，然后在该类底部使用@extend hook-class，即使它们在某种程度上是在之后声明的，冲突的hook-class属性是否会被覆盖？我假设是这样的，因为您在问题中提到了@extend... - Ed_

我发现实现像你所说的这样做的问题是我仍然会得到重复的选择器：示例。 - Zach

我明白你的意思。所以SASS的行为是保留原始类，但LESS会破坏它。但标记仍然相同-在你给出的例子中，使用uk-panel-badge类将产生蓝色背景。唯一的区别是SASS版本的CSS文件会稍微大一些（我们说的是非常小的差异）。 - Ed_

1

你是否看到getUikit提供了.scss文件和一个uikit-mixin.scss，需要像你在博客文章中建议的那样先包含它？以.uk-alert类为例，它有一个@include hook-alert();。如果你使用mixin文件，它将只编译成一个带有mixin修改的css类。 - Samuel

2个回答

1

SASS有类似的功能，称为mixins:

// Define the mixin
@mixin large-text
    font-family: Arial
    color: #ff0000

// Use it 
.page-title
    @include large-text
    padding: 10px


// Compiled CSS
.page-title {
    font-family: Arial;
    color: #ff0000;
    padding: 10px;
}

混合(mix-ins)的优点在于它们可以接受参数，因此您无需覆盖常用的选择器：

// Define
@mixin sexy-border($color, $width)
    border-color: $color
    border-width: $width
    border-style: dashed


// Paragraphs in general will have a sexy blue 10px dashed border
p
    @include sexy-border(blue, 10px)


// Paragraphs of class "plain" will have a plain old black 1px solid border
p.plain
    @include sexy-border(black, 1px)
    border-style: solid


// Compiled CSS
p {
    border-color: blue;
    border-width: 10px;
    border-style: dashed;
}
p.plain {
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

SASS混合文档。

- Arman H

嗨，感谢您的回答。我完全了解混合（抱歉没有澄清），但它们似乎与LESS所做的不同。在LESS示例中，它在声明之前被包含，几乎像一个“如果存在则执行此操作”，这使得它成为一个相当容易插入的区域，而混合是在之前声明的，并且不像LESS那样不能被调用两次（请看LESS示例如何在初始包含下方有一个起始.hook() {}）？ - Zach

我不是LESS高手，所以我不理解你想要的细微差别。是的，mixin必须事先声明，但是你所说的“[mixin]不能被调用两次”是什么意思 - 难道不是为了使它们可重用而这样做的吗？ - Arman H

我的意思是“mixin的声明”，但这不会影响到那一部分，因为它们需要事先声明。如果你想要这样的工作流程，那么遇到LESS胜过SASS的部分肯定很奇怪。 - Zach

对不起，我在这方面帮不了你太多，我不认为SASS有那种功能，但是... 你在使用SASS和WordPress吗？看看Wordless - 一个基于SASS的开发环境，适用于开发WP主题。它将简化你的流程，并且很好地处理了在SASS和WP之间来回切换时的许多头疼问题。 - Arman H

在我的原始帖子中更新了一个占位符示例，这提供了另一种可能性。快到了。 - Zach

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ed_ · Accepted Answer

据我所知，目前没有将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; 
}

这会产生比LESS等价物更多的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创建了完全相同的代码，但缺点是您需要为每个可挂钩类定义一个空混合，这需要一些工作。（当然，您可以将所有这些放入_hooks.scss文件中，但这将使覆盖代码更难阅读。）

编辑： 我想还有一种选项如下，可以在扩展者的一侧节省一点打字，但是离标准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是最好的方法。