🚶🏾 🤜🏿 🤛🏾 SCSS：いくつかの便利なテクニック 🙌🏽 👩‍🍳 🚿

CSSプリプロセッサはWeb開発者の間でますます人気があります。なんで？

許可する理由：

時間を節約
CSSでDRY原則を適用する
コードを読みやすくします。

現在、最も一般的なプリプロセッサはSASSとLESSです。

この記事で 、SASSがLESSよりも優れている理由について読むことができます。より良いかどうか-論点ですが、次の理由がある場合のみ、LESSからSCSSに切り替えました。

サイクル
条件付きステートメント
リスト

この記事では、 SCSSとSASSの構文の比較について読むことができます。個人的には、 CSSとの下位互換性のためにSCSSを選択しました。その結果、 インポートディレクティブを使用してプロジェクトに古いCSSファイルをすばやく含めることができました。これを行うには、拡張子を.scssに変更する必要があります。

Faiwer ¹と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なインポーザーの注意」

³ - Chris Epstein、Github：要点、1215856

UPD：多くのメディアクエリの問題は、このジャムで解決できます。

SCSS：いくつかの便利なテクニック

イテレータ

応答する

More articles: