私はLESSを使用してBootstrap 2.0.3で作業しています。大幅にカスタマイズしたいのですが、ライブラリへの変更は頻繁に行われるため、可能な限りソースを変更しないようにしたいと考えています。私はLESSを初めて使用するので、コンパイルが完全にどのように機能するかわかりません。LESSまたはLESSベースのフレームワークを使用するためのベストプラクティスは何ですか？
回答:
私の解決策はjstamと似ていますが、可能な場合はソースファイルに変更を加えません。ブートストラップへの変更が頻繁に行われることを考えると、最新のソースをプルダウンし、変更を別のファイルに保存することで最小限の変更を行えるようにしたいと考えています。もちろん、それは完全に弾丸の証拠ではありません。
bootstrap.lessおよびvariables.lessを親ディレクトリにコピーします。bootstrap.lessをtheme.lessなどの名前に変更します。ディレクトリのディレクトリ構造は次のようになります。
/Website
theme.less
variables.less
/Bootstrap
...bootstrapサブディレクトリを指すように、theme.less内のすべての参照を更新します。variables.lessがブートストラップディレクトリではなく、親から参照されていることを確認します。
...
// CSS Reset
@import "bootstrap/reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins.less";
// Grid system and page structure
@import "bootstrap/scaffolding.less";
@import "bootstrap/grid.less";
@import "bootstrap/layouts.less";...
CSSオーバーライドを、それらが含まれる場所の直後にtheme.lessファイルに追加します。
...
// Components: Nav
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";
// overrides
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
border-radius: 0 0 0 0;
padding: 10px;
}
.nav-tabs, .nav-pills {
text-transform: uppercase;
}
.navbar .nav > li > a {
text-shadow: none;
}
...HTMLページのbootstrap.lessではなく、theme.lessにリンクします。
新しいバージョンが出てくるときはいつでも、あなたの変更は安全でなければなりません。また、新しいバージョンが出るたびに、カスタムブートストラップファイルを比較する必要があります。変数とインポートは変更される場合があります。
これも私が苦労したことです。一方では、自分の色と設定を使用してvariables.lessファイルを高度にカスタマイズします。一方、アップグレードプロセスを簡単にするために、Bootstrapファイルを少し変更したいと思います。
私の解決策（今のところ）は、アドオンLESSファイルを作成しbootstrap.less、変数とミックスインがインポートされた後にファイルに挿入することです。だからこのようなもの：
...
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon
// Grid system and page structure
@import "scaffolding.less";
...このようにして、Bootstrapの色やフォントをリセットしたり、ミックスインを追加したりすることができます。私のコードは別ですが、Bootstrapインポートの残りの部分でコンパイルされます。それは完璧ではありませんが、私にとってはうまくいった一時的なギャップです。
bootstrap.lessた。コアの少ないファイル名が変更された場合、カスタマイズされたファイルVSを取得して多くの行を変更する可能性があるなど...この解決策は、私の最小化されたJSをgruntを使用して再コンパイルしました。カスタマイズは、不適切な!importantステートメントなしで機能します！
私の側から見るtheme.lessと、import という名前のファイルboostrap.lessがあり、そのすぐ下で上書きしています（LESSを使用すると問題があるように見えても、更新する必要のない変数の値は簡単です）。 。
これは、変数のカスタム値が variables.less
その後、theme.less代わりにファイルをコンパイルしますbootstrap.less
例theme.less：
@import "path/to/my/bootstrap.less";
@linkColor: #MyAwesomeColor; はるかに良い（私見）アプローチからヒントを取ることですBootswatchのと呼ばれるgithubのプロジェクトswatchmaker。このプロジェクトは、Webサイトで数十のBootstrapテーマを構築および管理するために特別に調整されています。
Makefileプロジェクトでは、ビルドしますswatchmaker.less（あなたのようなものに名前を変更することができますcustomizations.less）。このファイルには一連のインポートが含まれています。
@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";swatchフォルダーとbootswatch.lessファイルの名前を適切な名前に変更できます。
自分のファイルに影響を与えずにBootstrapをアップグレードできるため、これは理にかなっています。実際、にはMakefile、Bootstrapの最新バージョンをフェッチするコマンドも含まれています。詳細については、プロジェクトページのREADMEを参照してください。
おまけとして、READMEでは、ファイルが変更されたwatchrときにプロジェクトを自動的にビルドするgemをインストールすることも推奨されています.less。
もし（そして場合に限り）あなたが私と同じようにそれを行うことができる時間があれば。私はフレームワークの独自の修正バージョンを保持し、フレームワークを更新するたびにドキュメントを読み、ソースの修正を確認します。
この解決策は一見すると理想的とは言えないかもしれませんが、私にはそうする理由があります。私は1つではなく、多くのフレームワーク、ベストプラクティス、リセット/正規化スタイルシートなどの集まりで作業します。また、更新によって既存のプロジェクトが変更されることはないと思います。
次の理由により、私は自分のカスタムフレームワークで作業しています。
私はジョエルと同じ解決策を見つけました：
カスタムの少ないファイル
上記のように：カスタマイズしているすべてのLessファイルのローカルコピーを作成します。例：「variables-custom.less」、「alerts-custom.less」、「buttons-custom.less」。だから私はいくつかの標準を使用し、独自の追加をすることができます。欠点は、Bootstrapが更新されると、移行が本当に難しいことです。
しかし、他に何かがあります：
スタイルを上書き
ワークフローを探し回っているとき、スタイルを単にオーバーライドするよう提案する人がよくいます。したがって、まず標準のLessファイルをインポートしてから、下部にカスタム宣言を追加します。ここでの利点は次のとおりです。新しいバージョンに更新する方が簡単です。欠点は、コンパイルされたCSSファイルにすべてのオーバーライドが含まれていることです。一部のCSSセレクターは2回定義されています。そのため、ブラウザは実際に何を適用するかを見つけるために、少し手を加える必要があります。それは本当にきれいではありません。
プリプロセッサがそのような二重宣言を解決するのに十分なほど賢くないのはなぜですか。ここに欠けているより良いワークフローはありますか？