columns - stylus css tutorial

Variables en Stylus CSS Media Queries

Question

Lo he intentado todo, pero no puedo hacer que el preprocesador Stylus CSS use variables en las consultas de medios.

Por ejemplo, esto no funciona:

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

Alguien sabe cómo hacer esto?

Answer 1

Con la versión 0.43.0 de Stylus, las consultas de medios son compatibles ya que las tiene en su ejemplo o sin dos puntos como este:

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

a través de Github

Answer 2

Debería trabajar ahora:

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

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

De la documentación:

Interpolaciones y variables.

Puede usar tanto interpolaciones como variables dentro de las consultas de medios, por lo que es posible hacer cosas como esta:

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

Esto daría lugar a

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

También es posible utilizar expresiones dentro de MQ:

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

cedería a

@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 3

Es triste, pero no puedes usar variables o interpolaciones en consultas de medios. Me encontré con una tarea similar ayer y vine con esta solución:

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

Esto no es bonito, pero funciona: puede usar, unquote para solucionar la mayoría de los problemas de Stylus en realidad.

Answer 4

Escribí un mixin, aunque tampoco es completamente ideal:

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

Se puede usar así:

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

Salida CSS:

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

Answer 5

Esto ahora se admite de forma inmediata , fragmento de la página oficial :

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

Answer 6

Esto es lo que funcionó para mí.

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

Me gustó la respuesta de Tony Tai Nguyen. Aquí hay otra iteración:

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

Answer 8

Me gusta crear una mezcla de media que hace innecesario crear una variable con nombre para la consulta de medios:

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

El uso procede de la siguiente manera:

.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

Answer 9

Parece que el lápiz óptico soporta una forma un poco más limpia de hacer lo mismo que con esta solicitud de extracción .

Aquí, dado un tamaño de bloque, puedo crear estilos que centren el contenedor en la página y establecer el tamaño del contenedor en 1, 2 o 3 bloques de ancho según el tamaño del navegador. Dejar que la consulta de medios sea una variable (en lugar de pegar variables dentro de la línea de consulta de medios) hace que sea un poco más limpio que usar el método unquote mencionado anteriormente.

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

Si puedo proporcionar una forma limpia y legible, utilizo hashes para mi ventaja como así:

media(query)
@media query
{block}

Y cómo lo llamaría por ejemplo:

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

Super obvio, y fácil de leer. Mantenlo agradable y simple.