Less (язык стилей)

Installation of LESS

Let us now understand the installation of LESS.


Dowload the Latest Features version of the zip file.

Step 2 − Run the setup to install the Node.js on your system.

Step 3 − Next, Install LESS on the server via NPM (Node Package Manager). Run the following command in the command prompt.

npm install -g less

Step 4 − After successful installation of LESS, you will see the following lines on the command prompt −

`-- less@2.6.1
   +-- errno@0.1.4
   | `-- prr@0.0.0
   +-- graceful-fs@4.1.3
   +-- image-size@0.4.0
   +-- mime@1.3.4
   +-- mkdirp@0.5.1
   | `-- minimist@0.0.8
   +-- promise@7.1.1
   | `-- asap@2.0.3
   +-- request@2.69.0
   | +-- aws-sign2@0.6.0
   | +-- aws4@1.3.2
   | | `-- lru-cache@4.0.0
   | |   +-- pseudomap@1.0.2
   | |   `-- yallist@2.0.0
   | +-- bl@1.0.3
   | | `-- readable-stream@2.0.6
   | |   +-- core-util-is@1.0.2
   | |   +-- inherits@2.0.1
   | |   +-- isarray@1.0.0
   | |   +-- process-nextick-args@1.0.6
   | |   +-- string_decoder@0.10.31
   | |   `-- util-deprecate@1.0.2
   | +-- caseless@0.11.0
   | +-- combined-stream@1.0.5
   | | `-- delayed-stream@1.0.0
   | +-- extend@3.0.0
   | +-- forever-agent@0.6.1
   | +-- form-data@1.0.0-rc4
   | | `-- async@1.5.2
   | +-- har-validator@2.0.6
   | | +-- chalk@1.1.1
   | | | +-- ansi-styles@2.2.0
   | | | | `-- color-convert@1.0.0
   | | | +-- escape-string-regexp@1.0.5
   | | | +-- has-ansi@2.0.0
   | | | | `-- ansi-regex@2.0.0
   | | | +-- strip-ansi@3.0.1
   | | | `-- supports-color@2.0.0
   | | +-- commander@2.9.0
   | | | `-- graceful-readlink@1.0.1
   | | +-- is-my-json-valid@2.13.1
   | | | +-- generate-function@2.0.0
   | | | +-- generate-object-property@1.2.0
   | | | | `-- is-property@1.0.2
   | | | +-- jsonpointer@2.0.0
   | | | `-- xtend@4.0.1
   | | `-- pinkie-promise@2.0.0
   | |   `-- pinkie@2.0.4
   | +-- hawk@3.1.3
   | | +-- boom@2.10.1
   | | +-- cryptiles@2.0.5
   | | +-- hoek@2.16.3
   | | `-- sntp@1.0.9
   | +-- http-signature@1.1.1
   | | +-- assert-plus@0.2.0
   | | +-- jsprim@1.2.2
   | | | +-- extsprintf@1.0.2
   | | | +-- json-schema@0.2.2
   | | | `-- verror@1.3.6
   | | `-- sshpk@1.7.4
   | |   +-- asn1@0.2.3
   | |   +-- dashdash@1.13.0
   | |   | `-- assert-plus@1.0.0
   | |   +-- ecc-jsbn@0.1.1
   | |   +-- jodid25519@1.0.2
   | |   +-- jsbn@0.1.0
   | |   `-- tweetnacl@0.14.1
   | +-- is-typedarray@1.0.0
   | +-- isstream@0.1.2
   | +-- json-stringify-safe@5.0.1
   | +-- mime-types@2.1.10
   | | `-- mime-db@1.22.0
   | +-- node-uuid@1.4.7
   | +-- oauth-sign@0.8.1
   | +-- qs@6.0.2
   | +-- stringstream@0.0.5
   | +-- tough-cookie@2.2.2
   | `-- tunnel-agent@0.4.2
   `-- source-map@0.5.3

Options

Before loading the script file less.js, options have to be set in a global less object.

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>
  • async − It is a Boolean type. The imported files are requested whether with the option async or not. By default, it is false.

  • dumpLineNumbers − It is a string type. In the output css file, the source line information is added when the dumpLineNumbers is set. It helps in debugging the particular rule came from.

  • env − It is a string type. The env may run on development or production. Development is set automatically when the document URL starts with file:// or it is present in your local machine.

  • errorReporting − When the compilation fails, the error reporting method can be set.

  • fileAsync − It is a Boolean type. When a page is present with a file protocol then it can request whether to import asynchronously or not.

  • functions − It is object type.

  • logLevel − It is a number type. It displays the logging level in the javascript console.

    • 2 : Information and errors

    • 1 : Errors

    • 0 : Nothing

  • poll − In the watch mode, the time displays in milliseconds between the polls. It is an integer type; by default, it is set to 1000.

  • relativeUrls − The URLs adjust to be relative; by default, this option is set as false. This means that the URLs are relative already to the entry less file. It is a Boolean type.

  • globalVars − Inserts the list of global variables into the code. The string type variable should be included in quotes

  • modifyVars − It is unlike the global variable option. It moves the declaration at the end of your less file.

  • rootpath − It sets paths at the start of every URL resource.

  • useFileCache − Uses per session file cache. The cache in less files is used to call the modifyVars where all the less files will not retrieve again.

Previous Page Print Page

Next Page  

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

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

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-разработчиками.

Setting Options

Before the script tag, options can be set on the less object programmatically. It will affect all the programmatic usage of less and the initial link tags.

For instance, we can set option as followed −

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

We can also set the option in another format on the script tag as specified below −

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

You can also add these options to the link tags.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

The points that need to be considered for attribute options are −

  • window.less < script tag < link tag are the importance level.


  • The data attributes cannot be written in camel case; the link tag option are represented as time options.

  • The data attributes with non-string values should be JSON valid.

Препроцессор Koala¶

Задача этого учебника заключается в быстром освоении метаязыка LESS, именно по этой причине, на начальном этапе, я предлагаю Вам для компиляции использовать программный продукт Koala.

Этот программный продукт позволит нам не тратить время на настройку среды, которая будет отслеживать изменение файлов и компиляцию их в файлы, что идеально для первичного знакомства с метаязыком LESS не отвлекаясь на технические особенности по настройке той, или иной среды.

После этого необходимо создать файл и подключить в программе Koala папку в которой находится этот файл (нажмите на +), например, в моем случае папка less:

Рис.3 Пример подключения папки с файлом less.

Вы должны увидеть в окне программы файл, который вы создали заранее. Кликните под название файла, как показано на изображение ниже, это позволит Вам выбрать путь куда будут компилироваться CSS файлы.

Рис.4 Выбор пути для компиляции CSS файлов.

Я выбрал ту же папку в которой находится less файл, в результате у вас должно получиться следующее:

Рис.5 Установка каталога для компиляции CSS.

Теперь программа Koala будет отслеживать все изменения в less файле и при их изменении сразу будет проводить их компиляцию в css. После первой компиляции вы увидите в главном окне файл css, кликнув под который, при необходимости вы сможете по аналогии настроить путь в который будут сохраняться файлы css, но уже минифицированные (стили без пробелов в одну строку). Как правило, такие стили используются на «боевых» (готовых) проектах.

Рис.6 Настройка компиляции минифицированной версии CSS файла.

Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов «на лету».

Значения параметров по умолчанию¶

Важной отличительной чертой примесей является возможность указывать значения по умолчанию для переменных. То есть в случае, если примесь вызвана, а значения для параметров не были переданы или переданы частично, то ошибки компилятор не выдаст, а возьмёт значение, указанное по умолчанию

Эта запись не имела бы смысла, но так как указано значение по умолчанию, то при компиляции будет подставлено именно оно:

Все было бы хорошо, если бы для всех параметров указывались значения по умолчанию и их не нужно было изменять в зависимости от контекста применения примеси. На практике редко встречаются примеси, у которых используются указанные по умолчанию значения.

Рассмотрим пару примеров, которые показывают различные ситуации, часто встречающиеся на практике в реальных проектах.

Пример 3.4.2

Иногда необходимо изменить не все параметры, а лишь некоторые из них. Делается это следующим образом:

Вместо того, чтобы писать все три значения для переменных, я указал конкретную переменную и обновил её значение. Компилятор возьмёт значения по умолчанию для переменных и , а значение переменной будет взято из объявления вызова примеси.

Пример 3.4.3

Если нужно изменить переменные, указанные слева, то писать переменные не нужно. Просто передайте при вызове необходимое количество значений.

После компиляции получится следующая картина:

Пример 3.4.4

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

Судя по правилам математики должно получиться 6.

Разновидности препроцессоров¶

Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:

  • Less
  • Sass (SCSS)
  • Stylus

Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Less

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

  • Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
  • SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют , , и некоторые скобки).

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

В этом разделе статьи мы с Вами научимся использовать в LESS CSS правила (директивы), рассмотрим нюансы их применения и поймем в чем заключаются принципиальные отличия при их компиляции.

Правила с условием

Правила (директивы) с условием могут ссылаться на какой-то тип состояния, который в любой момент может оказаться истинным, или ложным. Например, если условие истинно, то будет использован один блок объявлений, а если ложно, то другой. К правилам с условием относятся следующие директивы CSS:

  • — медиа запросы, которые используются для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и тому подобное.
  • — позволяет проверить, поддерживает ли браузер пользователя, то или иное свойство CSS, указанное в виде пары ( свойство: значение ) и на основании этого задать стили для необходимого элемента, или элементов.
  • (отложено до 4 уровня спецификации CSS) — позволяет ограничить стилистические правила в зависимости от URL адреса документа (набор стилей будет применен только к определенным страницам сайта).

В этой статье я предлагаю Вам остановится на рассмотрении использования только правил (директив) , так как они в отличии от правил и поддерживаются всеми актуальными браузерами. Любое правило может быть вложено по аналогии с селекторами, давайте разберем эту полезную возможность LESS на следующем примере:


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

В результате компиляции мы получим следующий результат:

В этом примере после компиляции мы получили два однотипных медиа выражения в таблице стилей. Дублирование кода не считается хорошей практикой, и в большинстве случаев рациональней будет определить один медиа запрос, а в него уже вкладывать необходимые селекторы, обязательно учитывайте этот момент при работе.

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

В этом примере мы для элемента , который определяет видимое содержимое страницы определили три медиа запроса:

  • Первый медиа запрос предназначается для всех экранов компьютеров и определяет цвет текста и заднего фона.
  • Второй медиа запрос вложен внутри первого медиа запроса и определяет, что если максимальная ширина области просмотра 600 пикселей, или меньше, то цвет текста и заднего фона инвертируются (будут противоположными).
  • Третий медиа запрос предназначен для печатных страниц и для режима предварительного просмотра печати и определяет, что цвет заднего фона будет белым, а цвет текста черным.
  • Четвертый медиа запрос вложен внутри третьего медиа запроса и предназначен для печатных страниц и для режима предварительного просмотра печати, при этом устройство должно быть «цветным», в этом случае пользователь увидит цвет текста зеленым, конечно, если он при этом не страдает дальтонизмом.

Результат компиляции будет следующим:

Прочие правила

Прочие правила (директивы), или их можно охарактеризовать как правила без условий, они как и правила с условием могут быть вложены по аналогии с селекторами. Главным отличительным моментом при их компиляции будет то, что они будут как-будто вырываться из текущего контекста и помещаться в таблицу стилей с тем же телом (эффект всплытия — bubbling).

Для понимания сразу перейдем к рассмотрению примера в котором мы используем правило , которое позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации и правило , которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов».

В этом примере я для своего удобства подключил скрипт JavaScript, который выступает в роли компилятора и преобразует файл в каскадные таблицы стилей CSS на «лету». В файле less я разместил следующие стили:

Обратите внимание, что мы вложили правило и правило внутри элемента. Для того, чтобы увидеть результат преобразования (компиляции) воспользуйтесь компилятором Koala

В результате у Вас должно получиться следующее:

Главное, что необходимо понять из этого примера, это то, что правила, которые не имеют определенных условий могут быть вложены по аналогии с селекторами, но при компиляции будут размещаться с теми же телами в общем потоке стилей.

Результат:

Рис.8 Пример использования правил и в LESS.

Работа с селекторами, медиа-запросами и файлами¶

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

В этой главе я расскажу о комментариях, вложенных селекторах, работе с файлами, группировке селекторов и многих других интересных вещах.

  • Комментарии
  • Вложенные правила
  • Ссылка на родителя селектора
  • Группировка селекторов
  • Использование медиавыражений
  • Импорт стилей
  • Домашнее задание

Example

Following is a simple example of LESS.

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Let us now create a file style.less which is quite similar to CSS, the only difference is that it will be saved with .less extension. Both the files, .html and .less should be created inside the folder nodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Compile style.less file to style.css by using the following command −

lessc style.less style.css

When you run the above command, it will create the style.css file automatically. Whenever you change the LESS file, it’s necessary to run the above command in the cmd and then the style.css file will get updated.

The style.css file will have the following code when you run the above command −

Использование LESS

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

  1. Css2Less.

  2. Lessify.

Применение данной надстройки для CSS не вызовет никаких трудностей, она прекрасно работает, как на стороне клиента, так и на web-сервере.

Для начала работы с LESS на стороне клиента, потребуется приписать в веб-документе код ссылкой на файл с расширением less и дать ему атрибут rel, а также прикрепить при помощи кода файл less.js, который можно в открытом доступе получить на специализированном сайте. Данный метод пригодится тем, кто применяет в работе новейшие версии браузеров и осуществляет свою деятельность на локальном сервере.

Чтобы использовать препроцессор на web-сервере, потребуется скомпилировать файл с кодом через Node или использовать различные другие инструменты, которые могут предоставить сторонние производители. Среди них могут быть:

  1. WinLess (для Майкрософт Виндоуз);

  2. Less.app (для Мас ОС);

  3. Simpless;

  4. Crunch.

Какой смысл использования препроцессоров?¶

Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня

Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными

CSS — это сложно

Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.

Доступная документация


Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

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

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

Структура и логичность кода

Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:

Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.

При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.

Примеси

Примеси позволяют включать целый набор свойств из одного набора правил в другой путём включения имени класса в качестве одного из свойств другого класса. Такое поведение можно рассматривать как разновидность констант или переменных. Они также могут вести себя подобно функциям, принимая аргументы. В чистом CSS повторяющийся код должен быть повторён в нескольких местах — примеси делают код чище, понятнее и упрощают его изменение.

.rounded-corners (@radius 4px) {
  -webkit-border-radius @radius;
  -moz-border-radius @radius;
   border-radius @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Данный LESS-код будет скомпилирован в следующий CSS-файл:

#header {
  -webkit-border-radius 4px;
  -moz-border-radius 4px;
   border-radius 4px;
}
#footer {
  -webkit-border-radius 10px;
  -moz-border-radius 10px;
   border-radius 10px;
}

Вложенные селекторы¶

Используя каскадные таблицы стилей Вам зачастую необходимо использовать селекторы потомков, которые позволяют единообразно отформатировать элементы, которые расположены (содержатся) внутри других элементов. Давайте перейдем к примеру и допустим, что у нас есть простая панель навигации, которая описана с помощью следующих стилей:

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

С помощью LESS мы можем структурировать все наши селекторы потомков в одном блоке следующим образом:

Благодаря вложенности мы получили структуру, которая интуитивна понятна даже при беглом чтении кода, в дальнейшем её будет легко поддерживать и при необходимости оперативно вносить изменения.

Обратите внимание, что теперь нам нет необходимости описывать селекторам полный путь от родительского элемента, LESS это сделает за нас автоматически при компиляции. Результат компиляции будет соответствовать первоначальным стилям CSS, которые мы привели в начале примера

Более подробную информацию об использовании различных типов селекторов в LESS вы узнаете в последующих статьях этого учебника.

Подключение LESS¶

В этой статье мы с Вами рассмотрим два варианта работы с LESS, если быть точнее, то с файлами . Первый вариант предусматривает использование файлов напрямую в браузере пользователя с подключением необходимого скрипта JavaScript для компиляции на «лету».

Второй вариант предусматривает использование специального препроцессора, который будет компилировать файлы в файлы каскадных таблиц стилей — .

Начнем с первого варианта:

По аналогии с каскадными таблицами стилей вам необходимо подключить файл к Вашему HTML документу с использованием тега :

После этого вам необходимо скачать файл со скриптом, или, как вариант, получить ссылку на сеть доставки контента (CDN) на официальном сайте метаязыка LESS. Давайте остановимся на первом варианте и подключим скачанный файл:

Обратите внимание, что необходимо подключать файл со скриптом уже после того как вы подключили файл. Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом как вы понимаете компиляция из LESS в CSS будет происходить на стороне браузера (на «лету»)

Давайте перейдем к рассмотрению примера в котором начнем использовать LESS:

В этом примере мы создали отдельный файл в котором указали следующие стили:

Кроме того, мы подключили к документу скрипт JavaScript, который выступает в роли компилятора и преобразует метаязык LESS в каскадные таблицы стилей CSS.

Результат преобразования будет следующий:

Как вы можете заметить результат компиляции (преобразования) практически идентичен первоначальным стилям, за исключением того, что RGB значение цвета было конвертировано в шестнадцатеричную систему HEX, что не влияет на внешний вид, но незначительно сокращает количество символов для описания этого стиля.

Результат:

Рис. 2 Пример подключения less файла к документу.

Если вы решили повторить этот пример локально на своем компьютере и не увидели результат примера, показанный на изображении выше, то скорее всего вы сможете найти в консоли браузера подобную ошибку: «Failed to load file:///***/2.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.»

Мы с Вами не будем вникать в локальные политики разных браузеров, отключать их и запускать браузеры с определенными ключами, просто попробуйте воспользоваться браузером Firefox для этого примера, или переходите к дальнейшему чтению.

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

В настоящее время существует большое количество инструментов для компилиции LESS в CSS, начиная от компиляции на стороне сервера, заканчивая отдельными программными продуктами, один из которых мы сейчас с Вами рассмотрим

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

Почему бы не подождать развития CSS?¶

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности)

С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

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


С этим читают