Последние несколько лет сайты, в верстке которых не используются медиа-запросы, обречены на провал. Давайте признаем, что сейчас сайт должен быть оптимизирован для всех возможных устройств и сопутствующих им разрешений. Писать каждый раз весь медиа-запрос — дело утомительное. Попробуем упростить себе жизнь, используя 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

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