Расширение возможностей CSS с помощью LESS

Упрощение разработки стилей адаптивного дизайна для современных Web-страниц

Узнайте, как создавать удобные каскадные таблицы стилей (CSS) для современных Web-сайтов с помощью языка LESS. CSS избавляет от необходимости применять при верстке страниц трюки вроде таблиц и невидимых изображений. Тем не менее технология CSS остается не слишком дружелюбной к разработчикам, и для того, чтобы исправить это, предпринимаются различные шаги. Одним из предложенных решений является динамический язык стилей LESS, обеспечивающий такие динамические расширения CSS, как переменные, миксины (mixins), операторы и функции. Язык LESS – это CSS-подобный язык, который прозрачно компилируется в CSS либо на стороне клиента, либо в процессе предварительной обработки на стороне сервера.

Юч Огбуджи, Главный консультант, Fourthought

Юч Огбуджи (Uche Ogbuji) - консультант и один из основателей Fourthought Inc., компании, занимающейся поставками программного обеспечения и предоставлением консалтинговых услуг в области XML-решений для корпоративного управления знаниями. Fourthought разрабатывает 4Suite, платформу с открытым исходным кодом, для XML, RDF и приложений по управлению знаниями. Юч Огбуджи - инженер в области вычислительной техники, он родился в Нигерии, сейчас живет и работает в Боулдер-Сити (Boulder), штат Колорадо, США. С ним можно связаться по адресу uche@ogbuji.net.



31.10.2013

Технология CSS подняла разработку Web-страниц на новый уровень, но продолжает оставаться статичной и ограниченной в синтаксических конструкциях. Эти ограничения являются целенаправленными и их смысл заключается в том, чтобы обеспечить всеохватывающую поддержку реализации. Однако разработчики и Web-дизайнеры часто находят работу с CSS утомительной. Многие платформы для Web-разработки содержат инструменты, упрощающие создание CSS с более гибкими возможностями и позволяющие затем компилировать результаты в статический CSS при развертывании на Web-сайте. В наши дни существует несколько узкоспециализированных проектов, сфокусированных на создании языка, предназначенного для компиляции в CSS. Одним из наиболее популярных проектов в данном направлении является Open Source-проект Алексиса Селлиера (Alexis Sellier) под названием LESS.

Язык LESS расширяет базовую функциональность CSS новыми возможностями, которые хорошо знакомы разработчикам – это переменные, миксины, операторы и функции. LESS компилируется в CSS либо с помощью JavaScript в Web-браузере, либо в процессе предварительной обработки с помощью инструментария JavaScript на стороне сервера. LESS используется во многих других проектах, включая популярный инструментарий Twitter Bootstrap. В этой статье я познакомлю вас с LESS (будет рассматриваться версия 1.4) и покажу, как использовать его для создания удобочитаемого и хорошо обслуживаемого кода CSS для современных Web-сайтов. Пример кода, рассматриваемого в этой статье, вы найдете в разделе Загрузка.

Введение

Загрузите последнюю версию LESS (на момент написания этой статьи это была версия 1.4; см. раздел Ресурсы) и можно приступать к изучению этого языка. Консорциум W3C разместил на своих вики-страницах некоторые материалы, посвященные изучению CSS. Я изучал представленные руководства в нужном порядке и могу сказать, что при необходимости вы можете изучать основы CSS и LESS в связке.

В листинге 1 представлен первый пример из руководства W3C.

Листинг 1. Пример базового кода CSS (listing1.css)
p {
  color: red;
  font-size: 12px;
  background-color: green;
}

В листинге 2 представлен HTML-код, заставляющий работать вышеприведенный CSS-код:

Листинг 2. HTML-код, связанные с кодом CSS из листинга 1 (listing2.html)
<head>
    <link rel="stylesheet" type="text/css" href="listing1.css">
</head>
<body>
    <p>This is a paragraph</p>
</body>

На рисунке 1 изображен результат открытия страницы listing2.html в браузере Safari операционной системы Mac OS X.

Рисунок 1. Отображение результатов кода CSS из листинга 1 в браузере
Рисунок 1. Отображение результатов кода CSS из листинга 1 в браузере

Избавляемся от магических чисел

Посмотрев на код из листинга 1, любой разработчик, вероятно, сразу же обратит внимание на то, что значения в CSS жестко заданы. Этот подход, над которым часто издеваются программисты, иногда называют "магическими числами". Одной из наиболее важных возможностей языка LESS являются переменные. В листинге 3 представлена версия примера из листинга 1 с использованием переменных.

Листинг 3. Пример базового кода CSS с использованием переменных LESS (listing3.less)
@main-text-color: red;
@main-text-size: 12px;
@main-text-bg: green;

p {
  color: @main-text-color;
  font-size: @main-text-size;
  background-color: @main-text-bg;
}

Синтаксис листинга 3 не является корректным кодом CSS, поэтому нельзя просто заменить в HTML-коде файл listing1.css на файл listing3.less. Необходимо одновременно обновить HTML-код на сервере и вызвать компилятор JavaScript, как показано в листинге 4.

Листинг 4. HTML-код, использующий LESS-версию базового CSS-кода (listing4.html)
<head>
    <link rel="stylesheet/less" type="text/css" href="listing3.less">
</head>
<body>
    <p>This is a paragraph</p>
    <script src="less.js" type="text/javascript"></script>
</body>

Обратите внимание на то, что в листинге 4 я разместил тег script в разделе body. Традиционно большинство разработчиков размещает теги script в разделе head. Тем не менее, можно помещать их и в разделе body – преимущество при этом состоит в том, что (цитируя спецификацию HTML 4) "элементы script обрабатываются последовательно по мере загрузки документа". Сегодня у многих Web-сайтов сценарии размещаются в конце файлов, поэтому основное содержимое загружается без лишних задержек, обусловленных обработкой сценариев.


Компиляция на стороне сервера

Способы создания кода LESS и его развертывания для быстрого отображения в браузерах, показанные ранее, вполне подходят для использования, однако такой подход требует определенных затрат. Каждый раз при открытии Web-страницы в браузере пользователя выполняется компиляция JavaScript, требующая вычислительных ресурсов и приводящая к небольшим задержкам при загрузке страниц. При загрузке кода из листинга 4 в мой браузер я вижу следующее сообщение в консоли JavaScript: "less: css generated in 36ms" (т. е. генерация CSS занимает 36 мс.). Конечно, 36 миллисекунд – это немного, но это ненужная трата вычислительных ресурсов и времени. Быстрая загрузка страниц является важным фактором при работе в Интернете.

После переноса вашего кода в рабочую среду следует перейти на использование компиляции кода LESS в CSS с помощью инструментов JavaScript на стороне сервера. Популярным методом, описанным на Web-сайте LESS, является использование сценария Node.js. Я предпочитаю использовать Rhino – самостоятельную JavaScript-библиотеку, разработанную Mozilla Foundation. Чтобы начать использовать Rhino вместе с LESS, необходимо загрузить и проинсталлировать Rhino (см. раздел Ресурсы). Скопируйте файл js.jar в установочную директорию сборки. Вам потребуется специальная версия less.js, которую можно получить, загрузив полную версию LESS с Web-сайта GitHub (см. раздел Ресурсы). В этой статье используется версия less.js-master/dist/less-rhino-1.4.0.js. Скопируйте файл less-rhino-1.4.0.js в директорию с JAR-архивом Rhino, и теперь можно компилировать код LESS в CSS.

Для компиляции файла listing3.less перейдите в директорию, в которой он находится, и выполните следующую команду:

java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

После компиляции сгенерированный CSS-код будет находиться в файле listing3.css. Ниже приводится его содержимое:

p {
  color: #ff0000;
  font-size: 12px;
  background-color: #008000;
}

В файле listing3.css все переменные LESS заменены их значениями, а названия цветов – их RGB-эквивалентами (например, #ff0000 вместо red). Теперь можно использовать файл listing3.css на сервере в качестве обычного CSS-файла.


Альтернативный синтаксис комментариев в LESS

Одним из преимуществ LESS является возможность более удобного создания однострочных комментариев. В листинге 5 приведен пример стандартного комментария в соответствии с руководством CSS консорциума W3C.

Листинг 5. Пример CSS с использованием комментария (listing 5.css)
p {
  color: red;
  /* This is a comment */
  font-size: 12px;
}

Ниже приведен тот же самый пример, написанный на LESS.

Листинг 6. Предыдущий пример с использованием упрощенного комментария (listing6.less)
p {
  color: red;
  // This is a comment
  font-size: 12px;
}

Синтаксис, используемый в листинге 6, более привычен для программистов и более удобен для набора. Однако в силу особенностей обработки LESS-кода такие комментарии будут отсутствовать в сгенерированном CSS-коде. Если требуется обеспечить отображение комментариев в браузере (например, это могут быть предупреждения об авторских правах), необходимо использовать стандартный синтаксис CSS.

В оставшейся части руководства W3C подробно рассматриваются синтаксис селекторов и общие свойства CSS. На этом я перейду к рассмотрению более общего варианта использования LESS, который все более широко применяется на практике Web-разработчиками.


Разработка адаптивного дизайна

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

В основе адаптивного дизайна лежат медиа-запросы (media queries) CSS3, обеспечивающие применение правил CSS в зависимости от типа пользовательского устройства и в особенности от его размера экрана. LESS упрощает разработку адаптивного дизайна в CSS и использованием медиа-запросов. В качестве демонстрации я рассмотрю отличный пример кода адаптивного дизайна, автором которого является участник developerWorks Боб Ли (Bob Leah), и скомпилирую его LESS-версию. Ссылку на загрузку файла responsive.less вы найдете в разделе Загрузка.

Операторы

Одним из ключевых приемов, используемых в примере responsive.less, является задание основных размеров экранов при помощи переменных и их дальнейшее масштабирование в соответствии с размером рабочей области экрана. Для масштабирования я использую операторы LESS. Например, фрагмент кода в листинге 7 содержит операторы умножения, с помощью которых выполняется масштабирование изображения заголовка страницы.

Листинг 7. Использование умножения в LESS
#banner img {
  max-width: (@bannerwidth * @scale);
  max-height: (@mainheight * @scale);
}

Переменные @bannerwidth и @mainheight в листинге 7 являются значениями по умолчанию, которые умножаются на значение переменной @scale. Во избежание путаницы в синтаксисе текущая версия LESS требует, чтобы все выражения, содержащие операторы, были заключены в скобки.

Вложенные правила

Одной из наиболее полезных возможностей LESS являются вложенные правила CSS. Вложенные правила помогают создавать легко читаемый код. В листинге 8 (измененный фрагмент кода responsive.less) я разместил общие правила CSS таким образом, что они оказались вложенными в медиа-запросы.

Листинг 8. Использование вложенных правил в LESS
@media (min-width: 401px) and (max-width: 800px) {
  @scale: 0.75
  #banner { width: (@bannerwidth * @scale); }
  #banner img {
    max-width: (@bannerwidth * @scale);
    max-height: (@mainheight * @scale);
  }
  #main { width: (@mainwidth * @scale - @extrabuffer); }
  #main-content {
    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
    float: left;
  }
}

Код из листинга 8, содержащий вложенные правила, эквивалентен нижеприведенному коду из листинга 9, содержащему несколько невложенных правил CSS.

Листинг 9. Предыдущий пример без использования вложенных правил
@scale: 0.75

@media (min-width: 401px) and (max-width: 800px) and #banner {
   width: (@bannerwidth * @scale);
}

@media (min-width: 401px) and (max-width: 800px) and #banner img {
{
  max-width: (@bannerwidth * @scale);
  max-height: (@mainheight * @scale);
}

@media (min-width: 401px) and (max-width: 800px) and #main {
   width: (@mainwidth * @scale - @extrabuffer);
}

@media (min-width: 401px) and (max-width: 800px) and #main-content {
    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
    float: left;
}

В примере из листинга 9 схожие правила не сгруппированы; кроме того, при многократном определении медиа-запроса нарушается правило DRY (don't repeat yourself – не повторяйся).

Миксины

Другой прием LESS, помогающий уменьшить количество повторений, заключается в возможности создавать наборы правил, которые можно добавлять в другие правила. Такой подход, получивший название mixin – миксины - я использую в файле responsive.less, где задаю с помощью миксинов общие правила для двух различных медиа-запросов, как показано в листинге 10.

Листинг 10. Использование миксинов в LESS
.media-body (@scale: 0.75) {
  #banner { width: (@bannerwidth * @scale); }
  #banner img {
    max-width: (@bannerwidth * @scale);
    max-height: (@mainheight * @scale);
  }
  #main { width: (@mainwidth * @scale - @extrabuffer); }
  #main-content {
    width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
    float: left;
  }
  #widget-container {
    width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer);
    float: right;
  }
  .widget-content {
    width: (@widgetinwidth * @scale * 0.75 - @extrabuffer);
  }
}

//Правила для просмотра на экранах шириной от 401 до 800 пикселей
@media (min-width: 401px) and (max-width: 800px) {
  .media-body;
}

//Правила для просмотра на экранах шириной менее 400 пикселей
@media (max-width: 400px)  {
  .media-body(0.3);
  //Дополнительные действия остальных правил
  #main-content { padding: 0px; }
  #widget-container { width: padding: 0px; }
  .widget-content { margin: 5px; }
  .widget-text { display: none; } 
}

В миксины можно передавать параметры – например, коэффициент масштабирования для экранов из листинга 10. По умолчанию коэффициент масштабирования равен 0.75. В листинге 10 этот коэффициент по умолчанию используется для просмотра на экранах шириной от 401 до 800 пикселей. Для просмотра на экранах шириной менее 400 пикселей коэффициент масштабирования меняется на 0.3, а также добавляются дополнительные правила.

На рисунке 2 показан вид страницы responsive.html с использованием кода responsive.less в окне браузера. Я сузил окно браузера, чтобы его ширина стала менее 400 пикселей, и вы можете посмотреть, как будет выглядеть страница на мобильных устройствах с небольшими экранами.

Рисунок 2. Вид страницы responsive.html в браузере устройства с узким экраном
Рисунок 2. Вид страницы responsive.html в браузере устройства с узким экраном

В браузере Safari на компьютере Mac медиа-запрос для экрана шириной менее 400 пикселей срабатывает тогда, когда ширина окна браузера приближается к 500 пикселям. Такое поведение является важным фактором. Медиа-запросы основаны на концепции окна просмотра (viewport). Окно просмотра – это видимая область браузера, задаваемая в CSS в пикселях и определяемая устройством и браузером. Пиксели CSS могут отличаться от пикселей устройства; такое различие может возникать, например, при масштабировании страницы в браузере (см. раздел Ресурсы). Кроме того, размер окна просмотра, заданный устройством или браузером, может отличаться от того, что является размером фактического окна. Эта ситуация изображена на рисунке 2: ширина окна составляет приблизительно 500 пикселей, но CSS воспринимает ее как окно просмотра шириной 400 пикселей. Этот пример подчеркивает тот факт, что адаптивный дизайн, как и все технологии Web-разработки, требует всестороннего тестирования на самых различных устройствах.


Заключение

Я – архитектор и разработчик программного обеспечения, но не Web-дизайнер. LESS позволяет мне использовать для быстрой разработки CSS мои навыки программирования, которых у меня намного больше. Переменные и миксины позволяют быстро менять необходимые настройки и смотреть, что из этого получится, вместо того чтобы просматривать весь CSS-файл и искать нужные фрагменты кода для замены.

Адаптивный дизайн является известным средством для создания доступных и управляемых мобильных Web-проектов. Также он полезен при разработке альтернативных режимов просмотра, например, режима просмотра для печати. А поскольку управление различными стилями, применяемыми для различных медиа-запросов, может оказаться весьма громоздким, то возможности LESS для упрощения и структурирования CSS-кода являются еще более ценными.


Загрузка

ОписаниеИмяРазмер
Примеры кода LESS, CSS и HTML для этой статьиLessCssCode.zip120 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • код проекта LESS или его альтернативные версии на Web-сайте GitHub (EN). Пользователям Mac могут пригодиться дополнительные инструкции (EN).
  • Загрузите инструментарий Rhino (EN) для работы с JavaScript в режиме командной строки.
  • Оцените продукты IBM (EN) любым удобным для вас способом: загрузите ознакомительные версии продуктов, поработайте с ними в онлайновом режиме или используйте их в облачной среде.

Обсудить

  • Следите за блогом developerWorks в Твиттере (EN).
  • Присоединяйтесь к сообществу developerWorks. Связывайтесь с другими пользователями developerWorks и знакомьтесь с блогами, форумами, группами и вики-ресурсами, ориентированными на разработчиков (EN).

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source
ArticleID=950871
ArticleTitle=Расширение возможностей CSS с помощью LESS
publish-date=10312013