Variabili in Stylus CSS Media Query

Question

Ho provato tutto ma non riesco a ottenere il preprocessore CSS Stylus per utilizzare le variabili nelle query multimediali.

Per esempio questo non funziona:

t = 1000px 

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

Qualcuno sa come fare questo?

Answer 1

È triste, ma non è possibile utilizzare variabili o interpolazioni su query multimediali. Mi sono imbattuto su compito analogo ieri ed è venuto con questa soluzione:

t = 1000px 

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

Questo non è abbastanza, ma funziona - è possibile utilizzare unquote per aggirare la maggior parte dei tali problemi Stylus realtà.

Answer 2

Sembra che lo stilo supporti un modo leggermente più pulito per fare la stessa cosa di questo pull request.

Qui, data una dimensione del blocco, posso creare stili che centrano il contenitore nella pagina e impostare le dimensioni del contenitore in 1, 2 o 3 blocchi in base alle dimensioni del browser. Lasciando che la query multimediale sia una variabile (invece di attaccare le variabili all'interno della riga di query del media) rende un po 'più pulito rispetto all'utilizzo del metodo unquote sopra descritto.

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

ho scritto un mixin, anche se non è del tutto ideale sia:

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

Può essere utilizzato in questo modo:

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

uscita CSS:

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

Answer 4

Con la versione 0.43.0 di Stylus, le query multimediali sono supportato o come lo avete nel tuo esempio o senza i due punti come questo:

t = 1000px 

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

via Github

Answer 5

mi piace creare un mixin media, che rende inutile la creazione di una variabile denominata per la media query:

media(query) 
    @media query 
    {block} 

procede come segue: Uso

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

Answer 6

Questo è quello che ha funzionato per me.

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

ora dovrebbe funzionare:

t = 1000px 

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

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

Dalla documentazione:

interpolazioni e le variabili

È possibile utilizzare entrambi interpolazioni e le variabili interne domande dei media, in modo da è possibile fare cose come questa:

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

ciò comporterebbe

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

È anche possibile utilizzare espressioni all'interno MQ:

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

sarebbe cedere

@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

Questo è ora supportato su la scatola,.210:

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

Answer 9

Se posso fornire un modo pulito e leggibile, io uso hash a mio vantaggio in questo modo:

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

E come lo chiamerei per esempio:

.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 

Super ovvio e facile da leggere. Tienila carina e semplice

Answer 10

Mi è piaciuta la risposta di Tony Tai Nguyen. Ecco un altro iterazione:

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