Bootstrap での LESS の使用

CSS プリプロセッサであるLESSを使用して Bootstrap をカスタマイズおよび拡張し、Bootstrap の CSS の構築に使用される変数、ミックスインなどを活用します。

なぜ少ないのですか?

Bootstrap は、私たちの良き友人であるAlexis Sellierによって作成されたダイナミック スタイルシート言語である LESS をコアに使用して作成されています。これにより、システムベースの CSS の開発がより速く、より簡単に、より楽しくなります。

何が含まれていますか?

CSS の拡張として、LESS には、変数、再利用可能なコード スニペット用の mixin、単純な数学、ネスト、さらにはカラー関数の演算が含まれています。

もっと詳しく知る

少ないCSS

詳細については、 http://lesscss.org/の公式 Web サイトにアクセスしてください。

変数

CSS での色とピクセル値の管理は、通常はコピー アンド ペーストでいっぱいで、少し面倒です。ただし、LESS ではそうではありません。色またはピクセル値を変数として割り当て、それらを一度変更します。

ミックスイン

通常の古い CSS で作成する必要がある 3 つの境界線の半径の宣言はありますか? 今では、ミックスイン (どこでも再利用できるコードのスニペット) の助けを借りて、1 行にまとめられています。

オペレーション

操作を使用してオンザフライで計算を行うことにより、グリッド、リーディング、およびより柔軟なものを作成します。掛け算、割り算、足し算、引き算を行い、CSS の健全性を高めます。

足場とリンク

@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 クラスのように書かれており、どこからでも呼び出すことができます。

  1. . 要素{
  2. . クリアフィックス();
  3. }

パラメトリック ミックスイン

パラメトリック mixin は基本的な mixin と同じですが、オプションのデフォルト値を持つパラメーター (名前の由来) も受け入れます。

  1. . 要素{
  2. . ボーダー-半径( 4px );
  3. }

自分で簡単に追加

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 グラデーションと少し暗い境界線を割り当てるボタンに使用されます
注: CSS を変更して GitHub にプル リクエストを送信する場合は 、これらのいずれかの方法で CSS を再コンパイルする 必要があります。

コンパイル用ツール

メイクファイルを含むノード

次のコマンドを実行して、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 にあります