web-dev-qa-db-ja.com

Angular SCSSグローバル変数インポート

私はAngularプロジェクトでSCSSに移りたいと思います。これまでSCSSに必要な唯一の用途は変数です。現時点では、CSS変数を使用しています。 styles.cssの:rootでそれらを宣言すると、アプリ内のすべてのコンポーネントのCSSファイルで使用できます。

私の質問は、これがSCSS（グローバルインポート）で可能かどうかです。それは、自分でグローバルにインポートした言語（CSS）から、必要な場所に変数をインポートする必要のあるもの（SCSS）に移行するのは非常に面倒だからです。

何かのより良いバージョンがこれをする必要がある理由について、私は少しがっかりしています。したがって、変数を必要とするすべてのSCSSに変数をインポートする必要がないようにする方法があるはずです。

たとえば、styles.scssで変数を作成し、コンポーネントのスタイルでこれらの変数をインポートせずに使用できるようにします。 --MyVarの:rootなどのCSS変数は、任意のコンポーネントのCSSからアクセスできます。

cssangularsass
12
Paul Kruger

この例を考慮するたびに変数をインポートする必要はありません

theme.scss

$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";

ご覧のとおり、変数のデカールは一度だけで、部分的なsassファイル内で変数を使用できます。

別の方法は、すべての変数を含めて1回インポートした部分的なsassファイルを作成することです

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";
4
malbarmawi

私はあなたがそれを使いたいところどこでもscss変数をインポートする必要はないと思います

ファイルがあるとします

_ variables.scss

$white:#fff;
$black:#000;

その後、main.scss uでこのファイルをインポートできます

main.scss

@import "variables.scss";

_button.scssファイルなどでこれらの変数を使用したいとします

_ button.scss

button{
 color:$black
}

_button.scssファイルにmain.scssファイルをインポートする場合、これらの変数を直接使用できますaftervariable.scss

varibles.scssファイルの後に配置すると、button.scssファイルで変数にアクセスできるようになります

main.scss

@import "variables.scss";
@import "button.scss";

CSS変数については、SCSSを自由に使用できますが、

Sassmeister で次のスニペットを実行してみてください

:root{
  --gridWidth: 45px; 
  --gridHeight: 45px; 
}

.Grid {
    width: var(--gridWidth);
    height: var(--gridHeight);
    border: 1px solid black;
}
2
Gautam Naik