3

@mediamixinを使用してブロックを簡単に追加するこの方法を見つけました：

@mixin phone() {
    @media only screen and (max-width: 480px) {
        @content;
    }
}

使用するには、次のように入力するだけです。

p {
    @include phone { ... }
    span {
        @include phone { ... }
    }
}

しかし、問題は実際の CSS 出力にあります。

@media only screen and (max-width: 480px) {
  p { ... }
}
@media only screen and (max-width: 480px) {
  p span { ... }
}

CSSを肥大化させる部分を複製します。@media ...

ミックスインをプレースホルダーのように機能させる方法はありますか? したがって、すべてを結合し@contentて同じ@media ...ブロックの下に配置します。

したがって、結果は次のようになります

@media only screen and (max-width: 480px) {
    p { ... }
    p span { ... }
}

をファイルの最後に置くだけ@include phoneで、必要なすべてのスタイルをそのブロックに書き込むことができます。

しかし、元のスタイルのすぐ横にメディアクエリ スタイルを書くと、読みやすく、整理しやすくなります。

ありがとう

4

3 に答える 3

2

現時点では、Sass にはその機能がありません。唯一のオプションは、単一のメディア クエリ内でスタイルを手動でグループ化することです (または、その機能を持つサード パーティの CSS コンプレッサーを使用します)。

https://github.com/nex3/sass/issues/116

于 2013-07-12T16:39:24.593 に答える
0

SASS は extends とメディア クエリを組み合わせることができない**ため、このコード スタイルを採用すると、メディア クエリの重複は現在避けられません。

トップレベルでメディア クエリを使用してコードを構成することもできます (つまり、メディア クエリによるグループ コード)。ここにいる CSS 専門家の 1 人である Eric Meyer は、そうすべきではないと言っています (他の多くのフロント エンド愛好家も同意するでしょう)。私は 1 つのプロジェクトでこのアプローチを自分で試しましたが、プロジェクトが大きくなるほど、このコード構造がより苦痛になることを確認しました。SMACSS やその他のコード構造の方法論も、これに反対することを勧めています。

このコード構造が広く使用されているのは、CMS の基本テーマ (テーマ テンプレート、別名スターター キット) です。ただし、これらは、ユーザーが最初から作成するのではなく、既定のスタイルをすばやくオーバーライドできるようにすることを目的としています。

問題は、重複したメディア クエリは実際には問題にならないということです。@cimmanon は私に同意しないかもしれませんが、ソース コード (SASS) の可読性と保守性だけが問題になるはずです。最新の Web サーバーはすべて、マシンによってのみ読み取られる CSS コードの圧縮 (gzip) を提供するためです。

もちろん、CSS を不当に大きくして、CSS を台無しにする方法はたくさんあります。非セマンティック CSS フレームワークの使用もその 1 つです。多くのローカル メディア クエリ ブロックを賢明に適用することは適切ではありません。

于 2013-07-12T20:16:08.840 に答える