sass_html/css_WEB-ITnose の Maps 関数を使用してレスポンシブ コードをより整理する

原文はここからです
この記事は、原文 (Jonathan Suh による) と著者自身の理解を組み合わせたものです。

はじめに

ご存知のとおり、コードを書くことと、メンテナンス性の高いコードを書くことは別のことです。応答性に関して言えば、特にコードが乱雑になりやすいのは、sass マップが提供するトポロジー機能です。この問題点を軽減するには、次のコードが依然として非常に一般的です:

p { font-size: 15px; }@media screen and (min-width: 480px) {  p { font-size: 16px; }}@media screen and (min-width: 640px) {  p { font-size: 17px; }}@media screen and (min-width: 1024px) {  p { font-size: 19px; }}

2 つの問題点: 1.DRY、2.Magic Number。
おそらく Sass 変数が問題 2 を解決できるでしょう。

$p-font-size-mobile : 15px;$p-font-size-small  : 16px;$p-font-size-medium : 17px;$p-font-size-large  : 19px;

しかし、変数が多すぎると、コードは次のようになります:

$p-font-size-mobile : 15px;$p-font-size-small  : 16px;$p-font-size-medium : 17px;$p-font-size-large  : 19px;$h1-font-size-mobile: 28px;$h1-font-size-small : 31px;$h1-font-size-medium: 33px;$h1-font-size-large : 36px;..............

変数が多すぎると、整理されていないように見えます。

Sass マップの初期テスト

次の sass 変数を宣言します:

$p-font-sizes: (  null  : 15px,  480px : 16px,  640px : 17px,  1024px: 19px);

次に、ミックスインを作成し、プロパティを走査し、対応するメディア クエリを生成します

@mixin font-size($fs-map) {  @each $fs-breakpoint, $fs-font-size in $fs-map {    @if $fs-breakpoint == null {      font-size: $fs-font-size;    }    @else {      @media screen and (min-width: $fs-breakpoint) {        font-size: $fs-font-size;      }    }  }}

Sass は他の構文シュガーも提供しています。ここを参照してください。

現時点では、どこにでも mixin を導入できます

p {  @include font-size($p-font-sizes);}

結果は記事の冒頭と同じです

ブレークポイントの断片化を解決する

さらにブレークポイントを導入したい場合、上記のコードはまだ少し壊れやすいようです。または、p タグと h1 タグで異なるブレークポイントを導入したいと考えています。これを考慮すると、コードをリファクタリングできます。

さあ、さらに一歩進んで、フォント サイズ ミックスインに行の高さの設定を追加できます (行の高さとフォント サイズは同時に表示されることがよくあります)

$breakpoints: (  small : 480px,  medium: 700px, // Previously 640px  large : 1024px);$p-font-sizes: (  null  : 15px,  small : 16px,  medium: 17px,  large : 19px);$h1-font-sizes: (  null  : 28px,  small : 31px,  medium: 33px,  large : 36px);@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {  @each $fs-breakpoint, $fs-font-size in $fs-map {    @if $fs-breakpoint == null {      font-size: $fs-font-size;    }    @else {      // If $fs-font-size is a key that exists in      // $fs-breakpoints, use the value      @if map-has-key($fs-breakpoints, $fs-breakpoint) {        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);      }      @media screen and (min-width: $fs-breakpoint) {        font-size: $fs-font-size;      }    }  }}

nth は sass, nth(list, n) はリストから n 番目のデータを取得します。

結論

上記のコードにはまだ多くの弱点があります。コメントを提供して一緒に勉強することを歓迎します。

リソース

レスポンシブ レイアウトに使用できるツール。分析 Modular Scale

また素晴らしいブログ投稿です

この記事が良いと思われる場合は、私の github に来てご覧ください。右上隅のアイコンがポータルです。