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

StackOverflow https://stackoverflow.com/questions/4474477

  •  11-10-2019
  •  | 
  •  

Вопрос

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

Спасибо!

Это было полезно?

Решение

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

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

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

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

Другие советы

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

И меньше. JS, так и MessCSS/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;
 }
}

Пожалуйста, обратитесь к MENSE.JS Документация а также Без точечная документация Чтобы получить больше информации.

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

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

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

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

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

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

из Призыв к меньшему восприятию отзывчивого дизайна

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

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

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

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

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

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

И это не сработает. Тем не менее, наш Гуру CSS отметил, что по умолчанию. 

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top