web-dev-qa-db-ja.com

スタイラスCSSメディアクエリの変数

私はすべてを試しましたが、メディアクエリで変数を使用するためにStylusCSSプリプロセッサを取得できません。

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

t = 1000px

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

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

cssstylus
26
Cory

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

t = 1000px

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

これはきれいではありませんが、機能します— unquoteを使用して、このようなスタイラスの問題のほとんどを実際に回避できます。

23
kizu

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

ここでは、ブロックサイズを指定して、コンテナをページの中央に配置するスタイルを作成し、ブラウザのサイズに基づいてコンテナサイズを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
31
mr rogers

Stylusのバージョン0.43.0では、例にあるように、または次のようなコロンなしで、メディアクエリがサポートされます。

t = 1000px

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

Github経由

6
Yanofsky

これは私のために働いたものです。

medium = 'screen and (min-width: 768px)'
large = 'screen and (min-width: 992px)'
xlarge = 'screen and (min-width: 1200px)'

.box
    background: #000
    @media medium
        background: #111
    @media large
        background: #222
    @media xlarge
        background: #333
5
Shak Daniel

これは、箱から出してすぐにサポートされるようになりました 公式ページからの抜粋 ：

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

私はミックスインを書きましたが、それも完全に理想的ではありません：

// media
media(args...)
  output = null
  for arg in args
    // check for Tuple
    if arg[1]
      Push(output,unquote('(%s: %s)' % (arg[0] arg[1])))
    else
      Push(output,unquote(arg))

  unquote(s('%s',output))

これは次のように使用できます。

$_media = media(screen,'and',(min-width $screen-tablet))
@media $_media
  .container
    max-width 728px

CSS出力：

@media  screen and (min-width: 768px) {
  .container {
    max-width: 728px;
  }
}
3
fooling

今動作するはずです：

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;


 }
}
2
Bryan

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

// 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

非常に明白で、読みやすいです。素晴らしくシンプルに。

1
Tony Tai Nguyen

Tony TaiNguyenからの回答が気に入りました。別の反復は次のとおりです。

sizes = {
  mobile: 0 768
  tablet: 769 1023
  desktop: 1024 1215
  widescreen: 1216 1407
  fullhd: 1408 99999999
}
query = {}

for name, pxs in sizes
  min = '(min-width:' + pxs[0] + 'px)'
  max = '(max-width:' + pxs[1] + 'px)'
  query[name] = min + ' and ' + max
  query[name + '-up'] = 'screen and ' + min
  query[name + '-down'] = 'screen and ' + max

// Usage: @media query.mobile or @media query.tablet-up etc...
0
Jason Johnson

メディアクエリ用の名前付き変数を作成する必要がないmediaミックスインを作成するのが好きです。

media(query)
  @media query
    {block}

使用は次のように進行します。

+media("screen and (min-width:" + width + "), print")
  .class
    foo: bar
0
J Cracknell