Поддержка @media и @ font-face в LessCSS

Question

Здравствуйте, кто-нибудь знает, как сделать медиа-запрос с LessCSS?

  @media screen and (max-width: 600px) {
      #container{
          width: 480px;
      }
  }

выдает мне следующую ошибку:

! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:

@media screen and

Аналогично, @ font-face и любой запрос CSS3с конфликтом @ с компилятором LessCSS.

Спасибо!

Answer 1

Все приведенные выше ответы устарели.

И less.js, и lessCss / dotless support @media и @ font-face.

Теперь они также поддерживают @media с вложеннымиправила, например

.cl {
 @media screen and (max-width: 600px) {
  .d {
   .e {
     background: none;
   }
  }
 }
}

становится

@media screen and (max-width: 600px) {
 .cl .d .e {
   background: none;
 }
}

Для получения дополнительной информации см. документацию less.js и документация без точек .

Answer 2

Насколько я понимаю, LessCSS не поддерживает @media, вы можете найти открытые билеты на это на их домашней странице github.

Единственный способ, как я вижу, чтобы это работало в вашем случае, это:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

---

Похоже, что проблема была исправлена ​​в выпусках LessCSS после принятого ответа.

Answer 3

Если вы можете использовать less.js , это работает прямо из коробки.Я попробовал тот же пример:

@media screen and (max-width: 600px) {
    #container{
        width: 480px;
    }
}

, и он воспроизвел его точно так же в файле .css.В less.js также есть функция escape, но она, похоже, работает только со значениями, поэтому я не думаю, что вы могли бы использовать ее для этого.оригинальный Ruby LessCSS, хотя?Если вы не можете переключиться на новый, единственное, о чем я могу подумать, это использовать @include.Это может быть немного лучше, чем другой тег ссылки в HTML, и если вы сожмете все свои файлы CSS, вы сможете избежать дополнительного HTTP-запроса.

Answer 4

В настоящее время LESS не предоставляет никакой специальной поддержки для медиа-запросов.Это означает, что невозможно встраивать медиазапросы во вложенные правила LESS, заставляя разработчиков выделять свои отзывчивые стили в отдельный раздел документа LESS, а не держать их в контексте.Позвольте мне привести пример того, как это может работать:

из Призыв к LESS принять адаптивный дизайн

Так что да, вы можете использовать медиа-запросыпрямо сейчас, но вы не можете написать их во вложенном синтаксисе.

Ознакомьтесь с комментариями к этому сообщению в блоге о некоторых предлагаемых решениях, которые выглядят так, будто они будут добавлены в less.js раньше, чем позже.

Answer 5

Поэтому я добавил простую @media print {.no-print {display: none;}} в следующий указанный файл .less:

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less">

, и он не будет работать.Тем не менее, наш гроссмейстер CSS отметил, что по умолчанию в .lesses используется тип экрана для мультимедиа, поэтому, если вы измените свою ссылочную меньшую ссылку на

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">

, то неожиданно будет выбрана печать @media в файле lessи начать работать в обычном режиме.

Надеюсь, это поможет кому-то так же смущенному, как и я.

Answer 6

Мы используем его в нашем проекте и никогда не находили его работающим.

создать внешний файл CSS, который не управляется менее. Файл менее css сможет получить доступ к шрифту.