3

我正在审查UiKit，一个用 LESS 构建的前端框架，并注意到一个相当有趣的特性：钩子。在基本框架中查看以下内容：

.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; }

并且可以在之后定义（这很棒），但这仍然会复制选择器。无论如何只在它包含的原始选择器中呈现占位符的值？

4

2 回答 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 混合文档。

于 2013-09-01T20:54:35.553 回答
1

据我所知，没有将 LESS 行为精确映射到 SASS 等价物。

您有以下选择：

  1. @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，因为保留了原始（未挂钩）类。

  2. @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，这有点费力。（您当然可以将这些都放在_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是最好的方法。

于 2013-09-02T10:47:15.230 回答