Стандартное использование медиа-запросов в CSS:
// Area site .area { margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .area { width: 750px; } } @media (min-width: 1024px) { .area { width: 970px; } }
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; }); }
Источник – https://canonium.com/articles/css-less-media-query