ヘルパーツールの「一括抽出と置換 less Colours - 複数のテーマ

ビジネスコンテキスト

マルチテーマカスタマイゼーションをサポートするために、プロジェクトが一定の開発段階に達したか、または改造プロジェクトになったが、次のような状況があります：

• lessには多数のカラー値が存在します。
• 多数のモジュールから1つの変数に同じマルチカラーを抽出することは、多くの労力を要し、比較のためには非効率的です；
• 接頭辞を持つクラスクラス空間以下のカラーから関連するカラースタイルを抽出する必要があります；
• ....

色変換を含む上記の要件に基づいて、@zebrateam/auto-complate-colour-variableプラグインがカプセル化されます。

はじめに

[PostCSS] プラグインのカラー変数。 色の値を定義済みの変数に置き換えます。現在、LessとSassをサポートし、複数ファイルの一括置換、定義変数の欠落を検出して自動的に作成します。

依存関係のインストール

グローバルにインストールされたプラグイン。

npm install @zebrateam/auto-complate-color-variable -g

サポートされる機能

カラー変数名を定義するファイル

@link-color: #e67e22;

輸入

.foo {
 color: #e67e22;
}

輸出

.foo {
 color: @link-color;
}

変数の設定

.colorvarrc.jsonサポート設定項目の詳細：

コマンドラインパラメータ

備考: checkMode は任意です、1: 検出します; 0: 検出しません、モードを検出するとき、それは自動的に無変換ファイルを書きません。

プロジェクトアプリケーション

プロジェクトのルート・ディレクトリに.colorvarrc.jsonファイルを作成します：

{
 "variableFiles": ["./config/theme.less"],
 "syntax": "less",
 "autoImport": true,
 "alias": {
 "@": "./config" 
 },
 "base": "src/pages",
 "autoComple": true,
 "usingAlias": "@", 
 "singleQuote": false,
 "supportCssTpl": true
}

コマンドライン

# 検出モード、autoCompleがtrueの場合、変数定義ファイルは自動的に不足変数を作成する
.pcvar --m "**/*.less" --c=1
# 複数のファイルを一括変換する
.pcvar --m "**/*.less"