Angular-CLI：SCSS変数をJavaScriptにインポートする方法

Question

私はカスタムグリッドレイアウトを作成するためにAngular 2コンポーネントを作成しています。 SCSS変数は、_variables.scssというSCSSファイルにあります。 JavaScriptでこれらの変数にアクセスしたいと思います。私はscss_to_jsonのようないくつかのnpmツールを指摘しましたが、それをAngular2プロジェクトでどのように実装するのか分かりません。

$tile-margin: 20px; 
$tile-width: 200px; 
$tile-height: 250px; 

Answer 1

これは、変数の定義と一致する正規表現による結果を渡す、Http.getを使用して、生のSCSSファイルをロードするサービスを作成するのはとても簡単ですが、...

しかし、正直なところ、私は考えますあなたは間違った木を吠え、デザインを再考する必要があります。 scss変数（およびそれを使用するCSSクラス）がコンパイルされ、クライアントで利用可能になっている場合は、なぜ手動でスタイルを適用したいのですか？

あなたのグリッドシステムにマップされた独自のCSSクラスを定義してからバインドするためにホストエレメントclassへのバインディングを設定できないのはなぜですか？ ngClassが指令であるため、少し醜いので、ホスト要素にバインドすることはできませんが、実行可能です。

例として、ブートストラップcol-<sw>-<colspan>形式を取る：

export type ScreenWidth = 'xs' | 'sm' | 'md' | 'lg'; 

@Directive({ 
    selector: `div[gridColumn]`, 
    host: { 
    '[attr.class]': 'hostClasses.join(' ')' 
    }, 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class GridColumn { 
    @Input('gridColumn') screenWidth: ScreenWidth = 'md'; 
    @Input() colSpan: number = 1; 

    constructor(private _host: ElementRef) {} 

    get hostClasses(): Array<string> { 
    let existingClasses = this._host.nativeElement.classList 
      .filter(cls => !/^col-/.test(cls) 
    return [ 
     ...existingClasses, 
     `col-${this.screenWidth}-${colSpan}` 
    ]; 
    } 
} 

使い方は次のようになります。

<div gridColumn="xs" [colSpan]="4"></div> 

正直、とにかく<div class="col-xs-4"></div>と同じ読みやすさについてですので、なぜわざわざどちら？