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.