Bootstrap での LESS の使用
CSS プリプロセッサであるLESSを使用して Bootstrap をカスタマイズおよび拡張し、Bootstrap の CSS の構築に使用される変数、ミックスインなどを活用します。
LESSで構築
なぜ少ないのですか？
Bootstrap は、私たちの親友であるAlexis Sellierによって作成された動的なスタイルシート言語である LESS をコアに使用して作成されています。これにより、システムベースの CSS の開発がより速く、より簡単に、より楽しくなります。
何が含まれていますか？
CSS の拡張として、LESS には、変数、再利用可能なコード スニペット用の mixin、単純な数学、ネスト、さらにはカラー関数の演算が含まれています。
変数
CSS での色とピクセル値の管理は、通常はコピー アンド ペーストでいっぱいで、少し面倒です。ただし、LESS ではそうではありません。色またはピクセル値を変数として割り当て、それらを一度変更します。
ミックスイン
通常の古い CSS で作成する必要がある 3 つの境界線の半径の宣言はありますか? 今では、ミックスイン (どこでも再利用できるコードのスニペット) の助けを借りて、1 行にまとめられています。
オペレーション
操作を使用してオンザフライで計算を行うことにより、グリッド、リーディング、およびより柔軟なものを作成します。掛け算、割り算、足し算、引き算を行い、CSS の健全性を高めます。
ブートストラップ変数LESS 変数、その値、および使用ガイドライン
ハイパーリンク
@linkColor |
#08c | デフォルトのリンク テキストの色 | |
@linkColorHover |
darken(@linkColor, 15%) |
デフォルトのリンク テキスト ホバー カラー |
グリッドシステム
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
タイポグラフィ
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18ピクセル |
グレースケール色
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ええ | |
@white |
#fff |
アクセントカラー
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
コンポーネント
ボタン
@primaryButtonBackground |
@linkColor |
フォーム
@placeholderText |
@grayLight |
ナビゲーションバー
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
フォームの状態とアラート
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
ブートストラップ ミックスイン
ミックスインについて
基本的なミックスイン
基本的な mixin は、基本的に CSS のスニペットのインクルードまたはパーシャルです。それらは CSS クラスのように書かれており、どこからでも呼び出すことができます。
- . 要素{
- . クリアフィックス();
- }
パラメトリック ミックスイン
パラメトリック mixin は基本的な mixin と同じですが、オプションのデフォルト値を持つパラメーター (名前の由来) も受け入れます。
- . 要素{
- . ボーダー-半径( 4px );
- }
自分で簡単に追加
Bootstrap の mixin のほぼすべては mixins.less に格納されています。これは、ツールキットの任意の .less ファイルで mixin を使用できるようにする素晴らしいユーティリティ .less ファイルです。
したがって、先に進んで既存のものを使用するか、必要に応じて独自のものを自由に追加してください。
含まれるミックスイン
ユーティリティ
| 混入します | パラメーター | 使用法 |
|---|---|---|
.clearfix() |
なし | 任意の親に追加して、内部のフロートをクリアします |
.tab-focus() |
なし | Webkit のフォーカス スタイルを適用し、Firefox のアウトラインを丸くする |
.center-block() |
なし | を使用して、ブロックレベルの要素を自動的に中央揃えにしますmargin: auto |
.ie7-inline-block() |
なし | display: inline-blockIE7 のサポートを取得するために、通常のものに加えて使用します |
.size() |
@height: 5px, @width: 5px |
1行で高さと幅を素早く設定 |
.square() |
@size: 5px |
.size()幅と高さを同じ値に設定するために構築します |
.opacity() |
@opacity: 100 |
不透明度を整数で設定します (例: "50" または "75")。 |
フォーム
| 混入します | パラメーター | 使用法 |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder入力のテキストの色を設定する |
タイポグラフィ
| 混入します | パラメーター | 使用法 |
|---|---|---|
#font > #family > .serif() |
なし | 要素にセリフ フォント スタックを使用させる |
#font > #family > .sans-serif() |
なし | 要素にサンセリフ フォント スタックを使用させる |
#font > #family > .monospace() |
なし | 要素にモノスペース フォント スタックを使用させる |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
フォントサイズ、太さ、行送りを簡単に設定 |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
フォント ファミリーをセリフに設定し、サイズ、太さ、行送りを制御します |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
フォント ファミリーをサンセリフに設定し、サイズ、太さ、行送りを制御します |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
フォントファミリーを等幅に設定し、サイズ、太さ、および行送りを制御します |
グリッドシステム
| 混入します | パラメーター | 使用法 |
|---|---|---|
.container-fixed() |
なし | コンテンツを保持するための固定幅 ( で設定@siteWidth) コンテナーを提供する |
.columns() |
@columns: 1 |
任意の数の列にまたがるグリッド列を作成します (デフォルトは 1 列) |
.offset() |
@columns: 1 |
任意の数の列にまたがる左マージンでグリッド列をオフセットします |
.gridColumn() |
なし | グリッド列のように要素をフロートさせる |
CSS3 プロパティ
| 混入します | パラメーター | 使用法 |
|---|---|---|
.border-radius() |
@radius: 5px |
要素の角を丸くします。単一の値またはスペースで区切られた 4 つの値を指定できます |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
要素にドロップ シャドウを追加する |
.transition() |
@transition |
CSS3 トランジション効果を追加 (例: all .2s linear) |
.rotate() |
@degrees |
要素をn度回転する |
.scale() |
@ratio |
要素を元のサイズのn倍にスケーリングします |
.translate() |
@x: 0, @y: 0 |
x 平面と y 平面で要素を移動する |
.background-clip() |
@clip |
要素の背景を切り取る (に便利border-radius) |
.background-size() |
@size |
CSS3 を介して背景画像のサイズを制御する |
.box-sizing() |
@boxmodel |
要素のボックス モデルを変更する (例:border-box全幅input) |
.user-select() |
@select |
ページ上のテキストのカーソル選択を制御する |
.resizable() |
@direction: both |
右と下の要素をサイズ変更可能にする |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
要素のコンテンツで CSS3 列を使用するようにする |
背景とグラデーション
| 混入します | パラメーター | 使用法 |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
要素に半透明の背景色を与える |
.#translucent > .border() |
@color: @white, @alpha: 1 |
要素に半透明の境界線の色を与える |
.#gradient > .vertical() |
@startColor, @endColor |
クロスブラウザーの垂直背景グラデーションを作成する |
.#gradient > .horizontal() |
@startColor, @endColor |
クロスブラウザーの水平背景グラデーションを作成する |
.#gradient > .directional() |
@startColor, @endColor, @deg |
クロスブラウザーの方向背景グラデーションを作成する |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
クロスブラウザーの 3 色の背景グラデーションを作成する |
.#gradient > .radial() |
@innerColor, @outerColor |
クロスブラウザーの放射状背景グラデーションを作成する |
.#gradient > .striped() |
@color, @angle |
クロスブラウザーの縞模様の背景グラデーションを作成する |
.#gradientBar() |
@primaryColor, @secondaryColor |
グラデーションと少し暗い境界線を割り当てるボタンに使用されます |
LESS を使用した Bootstrap のコンパイル
コンパイル用ツール
メイクファイルを含むノード
次のコマンドを実行して、npm で LESS コマンド ライン コンパイラをインストールします。
$ npm install less
インストールしたらmake、bootstrap ディレクトリのルートから実行するだけで準備完了です。
さらに、watchrがインストールされmake watchている場合、bootstrap lib 内のファイルを編集するたびに、bootstrap を自動的に再構築するように実行できます (これは必須ではなく、便利な方法です)。
コマンドライン
Node 経由で LESS コマンド ライン ツールをインストールし、次のコマンドを実行します。
$ lessc ./lib/bootstrap.less > bootstrap.css
--compressバイトを節約しようとしている場合は、そのコマンドに必ず含めてください!
Javascript
最新の Less.jsをダウンロードし、そのパス (および Bootstrap) を に含めます<head>。
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less ファイルを再コンパイルするには、ファイルを保存してページをリロードします。Less.js はそれらをコンパイルし、ローカル ストレージに保存します。
非公式の Mac アプリ
非公式の Mac アプリは、.less ファイルのディレクトリを監視し、監視した .less ファイルを保存するたびにコードをローカル ファイルにコンパイルします。
必要に応じて、自動縮小のアプリの設定と、コンパイルされたファイルが最終的にどのディレクトリに配置されるかを切り替えることができます。
その他の Mac アプリ
噛み砕く
Crunch は、Adobe Air 上に構築された見栄えの良い LESS エディターおよびコンパイラーです。
コードキット
非公式の Mac アプリと同じ人物によって作成された CodeKit は、LESS、SASS、Stylus、CoffeeScript をコンパイルする Mac アプリです。
シンプルレス
LESS ファイルのドラッグ アンド ドロップ コンパイル用の Mac、Linux、および PC アプリ。さらに、ソース コードは GitHub にあります。