Загрузочные запросы 3.0 Media

Я работаю над небольшим проектом на основе Boostrap 3 (пользовательская сборка html5boilerplate) и пытается использовать "официальные" медиа-запросы в документации по boostrap:

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

По какой-то причине медиа-запросы, похоже, не существуют (@screen-sm, screen-md, screen-lg), я ищу это в файлах начальной загрузки, но не могу найти ссылок.

Мой примерный код (main.css):

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {

    .header-btn {display: none;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {

    .slogan {display: none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}

В принципе, что происходит... ничего!

Я получаю эти ошибки в Chrome: http://i.solidfiles.net/0d0ce2d2a7.png

Любые идеи?

Ответ 1

Документация бутстрапа немного неясна.

Использование этих параметров @... для min-width на самом деле меньше синтаксиса, а не CSS.

Вы должны использовать утилиту настройки в Bootstrap (см. точки останова запросов Media), чтобы настроить то, что вам нужно для этих параметров screen-xxx ( например, установить screen-sm на 768px).

И затем, щелкнув кнопку "Скомпилировать" внизу, чем меньше кода скомпилируется в CSS. эта компиляция заменит все вхождения @screen-sm на 768px и то же самое для других параметров.

Ответ 2

@adonbajrami: Я думаю, вам нужно добавить @import "myStyle.less" в нижней части файла bootstrap.less.

Файл bootstrap.less импортирует variables.less. Включение файла в один и тот же родительский файл даст вашему файлу myStyle.less доступ к переменным, объявленным в переменных .less.

(Извините за отсутствие комментариев на месте, но я еще не в состоянии.)