Bootstrap での LESS の使用
CSS プリプロセッサであるLESSを使用して Bootstrap をカスタマイズおよび拡張し、Bootstrap の CSS の構築に使用される変数、ミックスインなどを活用します。
LESSで構築
なぜ少ないのですか？
Bootstrap は、私たちの良き友人であるAlexis Sellierによって作成されたダイナミック スタイルシート言語である LESS をコアに使用して作成されています。これにより、システムベースの CSS の開発がより速く、より簡単に、より楽しくなります。
何が含まれていますか？
CSS の拡張として、LESS には、変数、再利用可能なコード スニペット用の mixin、単純な数学、ネスト、さらにはカラー関数の演算が含まれています。
変数
CSS での色とピクセル値の管理は、通常はコピー アンド ペーストでいっぱいで、少し面倒です。ただし、LESS ではそうではありません。色またはピクセル値を変数として割り当て、それらを一度変更します。
ミックスイン
通常の古い CSS で作成する必要がある 3 つの境界線の半径の宣言はありますか? 今では、ミックスイン (どこでも再利用できるコードのスニペット) の助けを借りて、1 行にまとめられています。
オペレーション
操作を使用してオンザフライで計算を行うことにより、グリッド、リーディング、およびより柔軟なものを作成します。掛け算、割り算、足し算、引き算を行い、CSS の健全性を高めます。
ブートストラップ変数LESS 変数、その値、および使用ガイドライン
足場とリンク
@bodyBackground |
@white |
ページの背景色 | |
@textColor |
@grayDark |
本文全体、見出しなどのデフォルトのテキスト色 | |
@linkColor |
#08c |
デフォルトのリンク テキストの色 | |
@linkColorHover |
darken(@linkColor, 15%) |
デフォルトのリンク テキスト ホバー カラー |
グリッドシステム
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
タイポグラフィ
@sansFontFamily |
"Helvetica Neue"、Helvetica、Arial、サンセリフ | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", モノスペース | |
@baseFontSize |
13px | ピクセルでなければなりません |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18ピクセル | ピクセルでなければなりません |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
テーブル
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
グレースケール色
@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 |
コンポーネント
ボタン
@btnBackground |
@white |
|
@btnBackgroundHighlight |
darken(@white, 10%) |
|
@btnBorder |
darken(@white, 20%) |
|
@btnPrimaryBackground |
@linkColor |
|
@btnPrimaryBackgroundHighlight |
spin(@btnPrimaryBackground, 15%) |
|
@btnInfoBackground |
#5bc0de |
|
@btnInfoBackgroundHighlight |
#2f96b4 |
|
@btnSuccessBackground |
#62c462 |
|
@btnSuccessBackgroundHighlight |
51a351 |
|
@btnWarningBackground |
lighten(@orange, 15%) |
|
@btnWarningBackgroundHighlight |
@orange |
|
@btnDangerBackground |
#ee5f5b |
|
@btnDangerBackgroundHighlight |
#bd362f |
|
@btnInverseBackground |
@gray |
|
@btnInverseBackgroundHighlight |
@grayDarker |
フォーム
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
フォームの状態とアラート
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
ナビゲーションバー
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
|
@navbarLinkColorActive |
@navbarLinkColorHover |
|
@navbarLinkBackgroundHover |
transparent |
|
@navbarLinkBackgroundActive |
@navbarBackground |
|
@navbarSearchBackground |
lighten(@navbarBackground, 25%) |
|
@navbarSearchBackgroundFocus |
@white |
|
@navbarSearchBorder |
darken(@navbarSearchBackground, 30%) |
|
@navbarSearchPlaceholderColor |
#ccc |
|
@navbarBrandColor |
@navbarLinkColor |
ドロップダウン
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
ヒーローユニット
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
ブートストラップ ミックスイン
ミックスインについて
基本的なミックスイン
基本的な 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 @width |
1行で高さと幅を素早く設定 |
.square() |
@size |
.size()幅と高さを同じ値に設定するために構築します |
.opacity() |
@opacity |
不透明度を整数で設定します (例: "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() |
なし | コンテンツを保持する水平中央のコンテナを作成する |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
n列とxピクセル幅のガターを持つピクセル グリッド システム (コンテナー、行、および列) を生成します。 |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
n列とx % 幅のガターを持つパーセント グリッド システムを生成する |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
inputパディングとボーダーを考慮して、要素のピクセル グリッド システムを生成します。 |
.makeColumn |
@columns: 1, @offset: 0 |
クラスなしで任意divをグリッド列に変換します.span* |
CSS3 プロパティ
| 混入します | パラメーター | 使用法 |
|---|---|---|
.border-radius() |
@radius |
要素の角を丸くします。単一の値またはスペースで区切られた 4 つの値を指定できます |
.box-shadow() |
@shadow |
要素にドロップ シャドウを追加する |
.transition() |
@transition |
CSS3 トランジション効果を追加 (例: all .2s linear) |
.rotate() |
@degrees |
要素をn度回転する |
.scale() |
@ratio |
要素を元のサイズのn倍にスケーリングする |
.translate() |
@x, @y |
x 平面と y 平面で要素を移動する |
.background-clip() |
@clip |
要素の背景を切り取る ( に便利border-radius) |
.background-size() |
@size |
CSS3 を介して背景画像のサイズを制御する |
.box-sizing() |
@boxmodel |
要素のボックス モデルを変更する (例:border-box全幅input) |
.user-select() |
@select |
ページ上のテキストのカーソル選択を制御する |
.backface-visibility() |
@visibility: visible |
CSS 3D 変換の使用時にコンテンツのちらつきを防止する |
.resizable() |
@direction: both |
右と下の要素をサイズ変更可能にする |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
要素のコンテンツで CSS3 列を使用するようにする |
.hyphens() |
@mode: auto |
必要な場合の CSS3 ハイフネーション (を含むword-wrap: break-word) |
背景とグラデーション
| 混入します | パラメーター | 使用法 |
|---|---|---|
#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 コマンド ライン コンパイラ、JSHint、Recess、および uglify-js をグローバルにインストールします。
$ npm install -g less jshint 凹部 uglify-js
インストールしたらmake、bootstrap ディレクトリのルートから実行するだけで準備完了です。
さらに、watchrがインストールされmake watchている場合、bootstrap lib 内のファイルを編集するたびに、bootstrap を自動的に再構築するように実行できます (これは必須ではなく、便利な方法です)。
コマンドライン
Node 経由で LESS コマンド ライン ツールをインストールし、次のコマンドを実行します。
$ lessc ./less/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 にあります。