JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法

:export キーワードを使用して、js オブジェクトを less/scss ファイルにエクスポートします。

$メニューテキスト:#bfcbd9;
$メニューアクティブテキスト:#409EFF;
$サブメニューアクティブテキスト:#f4f4f5;

// $メニューBg:#304156;
$メニューBg:#304156;
$menuHover:#263445;

$サブメニューBg:#1f2d3d;
$サブメニューホバー:#001528;

$backWhite:#ffffff;

$サイドバーの幅: 210px;

：輸出 {
  メニューテキスト: $menuText;
  メニューアクティブテキスト: $menuActiveText;
  サブメニューアクティブテキスト: $subMenuActiveText;
  メニュー背景: $menuBg;
  メニューホバー: $menuHover;
  サブメニューBg: $subMenuBg;
  サブメニューホバー: $subMenuHover;
  サイドバーの幅: $sideBarWidth;
  背景白: $backWhite;
}

必要な js ファイルまたはモジュールで参照します。

'index.scss' からスタイルをインポートします
console.log(スタイル.menuText)

vueファイル

'index.scss' からスタイルをインポートします
エクスポートデフォルト{
    計算:{
        スタイル（）{
            戻りスタイル
        }
    }
}

実施原則

Webpack: css-loader と組み合わせて、プロジェクトで CSS モジュールを有効にします。

CSS モジュール: CSS モジュールは、スタイルのインポートとエクスポートの問題を解決するために内部的に ICSS を使用します。これらは、新しく追加された 2 つの疑似クラス:import と :export に対応します。

付録: export javascript キーワード

Javascript キーワード (予約語) は、Javascript 言語で特定の意味を持ち、Javascript 構文の一部となる単語を指します。 Javascript キーワードは変数名や関数名として使用できません。 Javascript キーワードを変数名または関数名として使用すると、Javascript の読み込みプロセス中にコンパイル エラーが発生します。

Javascript キーワード リスト:

break、delete、function、return、typeof
case、do、if、switch、var
catch、else、in、this、void
continue、false、instanceof、throw、while
デバッガー、最終的に、新しい、true、
デフォルト、for、null、try

Javascript の将来のキーワード リスト:

抽象、double、goto、ネイティブ、静的
ブール、列挙、実装、パッケージ、スーパー
バイト、エクスポート、インポート、プライベート、同期
char、extends、int、protected、throws
クラス、final、インターフェース、public、transient
const、float、long、short、volatile

要約する

JS で CSS 変数を使用する方法についての記事はこれで終わりです。JS で CSS 変数を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。