4

私は多くのcssファイルと多くの出現を持っています：

@media all and (max-width: 400px), (orientation: portrait) {
    ....//In each file different style that relevant to the component the file represnt
}

スタイラスを使用しています。
ある日、上司からメディアクエリを次のように変更するように依頼されました。

@media all and (max-width: 400px), (max-height: 400px) {
    ....
}

次に、すべてのファイルを検索して、新しいメディアクエリに置き換える必要があります。

このメディアクエリをミックスインなどに入れるオプションはありますか？

4

3 に答える 3

13

私が以前に答えた質問から取られました。これが私が使用するハックです：

のvariables.styl

smartphoneWidth = 748px
tabletWidth     = 1012px

mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

これで、他のスタイラスファイルで使用できます。

@media mqSmartphone
    // Styles go here

@media mqTablet
    // Styles go here

まだ醜いですが、unquote（）を使用するよりも少しエレガントだと思います

于 2013-06-21T09:41:16.107 に答える
11

スタイラスを使用すると、必要に応じていくつかのブロックミックスインを定義することもできます。私はこれを使用します：

widerthan(var)
  condition = 'screen and (min-width: %s)' % var
  @media condition
    {block}

narrowerthan(var)
  condition = 'screen and (max-width: %s)' % var
  @media condition
    {block}

mobile = 748px

次に、次のように使用できます。

button
  +narrowerthan(mobile)
    flex-direction column
于 2014-09-27T13:11:58.747 に答える
0

Stylusはメディアクエリ（またはミックスインのブロック引数）で補間または変数をサポートしていないため、次のハックしか使用できませんでした。

$my_query = "@media all and (max-width: 400px), (orientation: portrait) {"

unquote($my_query)
…
unquote("}")

$mu_query次に、クエリを変更する必要がある場合は、変数を変更する必要があります。

醜い構文以外の唯一の欠点は、これがバブルメディアクエリでは機能しないことです。

于 2013-04-15T15:49:32.517 に答える