12

現在、メインの CSS プリプロセッサとして LESS を使用しています。@media次のようなクエリで変数を定義する必要があります (そして、多くの人がこの必要性を持っていると確信しています) 。

@media screen and (max-width: 479px) {
    myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    myVar: 20px;
}
@media screen and (min-width: 768px) {
    myVar: 30px;
}

.myElement {
    padding: @myVar;
}

コンパイルの性質のため、これは LESS では機能しません (@myVarは特定のスコープ内で@mediaのみ定義されますが、グローバルではありません)。メディアクエリの前にグローバルに定義しても@myVar、メディアクエリに従って更新されず、.myElement何があってもその初期値を取得します。

問題は、他の CSS プリプロセッサでこれを実現できるか、それとも.myElement各メディア クエリ内で をオーバーライドする運命にあるのかということです。この最も単純な例では問題ありませんが、実際のプロジェクトでは、これにより多くの時間とコピー/貼り付けを節約できます。

編集: 解決策ではありませんが、私の特定のプロジェクトの回避策:

  1. font-size<html>を base font-sizeに設定
  2. myVarLESS 変数は、ベースの font-size の導関数としてではremなく、で定義されています。px
  3. クエリを使用@mediaして、さまざまなメディアのベース フォント サイズを調整します。
  4. OPTIONALまだサポートしていないブラウザーにはREM ユニットポリフィルを使用しますrem( http://caniuse.com/#search=rem )。これは IE 8 以下では機能しませんが、メディア クエリがサポートされていないためではありませremん。とにかく、IE8以下はフルサイズのメディアクエリのないスタイルシートを取得します.

コードスニペット：

@myVar: .77rem; // roughly 10px, 20px and 30px respectively

html { font-size: 13px }
@media screen and (min-width: 480px) and (max-width: 767px) {
    html { font-size: 26px }
}
@media screen and (min-width: 768px) {
    html { font-size: 39px }
}

.myElement {
    padding: @myVar;
}

これは、さまざまな font-size 要素とさまざまに測定されたブロックを組み合わせた、より広範な例を含む JSBinです。

私のニーズに合わせて簡単かつ柔軟に。うまくいけば、他の誰かに役立つでしょう。

4

3 に答える 3

6

メディアクエリを変数に入れ、それらを要素内で使用するようにリファクタリングできます。

例：

@phone: ~"screen and (max-width: 479px)";
@tablet: ~"screen and (min-width: 480px) and (max-width: 767px)";
@desktop: ~"screen and (min-width: 768px)";

.myElement {
  @media @phone { padding: 10px; }
  @media @tablet { padding: 20px; }
  @media @desktop { padding: 30px; }
}

生成するもの:

@media screen and (max-width: 479px) {
  .myElement {
    padding: 10px;
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .myElement {
    padding: 20px;
  }
}
@media screen and (min-width: 768px) {
  .myElement {
    padding: 30px;
  }
}

メディアクエリ全体を変数に埋め込まれた解析されていないリテラルにすることは、正確ではありませんが、メディアクエリの標準化にも役立ちます。

また、 の 3 つの動作はすべて.myElement1 つの定義に含まれており、別の場所 (まったく別のファイルである可能性があります) で変更されていないため、"デバッグ" が困難になるため、読みやすさが向上します。

于 2013-01-03T13:01:29.240 に答える
5

どうですか：

@media screen and (max-width: 479px) {
    .myElement(10px);
}

@media screen and (min-width: 768px) {
    .myElement(30px);
}


.myElement(@myVar) {
    .myElement {
        padding: @myVar;
    }
}
于 2013-01-03T13:07:55.133 に答える