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

Привет, кто-нибудь знает, как делать медиа-запрос с помощью 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.

Спасибо!

Ответ 1

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

Единственное, что я вижу для этого в вашем случае, это:

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

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

Ответ 2

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

Оба less.js и lessCss/dotless поддерживают @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 и бесчисленную документацию.

Ответ 3

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

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

и он воспроизвел его точно так же в файле .css. Там также есть функция escape в less.js, но она, похоже, работает только на значениях, поэтому я не думаю, что вы могли бы использовать ее для этого.

body {
    color: e('red');
}

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

Ответ 4

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

from Вызов LESS для принятия адаптивного дизайна

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

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

Ответ 5

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

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

Ответ 6

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

<link rel="stylesheet/less" href="#" onclick="location.href='http://worldMaps.org/maps/styles/growth.less'; return false;">

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

<link rel="stylesheet/less" href="#" onclick="location.href='http://worldMaps.org/maps/styles/growth.less'; return false;" media="all">

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

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