すべてのSASS/SCSS変数にデフォルトを自動的に追加するには

Question

SASS/SCSSを使用してテーマをimpmlementするには、基本変数からいくつかの変数を派生させたグローバル変数（およびデフォルトのテーマ）を持つファイルをdefault.scssにします。 defaults.cssの前にロードされているSCSSテーマファイル（theme.scss）では、基本テーマカラーを常にオーバーライドし、テーマに固有のいくつかの変数を上書きします。省略された変数については、defaults.scssから値を取得することが期待されますが、$text-color = $basic-color割り当てがある場合、デフォルト値ではなく、テーマから$basic-colorの値を取る必要があります。

/* theme.scss... */ 
$base-color: green; 
/* Some variables may be omitted in some themes 
    to use theme base-color by default. 
    In this theme $text-color is expected to be green. 
    $text-color: teal; 
*/ 
$button-color: black; 

/* default.scss */ 
$base-color: blue   !default; 
$text-color: $base-color !default; 
$button-color: $base-color !default; 

それが正常に動作しますが、私はそこに数百行があると、それはそれはハードの値を読み取ることが可能とdefault.scssの各行に!defaultを追加したくないhttps://jsfiddle.net/ena66ag3/

でこの例を参照してください。 importディレクティブやファイルの一番上にあるいくつかのoptiopnを使って自動的に作成する方法はありますか？

Answer 1

残念ながら、複数の変数の変数フラグを一度に指定することは現在のところsassではサポートされていません。それぞれの行に追加する必要があります。これは、テーマのデフォルトを宣言するための現在のベストプラクティスです。

bootstrap (v4)とfoundation sitesの両方がこのようにしていることがわかります。どちらもSassで構築された尊敬できるフレームワークなので、このルートに進むことをおすすめします。

動的変数名で変数を宣言する方法もありません。この時点で回避する唯一の方法は、既定のフラグを既定のファイルのすべての変数に追加する前処理を行うことですそれを読んだ人からかなり重要な実装の詳細を隠すため、おそらく大きな問題になります。

デフォルトの動作が、言語でサポートされているものをデフォルトフラグなしで使用したい場合は、マップを使用します。それは、基本的なテーマ変数にアクセスするための、やや奇妙なコードにつながるよう

/* 
* In theme.scss 
*/ 
$globals: (
    line-height: 10,    // theme value 
    something-special: 'black', // theme value 
); 

/* 
* In defaults.scss 
*/ 
// Ensure there is an empty globals map if no theme is loaded 
$globals:() !default; 

// Merge theme defaults over the default values 
$globals: map-merge((
    font-size: 1,  // default value 
    line-height: 2, // default value 
), $globals); 

/** 
* Usage 
*/ 
div { 
    font-size: map-get($globals, font-size);    // 1 
    line-height: map-get($globals, line-height);   // 10 
    border-radius: map-get($globals, something-special); // black 
} 

は、しかし、私はこれで行かないでしょう。現在利用可能なオプションを使用すると、すべての行にデフォルトのフラグを付加するのがおそらく最善の策です。