Медиа-запросы вместе с Less



Медиа-запросы вместе с Less

29 Октября 2014 года

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

Как это было раньше

До использования CSS-препроцессоров все мы писали одинаково:

// Area site
.area {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.area {
width: 750px;
}
}
@media (min-width: 1024px) {
.area {
width: 970px;
}
}

Согласитесь, это выглядит ужасно. Мало того, что нужно писать полный запрос, класс .area , так и нужно помнить точки перелома 768px и 1024px . Не комильфо. Будем думать над решением.

Как это можно делать сейчас

CSS-препроцессор, на самом деле, может реально упростить вам работу с выражениями вида @media . Вне зависимости от предложенных способов ниже, профит в скорости разработки будет в любом случае.

Случай первый — Переменные точек

Достаточно просто объявить переменные, которые будут содержать значения точек перелома нашего сайта:

// Mode: Tablet
@tablet: 768px;
@tablet-area: 750px;
// Mode: Desktop
@desktop: 1024px;
@desktop-area: 970px;
// Area site
.area {
margin-left: auto;
margin-right: auto;
}
@media (min-width: @tablet) {
.area {
width: @tablet-area;
}
}
@media (min-width: @desktop) {
.area {
width: @desktop-area;
}
}

Отлично, теперь наш код стал слегка универсальнее. Но это ещё не все — идём дальше.

Случай второй — Переменные выражения

Препроцессор Less позволяет прописывать в переменные не только значения, но и строки. Используем эту возможность:

// Mode: Tablet
@tablet: ~"(min-width: 768px)";
@tablet-area: 750px;
// Mode: Desktop
@desktop: ~"(min-width: 1024px)";
@desktop-area: 970px;
// Area site
.area {
margin-left: auto;
margin-right: auto;
}
@media @tablet {
.area {
width: @tablet-area;
}
}
@media @desktop {
.area {
width: @desktop-area;
}
}

Теперь наш код выглядит ещё лучше, но до совершенства ещё далеко…

Случай третий — Вложенность

Не стоит забывать, что в Less, да и во всех препроцессорах, реализована вложенность классов — это так же работает и с медиа-запросами.

// Mode: Tablet
@tablet: ~"(min-width: 768px)";
@tablet-area: 750px;
// Mode: Desktop
@desktop: ~"(min-width: 1024px)";
@desktop-area: 970px;
// Area site
.area {
margin-left: auto;
margin-right: auto;
@media @tablet {
width: @tablet-area;
}
@media @desktop {
width: @desktop-area;
}
}

Выглядит компактнее и не требует указания изменяемого класса. Однако, благодаря такому стилю написания, в CSS у вас будет куча разбросанных медиа-запросов — это не очень красиво с точки зрения организации кода, но куда лучше, чем ничего 🙂

Случай четвертый — Примесь

Если вы хотите написать свою примесь для медиа-запросов, то сделать это можно с помощью блока отдельных правил:

// Mode: Tablet
@tablet-area: 750px;
.tablet(@rules) {
@media (min-width: 768px) { @rules(); }
}
// Mode: Desktop
@desktop-area: 970px;
.desktop(@rules) {
@media (min-width: 1024px) { @rules(); }
}
// Area site
.area {
margin-left: auto;
margin-right: auto;
.tablet ({
width: @tablet-area;
});
.desktop ({
width: @desktop-area;
});
}

Такой метод удобен, если у вас медиа-запрос содержит не только типичные запросы вроде min-width и max-width , но и другие, например, определения Retina дисплея:

.retina(@rules) {
@media  only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
@rules();
}
}
.brand {
background-image: url("images/brand.png");
.retina ({
background-image: url("images/brand@2x.png");
});
}

Случай пятый — Примесь с условием

Все мы знаем, что в Less нет условных конструкций (за что его многие ругают), хотя организовать их всё же можно:

.media(@screen, @rules) {
@tablet-area: 750px;
@desktop-area: 970px;
& when (@screen = tablet) {
@media (min-width: 768px) {
@rules();
}
}
& when (@screen = desktop) {
@media (min-width: 1024px) {
@rules();
}
}
}
// Area site
.area {
margin-left: auto;
margin-right: auto;
.media (tablet, {
width: @tablet-area;
});
.media (tablet, {
width: @desktop-area;
});
}

Bellisimo — Прекрасно!

Какой метод лучше всего?

Определенного ответа на этот вопрос я дать не могу. Все методы хороши и экономят время, но ухудшают читаемость. Если для вас время превыше всего, и есть пара минут на запоминание некоторых основ, вроде названия примесей и их параметров, то, наверное, лучше использовать четвертый или пятый метод. Ведь согласитесь, все мы пишем функции с параметрами на JavaScript, и это нормальная практика, а в случае Less — это просто приятное дополнение возможностей описания CSS.

Поддержите проект — добавьте сайт в исключения AdBlock

Делимся на оплату хостинга или кофе


http://canonium.com/index.php/articles/css-less-media-query

Губарь Маргарита Александровна