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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ミニプログラムで CSS var 変数を使用する (これにより、js は CSS スタイル プロパティを動的に設定できます)
  • JavaScript がブラウザが CSS 変数をサポートしているかどうかを検出するコード例

<<:  nginx を使用して静的リソース サーバーを構築する方法

>>:  Nginx で CDN サーバーを構築する方法の詳細な説明 (画像とテキスト)

推薦する

Windows での MySQL スケジュールバックアップ スクリプトの実装

Windows サーバーでデータベース データを定期的にバックアップする場合は、Windows タス...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

Linuxファイルシステム操作の実装

この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...

MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決

この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...

https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順

Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...

CentOS7 から CentOS8 にアップグレードする方法 (詳細な手順)

この記事では、具体的な例を使用して、CentOS 7 から CentOS 8 にアップグレードする方...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...

Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

目次スロットなしVue2.x スロットスロット付き名前付きスロットスロット属性なしスロットの簡単なサ...

Pythonは出力をcsv操作に書き込む

以下のように表示されます。 def test_write(self): フィールド=[] field...

Linux スレッド間の同期と排他制御の知識ポイントのまとめ

スレッドが同時に実行される場合、スレッドがリソースを競合してデータの曖昧さが生じるのを防ぐために、重...

JSの基本概念の詳細な紹介

目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...

CSSのclip-pathプロパティを使用して不規則なグラフィックを表示する

clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...

ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります

最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...

MYSQLクエリデータの結果に自動的に番号を付ける方法

序文実際、クエリ中に結果に番号が付けられるこのような状況に遭遇したことは一度もありません。同僚が転職...

vite2.0+vue3 モバイルプロジェクトの詳細な説明

1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...