Я пробовал все, но я не могу заставить препроцессор Stylus CSS использовать переменные в медиа-запросах.
Например, это не работает:
t = 1000px
@media screen and (max-width: t)
html
background blue
Кто-нибудь знает, как это сделать?
Я пробовал все, но я не могу заставить препроцессор Stylus CSS использовать переменные в медиа-запросах.
Например, это не работает:
t = 1000px
@media screen and (max-width: t)
html
background blue
Кто-нибудь знает, как это сделать?
Это печально, но вы не можете использовать переменные или интерполяции в медиа-запросах. Я наткнулся на аналогичную задачу вчера и пришел с этим решением:
t = 1000px
unquote("@media screen and (max-width: " + t + ") {")
html
background blue
unquote("}")
Это не очень, но он работает - вы можете использовать unquote
для решения большинства таких проблем с Stylus.
Похоже, что стилус поддерживает немного более чистый способ сделать то же самое, что и в этом запросе на растяжение.
Здесь, учитывая размер блока, я могу создавать стили, которые центрируют контейнер на странице, и задавать размер контейнера размером 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
С версии 0.43.0 Stylus медиа-запросы поддерживаются либо в вашем примере, либо без двоеточия, например:
t = 1000px
@media screen and (max-width t)
html
background blue
Начиная с этого письма Stylus находится в версии 0.47.1
Я написал mixin, хотя он не полностью идеален:
// 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;
}
}
Это то, что сработало для меня.
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
Теперь это поддерживается из коробки, фрагмент с официальной страницы:
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
color #fff
должен работать сейчас:
t = 1000px
@media screen and (max-width: t)
html
background blue
http://learnboost.github.io/stylus/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;
}
}
Мне нравится создавать микс media
, который делает ненужным создание именованной переменной для медиа-запроса:
media(query)
@media query
{block}
Использование происходит следующим образом:
+media("screen and (min-width:" + width + "), print")
.class
foo: bar
Если я могу предоставить чистый и понятный способ, я использую хеши для себя так:
// 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
Супер очевидный и легко читаемый. Держите это красивым и простым.
Мне понравился ответ Тони Тай Нгуен. Здесь другая итерация:
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...