ホワイトラベルはSASSとCSS変数とのアプリケーションに反応する

ホワイトラベリングは、UI開発のより困難な問題の一つです.そして理由のために.良いニュースは、CSSの変数では、このタスクはずっと扱いやすくなった.そして、より良い、彼らはまた、SASSで使用することができます.このポストでは、CSS変数とSASSを使用してREACTJSアプリケーションでホワイトラベルのサポートのための私のソリューションを見ることができます.

設計書を作る
あなたは巨大な詳細に移動し、それを作るためにプロのデザイナーを得る必要はありません.しかし、いくつかの適切な構造を置く必要があります.あなたのパドル、余白、フォントサイズ、および色を定義します.あなたのウェブサイトのあらゆる部分が異なるパディングを持つならば、あなたはそれを効率的にカスタマイズすることができません.あまりにも多くの変数があります.

プロジェクト設定
この例では、基本的な反応アプリケーションを起動します.

npx create-react-app whitelabel-example-app

また、次のコマンドを実行してSASSサポート用のノードSASSをインストールします.

npm install node-sass

ノードSASSパッケージ(V 5)の最新バージョンで問題がありました.この問題をバージョン4に格下げすることで修正できます.

初期スタイリング
最初のステップは、アプリケーションの名前を変更することです.アプリケーションにCSSファイル.SCSSこの変更により、スタイラス用のサバを使用できます.CSSで動作しますが、どのようにCSS変数がSASSで動作するかを示したいです.名前を変更後、アプリケーションでそのファイルのインポートを修正する必要があります.jsファイル.最後のものは、SASSファイル内のすべてのスタイリングを削除し、アプリケーションのクラスの背景色を定義します.

.App { 
  background: grey;
}

変数を作成する
背景色に対してsass変数を作成することで、上記のコードを改善できました.こうすることで、変更を容易にすることができます.

$main-color: grey;

.App {
  background: $main-color;
}

フォルダの作成
CSS変数の定義はsassファイルでは動作しません.しかし、あなたはそれらを使用することができます.まず最初に、テーマと呼ばれるファイルを作成します.パブリックフォルダにあるCSS.それを使用するには、また、インデックスを更新する必要があります.HTMLファイルを次のコードを先頭に追加します.

<link rel="stylesheet" type="text/css" href="theme.css" id="theme"/>

このファイルを使用しているとき、CSS変数を定義することができます.任意のCSSルールのようにCSS変数を定義しますが、2つのダッシュ記号で前置します.また、ルート擬似セレクタの下に置くのがベストです.

:root {
  --main-color: grey;
}

変数の使用
CSSファイルをリンクしたとき、rootの下で変数を使用できます.変数名を変数の値として使用します.そのアップデートでは、ファイルのアプリ.scssには次のコードがあります.

.App {
  background: var(--main-color);
}

結論
この例で見ることができるのは、1つのCSS変数で制御される1つのバックグラウンドです.そのスケールのアプリケーションでは、大きな違いはありません.より複雑なアプリケーションでは、改善が顕著です.個々のファイルを変更する代わりに、すべての変数を含むトップレベルのCSSを置き換える必要があります.このように、また、複数のテーマを持つことができます.このポストからコードを見つけることができます.
さらに、あなたは私に従って、Git repository、または.