CSSプリプロセッサはWeb開発者の間でますます人気があります。 なんで？
許可する理由：
- 時間を節約
- CSSでDRY原則を適用する
- コードを読みやすくします。
現在、最も一般的なプリプロセッサは
SASSとLESSです。
この記事で 、SASSがLESSよりも優れている
理由について読むことができます。 より良いかどうか-論点ですが、次の理由がある場合のみ、LESSからSCSSに切り替えました。
この記事では、
SCSSとSASSの構文の比較について読む
ことができます。 個人的には、
CSSとの
下位互換性のためにSCSSを選択しました。その結果、
インポートディレクティブを使用してプロジェクトに古いCSSファイルをすばやく含めることができました。 これを行うには
、拡張子を.scssに変更する必要があります。
Faiwer 1と
AbleBoy 2は、すでにSCSSの基本について書いています。ここでは、私を本当に助けてくれた
いくつかのテクニックを説明します。
イテレータ
SCSSには
ループが
あり 、それは素晴らしいことです！
サイトのカラーパレットがあり、メニューをすべての色で色付けするとします。
index.html ：
<!DOCTYPE html> <html> <head> <title> </title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <nav class="menu-main"> <ul> <li class="red"><a href="#"></a></li> <li class="orange"><a href="#"></a></li> <li class="green"><a href="#"></a></li> <li class="blue"><a href="#"></a></li> <li class="purple"><a href="#"></a></li> </ul> </nav> </body> </html>
style.scss ：
$colors: #f74a3a #fcbe26 #8cc687 #4da5f2 #b01395; $i:0; .menu-main ul li { @each $col in red, orange, green, blue, purple { $i: $i + 1; &.#{$col} { background: nth($colors, $i); } } }
SCSSには増分がありません（
forの場合を除きますが、
foreachのアナログが必要です）ので、このトリックが必要です。 しかし、同時に、$カラーリストを通過するための本格的な
イテレーターを取得し
ます ！
このようなコンパクトなコードは、
CSSコードに変換され
ます 。
style.css .menu-main ul li.red { background: #f74a3a; } .menu-main ul li.orange { background: #fcbe26; } .menu-main ul li.green { background: #8cc687; } .menu-main ul li.blue { background: #4da5f2; } .menu-main ul li.purple { background: #b01395; }
応答する
この手法を使用する
と 、レスポンシブレイアウト用のメディアクエリを
コンパクトかつ便利に作成できます。
style.scss // mixin @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: 479px) { @content; } } @else if $media == wide-handhelds { @media only screen and (min-width: 480px) and (max-width: 767px) { @content; } } @else if $media == tablets { @media only screen and (min-width: 768px) and (max-width: 959px) { @content; } } } .menu-main { float: left; width: 300px; // @include respond-to(handhelds) { float: none; }; // @include respond-to(wide-handhelds) { float: none; }; // @include respond-to(tablets) { width: 240px; }; }
CSSでは 、特にこのmixinの繰り返し使用を考慮すると
、これはそれほどコンパクトに見えません。
style.css .menu-main { float: left; width: 300px; } @media only screen and (max-width: 479px) { .menu-main { float: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .menu-main { float: none; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .menu-main { width: 240px; } }
Chris Eppstein
3によるSCSSおよびSASSのミックスインの詳細
また、SCSSを通じて生活をより便利にする方法を教えてください。
1- 「SCSS-ちょっとした練習、パートI」2- 「SCSSとCompass Frameworkについての怠impなインポーザーの注意」3 -
Chris Epstein、Github：要点、1215856UPD：多くのメディアクエリの問題は、
このジャムで解決できます。