1

私は、多くの Sass を使用して保守可能で使いやすいコード ベースを作成する HTML ボイラープレートに取り組んでいます。その一部はいくつかの関数です:

// Returns the scale value found at $key.
@function get-type-scale($key) {
    $value: map-get($type-scale, $key);

    @if $value != null {
        @return $value;
    }

    @else {
        @warn "Unfortunately, `#{$key}` is not defined in the `$type-scale` map.";
    }
}

// Returns the line-height value found at $key.
@function get-line-height($key) {
    $value: map-get($line-heights, $key);

    @if $value != null {
        @return $value;
    }

    @else {
        @warn "Unfortunately, `#{$key}` is not defined in the `$line-heights` map.";
    }
}

// etc... I have 2 more functions like this where only the $map changes.

これらの関数は、次のようにいくつかの mixin で呼び出されます。

// Sets font-size and line-height based on the $level.
@mixin set-type($level: 0) {
    font-size: get-type-scale($level);
    line-height: get-line-height($level);
}

これは問題なく機能しますが、関数内で多くのコードを繰り返しているという事実は気に入りません。マップ名をパラメーターとして受け取る汎用関数を作成しようとしましたが、map-get() で補間を使用できません。

関数コードをよりエレガントに、できるだけ DRY にする方法はありますか?

洞察に感謝します。乾杯!

4

2 に答える 2