SASSの研究ノート（4）

1.ミキサー

いくつかの小さな同様のスタイルは、（例えば、同じ色とフォント）がある場合は、この状況に対処統一する変数を使用すると、サイト全体のために非常に良い選択です。しかし、あなたのスタイルは、より複雑になったとき、あなたは独立変数のコードスタイル大部分の大きな塊を再利用する必要があり、このような状況に対処する方法はありません。あなたはSASSミキサーの再利用による大部分のスタイルを実現することができます。
定義された混合物の@mixin識別子。CSSの@は、@mediaや@フォントフェースなどの他の識別子、のように見えます。スタイルの大部分にこの識別子は、名前を与えるので、あなたは簡単に参照することにより、このスタイルの名前を再利用することができます。このコードのSASS底は非常に単純なミキサを定義、クロスブラウザの目的は、境界を丸め。

@mixin rounded-corners {
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
              border-radius: 5px;
}

そして、あなたはどこでもあなたが欲しい置か@include、によってあなたのスタイルシートにこのミキサーを使うことができます。だから、@includeでその場所から抽出されたスタイルのミキサーが呼び出され@includeます呼び出します。下に書かれたように、もし：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成:

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

ミキサーからの丸いコーナーでプロパティ全て.noticeのborder-半径MOZボーダー半径と-webkitボーダー半径。このセクションでは、重複を避けるために、ミキサーの使用を記載しています。パラメータを使用すると、引き出された後、簡単に他の場所で再利用のあなたのスタイル普遍的なスタイルにミキサーを使用することができます。実際には、便利なブレンダー、誤っ使いすぎかもしれません。スタイルシートの形成につながる可能性があり、再利用の多数のロードを遅らせるにつながる、大きすぎます。だから、最初の事は、私たちは虐待を避けるために、ミキサーの使用シナリオについて説明します。

2.ミキサーを用いて

ミキサー、簡単にスタイルシートのさまざまな部分でスタイルを共有することができます。あなた自身が常にいくつかのスタイルを繰り返し見つけた場合、それはこのスタイルから引き出されるべき、優れたミキサーを構築し、特にこのスタイル自体が論理的な単位であり、例えば、一緒に入れグループがありますプロパティ感覚。

属性のセットをミキサーに組み合わせるべきかどうかを判断するには、親指のルールは、あなたがこのミキサーのための良い名前と一緒に取得するかどうかです。あなたは、このような丸いコーナーファンシーフォントとしてフォームを変更し、これらの属性、または無弾丸を記述するための素敵な短い名前を見つけることができれば、ない場合は、この時間は、混合を構築するために、適当なミキサーを構築することが可能であることが多いですそれは適切ではありません。

たくさんのCSSクラスのようないくつかの方法でミキサー。すべては、それが使用するの選択に疑問を生成することができ、あなたはスタイル名の大部分を与えることができます。重要な違いは、ミキサは、スタイルシートで使用されている間、クラス名は、HTMLファイルに適用されていることです。これは、クラス名がCSSルールが適用された後の結果を生成する方法を説明するための説明だけのショーケースをセマンティックな意味を持ち、そしてないことを意味します。

前の例では、意味クラス名.noticeです。通知html要素は、クラス名がある場合は、それを示しているHTML要素の使用：ユーザー情報を表示するリマインダー。ミキサーの丸いコーナーそれはそれはルール、ビジュアルスタイルの、特に境界角度をCSS含まれている究極のビジュアルスタイルを説明し実証することです。書き込みきれいなHTMLとCSSを使用したミキサーやクラス、意味クラス名の使用はまた、あなたがミキサーの繰り返しを避けることができますので。書き込みスタイルの過程で、あなたのHTMLとCSS可読性と保守性を保つために心の中で二つの違いを負担しなければなりません。

時には、ミキサー上の唯一のプロパティは十分ではありません、良いニュースは、SASSのCSSルールはまた、ミキサーに入れることができます

1.ミキサー

2.ミキサーを用いて

おすすめ