SASS を使用してセマンティック HTML_html/css_WEB-ITnose を作成する

SASS の導入以来、CSS をライブラリ スタイルとフレームワーク スタイルと呼ぶ 2 つの方法で使用できるようになりました。

ここでは、Foundation scss フレームワークを例として取り上げます。これは、ブートストラップがより少ない言語で記述されていることを除いて、私たちがよく知っているブートストラップに似ています (ブートストラップ 3 も SASS に変更されており、ファウンデーションは sass によって記述されています)。開発者向け) フロントエンド フレームワークとして、ブートストラップが UI ライブラリである場合、ファウンデーションはツールであることに重点を置いています

ファウンデーションに詳しくない場合は、まずこの例を見てください

それがわかるでしょう。その使用法は、先ほど述べたフレームワークの使用法に非常に似ています。ブートストラップを使用したことのある人なら誰でも、この使用法の中核となるのは、フレームワークによって提供されるクラスの名前です。この要素に任意の値を指定します。たとえば、rails では、一連の仕様が提供され、モデルがデータベースをバインドできるようにする場合は、activerecord を継承します。コントローラーが http リクエストを受信したい場合は、application_controller を継承し、モデル フォルダーにコントローラーを置きます。これは、多くの CSS フレームワークで提供されるグリッドと同様です。

実際には、クラス ライブラリとフレームワークの違いを 1 つの文で説明できます。ドキュメントでは、多くのコンポーネントに Semantic Markup With Sass というセクションがあります。簡単に言うと、フレームワーク スタイルの使用法では、マークアップはセマンティックである必要があります。 Col-4 という列はセマンティックではありません。col-4 は外観情報を表し、この要素が占める幅が 4 であることを示します。マークアップは、外観ではなく要素の機能を表す必要があります。また、Sass の mixin を使用すると、たとえばボタンがある場合、そのクラスに fire という名前を付けることができます。次に、基礎の丸いボタン スタイルをロードする必要があります。フレーム スタイルを使用する場合、この要素には 2 つのクラスのボタン半径のみを指定できます。 クラス ライブラリ スタイルを使用する場合は、次のように記述できます。

.fire {    @include button}

これら 2 つの記述方法で最終的に生成される CSS は、もちろん異なります。これについては後で説明しますが、少なくとも表示されるスタイルは一致しています。 HTML 構造の観点から見ると、クラス ライブラリ スタイルの方がより簡潔です。

上記の例では、クラス ライブラリ スタイルを使用したコードは次のとおりです:

@import '../../bower_components/foundation/scss/foundation/components/grid';.main {    @include grid-row();}.brother {    @include grid-column(6);}

Click to view the results

時間がかかりました。2 つの書き方の違いは、マークアップで数文字がわずかに削減されることです。 。真実はそれほど単純ではありません。 重要なのは、書く文字数を減らすことではなく、HTML の構造がより安定したということです。

現在、HTML 構造はより抽象化されており、基礎となる実装は CSS に任せられています。

scss の力のおかげで、css はより柔軟で抽象的になりました。