sass - SASSに「フック」はありますか?

Question

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

後で定義することもできますが (これは素晴らしいことです)、それでもセレクターは複製されます。プレースホルダーが含まれている元のセレクターでプレースホルダーの値のみをレンダリングする方法はありますか?

score 1 · Accepted Answer

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-in の優れた点は、引数を取ることができるため、よく変更されるセレクターをオーバーライドする必要がないことです。

// 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 ミックスインのドキュメント。

score 1 · 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 とまったく同じコードが作成されますが、欠点は、フック可能なクラスごとに空の mixin を定義する必要があり、少し手間がかかることです。(もちろん、これらすべてを_hooks.scssファイルに入れることもできますが、オーバーライドコードが読みにくくなります。

編集: 以下のようにもう 1 つのオプションがあると思います。これにより、被拡張側での入力が少し節約されますが、エクステンダーの標準的な 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最善のアプローチだと感じています。

sass - SASSに「フック」はありますか?

アップデート

2 に答える 2

Related

Reference