迅速で汚れたブートストラップは、実行時にオーバーライドします

Bootstrap 5.2以上は、この記事で説明した方法の解決策を提供しています。したがって、ブートストラップ5.2以降を使用している場合は、CSS変数を直接使用してカスタムオーバーライドを使用できます。

この昔ながらのWebフロントエンドフレームワークであるBootstrapは、他の人に愛されており、一部の人々はそれを軽snしています。どんな見方に関係なく、それは幅広いアプリケーションを備えた強力なUIフレームワークであり、ほとんどの人はその基本を理解し、非常に予測可能な結果を​​もたらします。

Bootstrapには独自のデザイン哲学があります。特定の方法でHTMLを構築し、スタイルを特定の方法で上書きし、特定の方法でコアファイルを構築し、それらをWebサイトに特定の方法で含める必要があります。通常、同僚が悪いブートストラップコードを書いていない限り、これは問題ありませんが、すべてのユースケースをカバーするわけではありません。

Bootstrapはサーバー側で生成される傾向があり、実行時にスタイルを上書きすることを好まない。アプリケーションに何らかの視覚的なテーマ機能を実装する必要がある場合、Bootstrapは、テーマごとに個別のスタイルシートを生成し、必要に応じてスタイルシートを切り替えることを推奨します。ユーザーに事前定義されたテーマを提供している場合、これを行うのに最適な方法です。しかし、ユーザー定義のテーマが必要な場合はどうなりますか？アプリケーションをセットアップしてSASSを実行して新しいスタイルシートをコンパイルしてサーバーに保存できますが、それには多くの作業が必要です。さらに、バックエンドスタッフとDevOpsチームと通信する必要があります。これは、プライマリカラーとセカンダリカラーを交換したい場合は多くの問題になります。

これは私がその時に直面していたものです。

DjangoとVueを使用してマルチユーザーSaaSアプリケーションを構築します。これは、固定レイアウトを備えていますが、各ユーザーアカウントのブランド色を変更し、自動デフォルトの色のテーマを持つこともできます。別の要件は、新しいユーザーを追加するたびにアプリケーションを再展開しないことです。最後に、すべてのバックエンドおよびDevOps開発者は現在他のプロジェクトで忙しいので、これを単独で修正する必要があります。

実行時にSASSをコンパイルしたくないので、スタイルシートを作成してページに注入することができますが、これは色に焦点を当てているため、良い解決策ではありません。コンパイルされたブートストラップスタイルシートは、色の値を明示的な16進値としてレンダリングし、（チェックしたばかり）スタイルシートには23のメインブルーのインスタンスがあります。一次色だけでは、各インスタンスを上書きし、セカンダリカラー、警告色、ハザード色、および変更したい他のすべての慣習と色のために再度標準化する必要があります。それは複雑で、多くの仕事があります。私はそれをしたくありません。

幸いなことに、この新しいアプリケーションはInternet Explorer 11をサポートする必要はありません。つまり、CSS変数を使用できます。また、スタイルシートがロードされ、あらゆる方向に流れ、必要なすべての色を変更した後に定義できます。ブートストラップは、ルート要素の変数の大きなリストを生成するため、これは簡単です。

この時点で、Bootstrapはその値の一部をStyleSheetの変数としてのみレンダリングし、この変数リストは完全にエンドユーザーの使用に対応することを学びました。このリストの変数のほとんどは、スタイルシートの残りの部分では参照されていないため、それらを再定義することは効果がありません。 （ただし、より良いランタイム変数サポートが将来提供される可能性があることは注目に値します。）

したがって、ブートストラップスタイルシートを、静的な色の値ではなくサーバー側で動作できるCSS変数でレンダリングしたいと考えています。これは厳密に不可能です。色変数をCSS変数に設定すると、SASSはコンパイルされません。 SASSにこれを行わせる巧妙なトリック（ここで1つ、もう1つ）がありますが、ブートストラップを分岐する必要があり、アップグレードパスから抜け出すと、私が追加したくない脆弱性が得られます。私が完全に正直に言って、私がこれらのソリューションを実装していない本当の理由は、私のSASSコンパイラと一緒に作業する方法を理解できないからです。しかし、あなたはより良い運を持っているかもしれません。

ここで私の好みのワークフローを説明する価値があると思います。開発マシンでSASSをローカルに実行して、スタイルシートを構築し、コンパイルされたスタイルシートをリポジトリに送信することを好みます。ベストプラクティスの推奨事項は、展開中にStyleSheetをコンパイルする必要がありますが、これは正しいことですが、私は成長し、永続的に理解されているスタートアップのために働いています。私はそれが好きだからSASSを使用していますが、それは明らかに私の仕事のトピックであり、SASSビルドをさまざまな展開パイプラインと統合する時間、能力、または精神的強さはありません。

それはまた、一種の邪悪な自衛です。私たちのフルスタック開発者が私の精巧なスタイルに連絡して、彼らが望むものを何でも書き始めることを望んでいません。良い！彼らは私に助けを求めることしかできませんでした、そしてそれはまさに私が望んだ方法でした。

これはすべて、StyleSheetを内部の変数でレンダリングできない場合、 StyleSheetをコンパイルした後、スタイルシートに注入することを妨げることはできません。

検索と交換の力を目撃してください！

私たちがしなければならないのは、ブートストラップに移動して、交換したい色を見つけることです。これは、コンパイルされたスタイルシートの上部にあるルートスタイルにあります。

 <code>:root { --bs-blue: #002E6D; --bs-indigo: #6610F2; // ... other variables }</code>

たとえば、昔ながらのブートストラップブルーである-bs-primaryの値を取得します。 Gulpを使用してStyleSheetsをコンパイルしているので、gulpfile.jsのSASSタスク関数を見てみましょう。

 var gulp = require（ 'gulp'）;
var sass = require（ 'gulp-sass'）（require（ 'sass'））;
var sourcemaps = require（ 'gulp-sourcemaps'）;
var gulpreplace = require（ 'gulp-replace'）;

function sasscompile（）{
  return gulp.src（ 'static/sass/project.scss'）
    .pipe（sourcemaps.init（））
    .pipe（sass（{outputStyle： 'Expanded'}））
    .pipe（sourcemaps.write（ '。'））
    .pipe（gulpreplace（/＃002e6d/ig、 'var（ -  ct-primary）'））
    .pipe（gulp.dest（ 'static/css/'））;
}
exports.sass = sasscompile;

StyleSheetをコンパイルしてから表示します。

 ：根 {
  -bs-blue：var（ -  ct-primary）;
  -bs-indigo：＃6610f2;
  // ...その他の変数
}

素晴らしい、わかりました、私たちは今、青を表すために変数値を必要とする完全なスタイルシートを持っています。メイン色と「青」の両方を変更することに注意してください。これは微妙なテクニックではありません。私はそれを速くてラフと呼びますが、必要な場合はより細かい粒子の色の交換コントロールを取得するのはかなり簡単です。たとえば、「青」と「メイン」を個別の値として保持したい場合は、SASSに移動して、$ Blueと$のSASS変数を異なる値に再定義する場合は、必要に応じて個別に交換できます。

次に、アプリケーションの新しいデフォルト変数値を定義する必要があります。 HTMLヘッダーでこれを行うのは非常に簡単です：

<link href="/static/css/project.css" rel="stylesheet">
<style>
  :root {
    --ct-primary: #002E6D;
  }
</style>

それを実行すると、すべてが表示されます。青である必要があるものはすべて青です。このプロセスを数回繰り返すと、ブートストラップスタイルシートの多くの色を突然制御できます。これらは、私がユーザーに提供するために選択した変数と、デフォルトの色の値です。

 -ct-primary：＃002e6d;
-ct-primary-hover：＃00275d;
// ...その他の変数

今、楽しみが始まります！ここから、必要に応じてこれらのデフォルト値を直接操作するか、デフォルト値の下に2番目のルートスタイルを追加して、必要な色のみを上書きすることができます。または、私のように、ユーザープロファイルにテキストフィールドを入れて、次のようなルートスタイルをタイトルに出力し、必要なものを上書きします。ほら、スタイルシートを再コンパイルしたり、夢中になったりすることなく、実行時にブートストラップをオーバーライドできます。

これは確かにエレガントなソリューションではありませんが、開発者が何年も解決しようとしてきた非常に具体的なユースケースを解決します。そして、これは、ブートストラップが実行時に変数を簡単に上書きできるようにすることを決定する前に、私にとって非常に効率的なソリューションであることが証明されています。

以上が迅速で汚れたブートストラップは、実行時にオーバーライドしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。