28

すべてを試しましたが、メディア クエリで Stylus CSS プリプロセッサに変数を使用させることができません。

たとえば、これは機能しません:

t = 1000px

@media screen and (max-width: t)
    html
        background blue

誰でもこれを行う方法を知っていますか?

4

10 に答える 10

32

スタイラスは、このプル リクエストと同じことを行う少しクリーンな方法をサポートしているようです。

ここでは、ブロック サイズを指定して、コンテナーをページの中央に配置するスタイルを作成し、ブラウザーのサイズに基づいてコンテナー サイズを 1、2、または 3 ブロックの幅に設定できます。メディア クエリを変数にする (メディア クエリ行内に変数を貼り付けるのではなく) と、上記のunquote方法を使用するよりも少しすっきりします。

/* in app.styl */

full_block_width = 300px

three_blocks = "all and (min-width: " + 3*full_block_width + ")"
two_blocks = "all and (min-width: " +  2*full_block_width + ") and (max-width: " + (3*full_block_width - 1) + ")"
one_block = "all and (max-width: " + (2*full_block_width - 1) + ")"

.container 
  margin: auto

@media three_blocks
  .container 
    width: (3*full_block_width)

@media two_blocks
  .container 
    width: (2*full_block_width)

@media one_block
  .container 
    width: full_block_width
于 2013-02-03T01:39:25.377 に答える
25

悲しいことに、メディア クエリで変数や補間を使用することはできません。私は昨日同様のタスクに出くわし、この解決策を思いつきました:

t = 1000px

unquote("@media screen and (max-width: " + t + ") {")
html
    background blue
unquote("}")

これはきれいではありませんが、うまくいきます —unquoteこのような Stylus の問題のほとんどを実際に回避するために使用できます。

于 2012-10-25T08:18:09.207 に答える
3

今すぐ動作するはずです:

t = 1000px

@media screen and (max-width: t)
    html
        background blue

http://stylus-lang.com/docs/media.html

ドキュメントから：

補間と変数

メディア クエリ内で補間と変数の両方を使用できるため、次のようなことが可能です。

foo = 'width'
bar = 30em
@media (max-{foo}: bar)
  body
    color #fff

これは

@media (max-width: 30em) {
  body {
    color: #fff;
  }
}

MQ 内で式を使用することもできます。

.foo
  for i in 1..4
    @media (min-width: 2**(i+7)px)
      width: 100px*i

屈するだろう

@media (min-width: 256px) {
  .foo {
    width: 100px;
  }
}
@media (min-width: 512px) {
  .foo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .foo {
    width: 300px;
  }
}
@media (min-width: 2048px) {
  .foo {
    width: 400px;


 }
}
于 2015-02-10T19:50:46.950 に答える
1

クリーンで読みやすい方法を提供できる場合は、次のようにハッシュを有利に使用します。

// Custom media query sizes
--query = {
    small: "screen and (min-width: 554px)",
    medium: "screen and (min-width: 768px)",
    large: "screen and (min-width: 992px)",
    extra-large: "screen and (min-width: 1200px)",
}

たとえば、次のように呼びます。

.main-logo
    font-large(--font.uni-sans-heavy)
    position: relative
    top: 50px
    left: 35px

    .logo-first
        color: --color.white
        margin-right: 3px

    .logo-second
        color: --color.bright-red

    @media --query.large
        left: 70px

非常に明白で、読みやすい。美しくシンプルに保ちます。

于 2016-05-06T10:56:11.467 に答える
0

mediaメディア クエリ用の名前付き変数を作成する必要がなくなる mixin を作成するのが好きです。

media(query)
  @media query
    {block}

使用方法は次のとおりです。

+media("screen and (min-width:" + width + "), print")
  .class
    foo: bar
于 2014-10-30T17:51:40.503 に答える