Stylus CSS Ortam Sorgularındaki Değişkenler

Question

Her şeyi denedim ancak Stylus CSS önişlemcisini ortam sorgularındaki değişkenleri kullanamıyorum.

Mesela bu işe yaramazsa:

t = 1000px 

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

Herkes bunun nasıl biliyor?

Answer 1

Üzgünüz, ancak medya sorgularındaki değişkenleri veya enterpolasyonları kullanamazsınız. Dün benzer görev tökezledi ve bu çözüm ile geldi:

t = 1000px 

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

Bu hoş değil, ama o inşaat - aslında böyle Stylus sorunların çoğunun geçici çözüm için unquote kullanabilirsiniz.

Answer 2

Bu kalem, bu pull request ile aynı şeyi yapmanın biraz daha temiz bir yolunu destekliyor gibi görünüyor.

Burada, bir blok boyutu verildiğinde, kapsayıcıyı sayfada ortalayan stiller yapabilir ve kapsayıcı boyutunu tarayıcı boyutuna göre 1, 2 veya 3 blok geniş olacak şekilde ayarlayabilirim. Medya sorgusunun bir değişken olmasına izin vermek (medya sorgu satırının içindeki değişkenleri yapıştırmak yerine), yukarıda belirtilen unquote yöntemini kullanmanın biraz daha temiz olmasını sağlar.

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

Böyle kullanılabilir::

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

CSS Çıktı:

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

Answer 3

Ben bir mixin yazdı Stylus'un 0.43.0 sürümü ile medya sorguları desteklenen ya da örnekte veya böyle iki nokta üst üste olmadan buna sahip olarak:

t = 1000px 

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

via Github

Answer 4

o ya tamamen İdeal olmasa da

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

Answer 5

ben gereksiz medya sorgu için adlandırılmış değişken oluşturmak için yapan bir media mixin oluşturmak ister:

media(query) 
    @media query 
    {block} 

Kullanım ilerler şöyle:

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

Answer 6

Bu benim için çalıştı.

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 

Answer 7

şimdi çalışması gerekir: belgelerine

t = 1000px 

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

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

:

interpolasyonları ve değişkenleri

Sen medya sorguları iç hem ara değerlemeler ve değişkenleri kullanabilirsiniz

, bu yüzden böyle şeyler yapmak mümkün: Hemen oradan destekleniyor

.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; 


} 
} 

Answer 8

Bu boyun olacaktır:

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

Bu O MQ içindeki ifadeler kullanmak da mümkündür

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

doğuracak kutu, snippet from official page: Ben temiz ve okunabilir bir şekilde sağlayabilir Eğer

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

Answer 9

, ben şöyle benim için avantaj sağlamalarının kullanın:

// 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)", 
} 

Ve örneğin çağırır nasıl:

.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 

Süper açık ve okunması kolay. Güzel ve basit olsun.

Answer 10

Tony Tai Nguyen'in cevabını beğendim. Burada başka bir yineleme var:

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