@media screen
を使用して、コードを最適化し、より便利にする方法を長い間考えていました。 コードについて
body{font-size: 1em;} @media screen and (max-width: 1024px){ body{font-size: 0.8em;} }
十分な大きさのファイルを作成します。 もちろん、あなたは応答（タブレット）のようなミックスインを書くことができ、多くはそれを使用し、上記のオプションよりも見栄えが良く便利に見えますが、主な問題は解決しません。 大規模なプロジェクトでは、多くの
@include
を取得しますが、それを理解することはそれほど難しくありませんが、目的のクラスまたは添付ファイルを検索するために、ファイルを多く調べる必要があります。
そして、どのようにして読みやすく、よく、少なくとも2倍、さらには3倍小さいファイルを取得しますか？ 私はそのような質問を自問し、答えに来ました：
「すべての権限を1行で登録できるようにするため、つまり、 値を複製しないでください。」
結果は次のようになります
body{font-size: [1em, 0.8em]}
ここで、最初の値[1em]はすべてのスクリーン用であり、スクリーンの2番目の[0.8em]は1024px未満です。 同意します。このオプションは、寿命を大幅に簡素化し、ファイルを大幅に削減し、すべての権限のルールを簡単に説明します。
最初の質問に対する答えが見つかりました。 しかし、別の質問、これを達成する方法は？ 私の最初の考えは、[]から
@media screen
値を転送するGulpのモジュールを書くことでした...しかし、このオプションはまず第一に、かなり複雑なプロセスなので、あまり良くありません。 よく考えて、競合しないモジュールを実行できるようにする必要があります。一般的に、私の場合、これには問題があります。 第二に、そのような構文を受け入れる考えはなく、そのようなトリックには赤で下線が引かれますが、これも良くありません。
したがって、Sassの
@mixin
が適切なオプションであると判断し
@mixin
たが、[]を使用するほどエレガントで読みやすいものではありません。 そして、ここに私が得たものがあります：
/* */ $screens: (all, 1024, 640); @mixin media($property, $values){ /* */ @for $i from 1 through length($values) { /*, '' */ @if nth($values, $i) != ''{ @if nth($screens, $i) == 'all'{ /* , @media screen */ #{$property}: unquote(#{nth($values, $i)}); } @else { /* @media screen */ @media screen and (max-width: nth($screens, $i) + 'px') { #{$property}: unquote(#{nth($values, $i)}); } } } } }
これで、この方法でミックスインを呼び出すことができます。
body{ @include media(font-size, (1em, 0.8em)); }
CSS：
body{font-size: 1em;} @media screen only (max-width: 1024px){ body{font-size: 0.8em;} }
望みどおりの結果が得られるように思えますが、Gulp用の追加モジュールがなくても完全なようです。 いくつかのルールを説明したとき
body{ @include media(font-size, (1em, 0.8em, 0.6em)); @include media(color, (black, green, red)); } .class{ @include media(display, (none, block, none)); }
結局、私は最高のCSSを得られませんでした。
body{font-size: 1em;} @media screen only (max-width: 1024px){ body{font-size: 0.8em;} } @media screen only (max-width: 640px){ body{font-size: 0.6em;} } body{color: black;} @media screen only (max-width: 1024px){ body{color: green;} } @media screen only (max-width: 640px){ body{color: red;} } .class{display:none;} @media screen only (max-width: 1024px){ .class{display:block;} } @media screen only (max-width: 640px){ .class{display:none;} }
@media screen only (max-width: 1024px)
重複は、何らかの方法で
@media screen only (max-width: 1024px)
する必要があります。 これを行うには、Gulp- gulp-group-css-media-queriesのモジュールをインストールします。インストールの説明はこちら
結果：
body{font-size: 1em;} body{color: black;} .class{display: none;} @media screen only (max-width: 640px){ body{font-size: 0.6em;} body{color: red;} .class{display: none;} } @media screen only (max-width: 1024px){ body{font-size: 0.8em;} body{color: green;} .class{display: block;} }
それぞれの値は新しいbody要素で再記述されるため、これははるかに優れていますが、それでもまだ良くありません。 gulp-minify-cssモジュールは、この問題の解決に役立ちました。説明はこちらです。
そして出来上がり：
body{ font-size: 1em; color: black; } .class{display: none;} @media screen only (max-width: 640px){ body{ font-size: 0.6em; color: red; } .class{display: none;} } @media screen only (max-width: 1024px){ body{ font-size: 0.8em; color: green; } .class{display: block;} }
Sassの最小限の行を使用して完璧なCSSを取得します。 Gulp + Sassを使用しますが、Less + WebpackまたはSass + Compass、または他のバンドルの愛好家には、mixinを書き直して必要なモジュールを見つけるのに問題はないと思います。
私自身はそれほど大きくないプロジェクトですぐにバージョンをテストしましたが、それでも多くの編集をしなければならず、その結果、プロセスに満足しました。 あまり便利ではない唯一のことは、多数のアクセス許可を使用する場合、次のようなコードが表示されることです。
.class{ @include media(color, (red, '', '', '', green, black)); @include media(width, (50%, '', '', '', '', 100%)); }
この場合、最初は少し迷ってしまい、どの画面を修正するかが必ずしも明確ではありませんが、これは私にとっては問題でも不便でもありませんでした（開いた、チェックした、変更した）。 2〜3のアクセス許可がある場合、最初は慣れていませんが、すべてが読みやすく簡潔に見えます。
おわりに
このミックスインにより、すべての画面オプションが1行で必要な結果になりました。 もちろん、コードは湿っていて、似たようなものがすでに私よりもはるかに優れた誰かによって書かれていますが、見つけられませんでした。 いずれにせよ、私はこの方法についてあなたの意見を聞いてうれしいです。 誰かが何かもっと良いことを知っているか、この方法を装飾する方法を知っているか、書いてください。 おそらく、私は完全な異端を書いたので、あなたはこの方法を決して使わないでしょう。この場合、理由を正当化してください。この方法がどのように有用/役に立たないかを理解することが重要です。
PS
試してみることにした人のために、タイプ
rgin: 0 auto;
略記プロパティを使用する場合、
rgin: 0 auto;
、「0 auto」を引用符で囲む必要があります。引用しない場合は
margin: 0;
取得し
margin: 0;
ご清聴ありがとうございました。事前にコメントをお願いします！