ブートストラップ v4 sass design_html/css_WEB-ITnose の解釈-htmlチュートリアル-php.cn

ブートストラップ v4 sass design_html/css_WEB-ITnose の解釈

WBOY

リリース： 2016-06-21 08:47:20

オリジナル

1113 人が閲覧しました

bootstrap v4 sass 設計の解釈

まず第一に、bootstrap が v3 の less から v4 の sass に変更された理由は 100,000 個ありますが、今のところここではリストしません。別の記事を書く予定です（less、sass、postcss）。

第二に、この記事は主に次の目標に焦点を当てています:

bootstrap 4 の Sass 設計全体を理解する
bootstrap v4 のスタイルの使用方法と変更方法
ブートストラップの Sass 設計を改善する方法

最後に、特定のコードの実装の詳細には立ち入らず、アーキテクチャ全体の分析のみを行います

見ていきましょうinto bootstrap v4 sass

1. Bootstrap の sass ファイルはすべて scss ディレクトリに配置されているのはなぜですか?これは主に sass 構文と scss 構文の違いに関係します。scss 構文は css に近いため、より一般的で広く使用されています。詳細については、sass 構文

を参照してください。 2. scss ファイルには、_variables.scss のようにアンダースコアで始まるファイルと、bootstrap.scss のようにアンダースコアなしで始まるファイルの 2 種類があります。 2 つは、前者はインポートされたファイルがデフォルトでは対応する CSS ファイルにコンパイルされないことを意味し、後者は対応する CSS ファイルをコンパイルすることを意味します。したがって、2 つのファイル _a.scss と b.scss がある場合、デフォルトのコンパイル結果は b.css ファイルのみになります。 b が _a.scss のスタイルを使用したい場合は、インポート関数 @import a (インポートされたファイルはアンダースコアとファイル接尾辞を省略できます)。詳細については、sass 構文

を参照してください。 3. scss ディレクトリ全体をコンパイルすると、bootstrap.css、bootstrap-flex.css、bootstrap-reboot.css、bootstrap の 4 つの CSS ファイルを取得できます。 -grid .css の場合、これら 4 つの CSS スタイルは、次の 4 つの scss ファイルから生成されます。

bootstrap-reboot はリセットスタイル、bootstrap-grid はグリッドスタイルである場合、これら 2 つは自由な別のスタイルとみなすことができます。シナリオブートストラップスタイル全体を使用したくないが、リセットまたはグリッドシステムを使用したい場合は、これら 2 つを直接使用できます。
bootstrap と bootstrap-flex の違いは、前者は従来のレイアウト方式を使用するのに対し、後者は flex 方式を使用するため、実際の状況に応じて使用することを選択できることです。。上の図からわかるように、bootstrap.scss をインポートする前に、bootstrap-flex.scss は $enable-flex: true

をリセットします。 4. bootstrap.scss を開くと、さまざまな内容が表示されます。ファイルがインポートされ、全体が 6 つの大きなブロックに分割されます。

変数 & ミックスイン: 変数とミックスインファイルを紹介します。その中で、_mixin.scss ファイルは、 mixin ディレクトリファイル
reset: 正規化ファイルと印刷ファイルを紹介します。
core: グリッド、フォーム、テーブル、ボタンなどの基本的なスタイルファイルを紹介します。
component: 紹介します。 nav 、card、breadcrumb などのコンポーネントファイル。
component js: モーダル、ツールチップなど、js コントロールを必要とするコンポーネントファイルを導入します。
utility: いくつかのクラスファイルを導入します。サイト全体で、clearfix、center-block などのいくつかの共通クラスが含まれています。

bootstrap v4 のスタイルの使用方法と変更方法

詳しい方もちろん、sass に詳しくない場合でも、sass を直接使用できます。コンパイルされた bootstrap.css はディレクトリ dist/css にあります。

まず CSS を直接使用する方法について説明します。

について説明します。ブートストラップスタイルを変更する必要がある場合は、style.css などの別のスタイルシートを作成して、ブートストラップスタイルをオーバーライドできます。 bootstrap.css スタイルシートを直接変更して開くことは推奨されません。

破壊的なものについては、満足できないものを修正するだけです。簡単な方法はありません。非破壊的な使用方法の変更について説明します。次のメソッドを使用できます。

すべてのブートストラップ scss ファイルをブートストラップディレクトリに配置します。

style.scss コードは次のとおりです。 >

scss    bootstrap 目录 (原先bootstrap中scss目录所有文件)        bootstrap.scss        ...        mixin目录            ...    _custom-variables.scss (自定义的变量，或覆盖bootstrap的变量)    _custom-mixin.scss（自定义的mixin）    style.scss

ログイン後にコピー

もちろん、コードに執着している場合は、常に未使用のスタイルを削除したくなるので、bootstrap.scss をもう一度取り出して確認するだけでよいのではないでしょうか。不要なスタイルを削除してインポートしますか？将来的にアップグレードを検討する場合は、新しいファイルを作成し、bootstrap.scss の方法に従って必要なものをインポートすると良いでしょう。コンポーネントスタイルについては、必要な場合はインポートし、必要ない場合はインポートしないでください。ただし、コアとユーティリティのスタイルには注意する必要があります。これらの基本スタイルはコンポーネントで使用される可能性があるためです

@charset "UTF-8";// 导入文件@import "custom-variables";@import "custom-mixin";@import "bootstrap/bootstrap";

ログイン後にコピー

Bootstrap v4 の設計で Sass を改善する方法

個人的な実践経験の観点から、Bootstrap v4 には次の欠陥があると感じます: (個人的な意見にすぎません)

すべてのコンポーネントファイルをコンポーネントディレクトリに配置し、ユーティリティファイルをユーティリティディレクトリに配置するなど、ディレクトリをさらに計画することができます。これにより、少し散在して少し乱雑に見えるようになります。

% デザインはありません。個人的には、% デザインはスタイル宣言、特に互換性のある短いコードを組み合わせるのに非常に効果的だと思います。

変数とミックスインの機能を統合した scss ファイルを提供できるため、新しいスタイルファイルを簡単に作成し、この統合されたファイルを直接インポートできます

コンポーネントの変数変数ファイルに配置するのではなく、コンポーネントのみが使用するため、それぞれのコンポーネント scss に配置できることを明記する必要があります。これにより、変数ファイルが肥大化します

もあります。多くの mixin デザイン、同じサイズでも mixin ファイルがあり、少し多すぎるように感じます

上記の見解は、私の個人的な Sass ベーシックライブラリサンダルに反映されています。練習するには、Sandal をベースにしたモバイル UI ライブラリである sheral に移動してください。興味がある場合は、ご覧ください。