Less подключить css файл
Что такое LESS?
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.
Как использовать LESS
Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто.
Используем LESS и Javascript файл
Для начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.
Затем создадим файл с расширением .less и привяжем его с помощью такого кода:
Удостоверьтесь, что вы прикрепили LESS файл перед JS.
Теперь LESS файл будет работать также как и обычный CSS.
Компилируем LESS файл
Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака.
Укрощаем мощь LESS
Наконец давайте немного развлечемся – попишем LESS код. Как вы увидите код очень легко читать и понимать, так как используется сходный с CSS синтаксис.
Переменные
Переменные в LESS работают так же как в PHP, JS и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.
В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:
Область видимости переменных
Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.
Также можно определять переменную внутри CSS правила. В этом случае переменные не будут доступны вне этого правила, они могут быть использованы локально.
В этом примере LESS не будет сконвертирован из-за ошибки, color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.
Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.
Переменные в переменных
Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.
Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.
Константы и Переменные
Важно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз.
Операции
Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:
Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:
Управление цветом
Моя любимая особе6нность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.
Цветовые операции
Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.
Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.
Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.
Мощь переменных более очевидна в следующем. Если вы захотели изменить цвет кнопки, то изменение значения @color-button на зеленый цвет, поменяет не только фоновый цвет, но и заменит обводку на более темный вариант зеленого.
Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:
Цветовые функции
Есть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.
Извлечение информации о цвете
Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую.
Совмещение функций
LESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так:
Вложенность
Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:
Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:
Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.
Примеси (mixins)
Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?
И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.
В вышеприведенном коде мы определили элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите .tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.
Примеси с параметрами
Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.
В вышеприведенном коде радиус у .tab равен 6px, а .submit элемент получит значение 3px.
Стандартные значения
Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.
В этом примере .tab получит стандартное значение в 6px, а .submit – 3px.
Множественные параметры
Вы также можете использовать множественные параметры, чтобы определить более сложные примеси.
Используем все аргументы за раз
Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.
Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:
@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:
Параметрические примеси без параметров
Также можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется.
CSS вышеприведенного кода будет таким:
Чтобы скрыть класс .alert нужно установить пустой параметр.
Готовый CSS будет следующим:
В основном это используется для уменьшения размера CSS файла.
Пространство имён
Пространство имён в языках программирования обычно используется для группировки сходных по функциональности элементов. Мы можем добиться подобного в LESS, объединяя наш код с помощью примесей.
Также это отличный способ сделать возможным быструю смену и доработку тем. Если вы разрабатываете несколько тем для вашей компании, то для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки.
Строковая интерполяция
Строковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства.
Это может быть полезно при создании централизованного фреймворка.
Экранирование
Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:
Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.
Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.
Импорт
Как и в обычном CSS вы можете импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис:
Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.
Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.
Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.
Комметарии
Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша.
Чего не хватает?
Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.
Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.
Заключение
Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.
Если вы хоть раз подключали таблицы стилей через директиву @import в CSS, то эта часть главы полностью изменит ваше представление о ней, так как в Less все куда интереснее и гибче. Если же вы никогда ранее не делали импорт стилей в CSS, то добро пожаловать в этот удивительный мир, позволяющий разбивать таблицы стилей на несколько частей.
Options specific to lessc
For all other options, see Less Options.
Silent
lessc -s lessc --silent
Stops any warnings from being shown.
Version
Prints a help message with available options and exits.
Makefile
Outputs a makefile import dependency list to stdout.
No Color
Clean CSS
In v2 of less, Clean CSS is no longer included as a direct dependency. To use clean css with lessc, use the clean css plugin.
Using Less.js in the browser is the easiest way to get started and convenient for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using Node.js or one of the many third party tools available.
To start off, link your .less stylesheets with the rel attribute set to " stylesheet/less ":
Next, download less.js and include it in a tag in the element of your page:
calc() exception
For CSS compatibility, calc() does not evaluate math expressions, but will evaluate variables and math in nested functions.
Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.
Note, as of Less 3.5, you can simply write:
In 3.5+, many cases previously requiring "quote-escaping" are not needed.
Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.
Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:
As of Less 3.5, you can also use mixins and rulesets as maps of values.
This outputs, as expected:
Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren't found, it's inherited from the "parent" scope.
Like CSS custom properties, mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Less code is identical to the previous example:
Both block-style and inline comments may be used:
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.
Less and these docs are maintained by the core Less team.
Documentation source code released under the MIT License, documentation under CC BY 3.0.
Опция (css)
Полная противоположность опции (less) . На этот раз мы можем заставить любой файл подключаться стандартным для CSS способом.
Пример 2.6.3
На этот раз стоит задача подключения файла стандартным для CSS способом. Без лишних слов. Просто посмотрите на код:
Импорт стилей в CSS
В CSS директива @import позволяет импортировать стили из других таблиц. Проще говоря, можно разбить одну большую таблицу стилей на несколько маленьких. Делается это следующим образом:
Самым важным минусом выступает тот факт, что такие подключения должны предшествовать другим стилям в таблице, где подключается дополнительный файл. То есть сделать так, как написано в коде ниже нельзя:
Разрешено делать только так:
Причём имя файла должно быть с расширением .css .
Я не буду вдаваться в подробности и обойду стороной возможность указывать типы носителей, тем более они сейчас нас не интересуют, да и на практике такое подключение дополнительных таблиц стилей не приветствуется.
Импорт стилей в Less
В Less импорт стилей происходит с помощью всё той же директивы, но с расширенным функционалом. Перед именем файла можно указывать (необязательно) ключевое слово, которое указывает компилятору, как ему поступать с файлом.
Тем более, вы можете комбинировать ключевые слова для достижения определённых целей. Например, если нужно использовать css-файл как less-файл, но при этом не выводить его содержимого.
Во-первых, в Less не регламентируется то, где возможно подключение других таблиц стилей. Вы можете использовать директиву @import до объявления селекторов, после или даже между ними:
Во вторых, расширение файла может быть любым, главное — чтобы в нём содержался валидный CSS- или Less-синтаксис. Но здесь начинают действовать специфичные для Less правила:
Файлы с расширением .css :
Если при подключении файла с помощью директивы @import будет указано расширение .css , то такой файл подключается как обычный css-файл и не обрабатывается компилятором.
Файлы без расширения:
Если при подключении файла с помощью директивы @import у него не будет указано расширение, то такой файл подключается как less-файл и обрабатывается компилятором.
Файлы с другими расширениями:
Если при подключении файла с помощью директивы @import у него будет указано расширение, но оно не соответствует ни .css ни .less , то такой файл подключается как less-файл и будет обрабатываться компилятором.
Все это вкупе с доступными опциями для директивы @import , которые будут рассматриваться позднее, даёт вам возможность построения гибкой и хорошо поддерживаемой структуры проекта. Про структуру проекта я буду рассказывать намного позднее, так как без полного понимания доступных возможностей Less она вам не пригодится.
Пример 2.6.1
Рассмотрим пример, который отображает всю суть импорта стилей в Less. Для этого создадим в директории import/ следующие файлы: _duckduckgo.less , _mail.css , _yandex.less и _yahoo.less . В этих файлах объявим одноимённые с названиями файлов классы и укажем с помощью свойства color официальный цвет сервиса. Кроме них нам понадобится файл _styles.less , к которому будут подключаться эти файлы.
Для наглядности я предлагаю посмотреть на карту директории этого примера:
Теперь я предлагаю взглянуть на содержимое файла _styles.less и то, что получилось после его компиляции.
Содержимое файла _styles.less :
Как не сложно заметить, подключение таблиц стилей происходит до и после содержимого файла, что не допускается в CSS, но разрешено в Less.
Содержимое файла styles.css , полученное после компиляции:
Во время компиляции происходит конкатенация содержимого файлов. А файлы с расширением .css подключаются стандартным для CSS способом.
Опция (reference)
Замечательная опция, позволяющая использовать less-файлы, но не выводить их содержимое до тех пор, пока оно не будет явно вызвано. Пригодится в тех случаях, когда нужно использовать определённый селектор, а остальное содержимое файла не нужно. Такое поведение положительно сказывается на работе с библиотеками, которые имеют избыточный функционал в виде множества селекторов, а вам необходимы лишь некоторые из них.
Пример 2.6.4
Для демонстрации работы этого ключевого слова используем группировку селекторов. Помимо этого, можно использовать примеси, но мы их пока затрагивать не будем.
Немного изменим файл _yandex.less , чтобы можно было продемонстрировать работу более наглядно:
В файле _styles.less добавим ключевое слово (reference) :
Если сейчас скомпилировать этот файл, то кроме селектора canonium в нём ничего не будет. Необходимо добавить явный вызов селектора.
Добавим явный вызов в файл _styles.less , в виде псевдокласса :extend() . Делается это следующим образом:
Теперь, после компиляции в получившемся CSS-файле у класса .topbar появятся все свойства класса .yandex-topbar , объявленного в импортируемом файле. При этом класс .yandex в этот файл добавлен не будет.
Server-Side and Command Line Usage
The binary included in this repository, bin/lessc works with Node.js on *nix, OS X and Windows.
Usage: lessc [option option=parameter . ] [destination]
Опция (once) и (multiple)
Я не зря объединил эти две опции. Они представляют собой абсолютную дуальную пару, то есть они полностью противоположны по значению.
Ключевое слово (once) запрещает многократное подключение файла с таким именем. Эта опция включена в Less изначально, и прописывать её в директиве @import не нужно.
Ключевое слово (multiple) разрешает многократное подключение файла с таким именем.
Пример 2.6.6
Попробуем провести эксперимент. Сначала объявим директиву @import без опций, потом запретим многократное подключение с помощью (once) , а затем разрешим, используя (multiple) . После этого обговорим полученные результаты. Приступаем.
Объявим директиву @import без опций:
В полученном результате файл подключился ровно один раз, так как все директивы импорта файлов содержат опцию (once) по умолчанию.
Объявим директиву @import с опцией (once):
И снова тот же результат. Очевидно, что опция (once) все таки установлена по умолчанию, а её повторное применение ничего не меняет.
Объявим директиву @import с опцией (multiple):
На этот раз скомпилированный CSS-код содержит селектор .duckduckgo дважды, а это значит, что опция (multiple) сработала.
Опции импорта
С помощью ключевых слов (опций) можно управлять тем, как компилятор будет обрабатывать файлы. Например, с помощью таких опций можно заставить компилятор конкатенировать содержимое CSS-файла, а не подключать его с помощью директивы.
Я предлагаю подробнее остановиться на каждом ключевом слове и посмотреть примеры их работы. Все примеры будут основываться на структуре, представленной в примере 2.6.1.
Nested At-Rules and Bubbling
At-rules such as @media or @supports can be nested in the same way as selectors. The at-rule is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.
Arithmetical operations + , - , * , / can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.
Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.
You can also do arithmetic on colors:
However, you may find Less's Color Functions more useful.
From 4.0, No division is performed outside of parens using / operator.
You can change Math setting, if you want to make it always work, but not recommended.
Опция (optional)
Эта опция позволяет продолжать компиляцию, если подключаемый файл не найден. Если не использовать это ключевое слово, то при отсутствии файла компилятор будет бросаться в вас ошибкой FileError . Скорее всего, такой функционал пригодится тем, кто строит фреймворк, основанный на ограниченном количестве модулей и компонентов, которые можно подключать и отключать.
Пример 2.6.7
В этом примере есть обязательный для компиляции файл _duckduckgo.less , а также два необязательных: _yahoo.less и _yandex.less . Один из этих файлов будет удалён.
Пусть будет отсутствовать файл _yahoo.less . Тогда после компиляции получится следующий CSS-код:
Если попытаться напрячь своё воображение и не вдаваться в подробности, то окажется, что вы уже используете препроцессор Less, хотя и косвенно. Да, это не шутка. Любой CSS-файл считается валидным Less-файлом. Для этого даже не нужно менять расширение файла. Однако, такое положение дел возможно, если вы подключаете этот файл к другому файлу, который уже имеет расширение .less или работаете с консолью. О том, как работать с файлами в Less я буду говорить позднее, а вот пример валидного Less-файла я обязательно приведу для большего понимания темы.
Ниже приведён фрагмент самого обычного CSS-кода, который я использую у себя в проектах. Весь этот код хранится в файле styles.css вместе с сотнями других строчек, но нас интересует именно синтаксис, а не файл и его содержимое.
Я думаю объяснять не стоит, что здесь мы имеем дело с обычным CSS. На этом этапе нам не важно, что и как делают эти строчки, главное, что они реальны и могут использоваться в любом CSS-файле уже сейчас.
А теперь возьмём эти стили и, ничего не меняя, поместим их в файл с таким же именем, но имеющим расширение .less . Я понимаю, что до сих пор мы не рассматривали возможность компиляции less-файлов, но поверьте мне на слово — файл скомпилируется без ошибок и будет точно таким же по содержанию.
На изображении выше представлено состояние less-файла до компиляции и после. Сразу видно, что они идентичны и различаются лишь наличием пустых строк после селекторов в Less-файле, а также расширением.
Из всего этого напрашивается вывод, что даже если вы не будете использовать возможности Less полностью или будете пользоваться лишь некоторыми из них, то ничего страшного не случится. Вас никто не обязывает менять свой любимый синтаксис на какой-либо другой. Наоборот, препроцессор Less будет только рад этому, ведь в таком случае на компиляцию уйдёт меньше времени. Если говорить ещё проще, то препроцессор можно применять лишь для конкретных целей, например, для построения удобной и хорошо поддерживаемой структуры, которую можно организовать и на чистом CSS, но с меньшим удобством.
О структуре проекта я подробнее расскажу ближе к концу этой удивительной истории, когда к вам, по идее, придёт понимание того, чем вы занимались на протяжении всего времени, проведённого с этой книгой. Поэтому не волнуйтесь — всему своё время.
Heads up! If the command line isn't your thing, learn more about GUIs for Less.
Beta releases of lessc
Periodically, as new functionality is being developed, lessc builds will be published to npm, tagged as beta. These builds will not be published as a @latest official release, and will typically have beta in the version (use lessc -v to get current version).
Since patch releases are non-breaking we will publish patch releases immediately and alpha/beta/candidate versions will be published as minor or major version upgrades (we endeavour since 1.4.0 to follow semantic versioning).
Command Line Usage
If source is set to `-' (dash or hyphen-minus), input is read from stdin.
Examples
Compile bootstrap.less to bootstrap.css
Installing for Node Development
Alternatively, if you don't want to use the compiler globally, you may be after
This will install the latest official version of lessc in your project folder, also adding it to the devDependencies in your project's package.json .
Installing
The -g option installs the lessc command available globally. For a specific version (or tag) you can add @VERSION after our package name, e.g. npm install less@2.7.1 -g .
Опция (inline)
Задача этой опции сказать компилятору, что разработчик ожидает на выходе подключённый файл, но без обработки компилятором. Такая опция может пригодиться при подключении CSS-файла, в котором присутствуют конструкции, которые в Less необходимо преобразовывать. Например, используемое в IE свойство filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); , требующее экранирования в Less.
Пример 2.6.5
Представим, что перед нами стоит задача разработки проекта, использующего фильтры. Пусть к такому проекту подключается какая-нибудь библиотека, которая существует в виде CSS-файла. Тогда у нас могут возникнуть некоторые проблемы.
Добавим в файл _mail.css класс, содержащий свойство filter :
Помимо этого, добавим ключевое слово (less) в файле _styles.less , чтобы CSS-файл склеивался с less-файлом:
Производим компиляцию стандартным способом. Но не тут-то было, вместо счастливого финала наш компилятор как-то приуныл и выдал ошибку. В ней говорится, что он не понимает предоставленный синтаксис и ему хочется, чтобы мы его исправили.
Именно сейчас и пригодится рассматриваемая опция (inline) . Дописываем её в директиву @import через запятую:
Повторяем процесс компиляции, и на этот раз все будет хорошо. Компилятор после сложного трудового дня немного отдохнёт, а мы насладимся его работой:
Опция (less)
С помощью этого ключевого слова можно попросить компилятор рассматривать подключаемый файл как less-файл, то есть производить его компиляцию, а также конкатенацию с тем файлом, где происходит его подключение.
Может пригодиться при использовании файлов, которые имеют не стандартное расширение, например, .variables или .mixin .
Пример 2.6.2
Необходимо подключить файл _mail.css :
Если подключить этот файл как раньше, с помощью импорта без ключевых слов ( @import "import/_mail.css"; ), то файл будет подключён как обычный CSS-файл в файле styles.css .
Но нам необходимо провести конкатенацию этих двух файлов. Для этого требуется указать ключевое слово less . Тогда файл styles.css приобретает необходимый нам вид:
Setting Options
You can set options either programmatically, by setting them on a less object before the script tag - this then affects all initial link tags and programmatic usage of less.
The other way is to specify the options on the script tag, e.g.
Or for brevity they can be set as attributes on the script and link tags:
Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.
- For detailed documentation on Less language features, see Features
- For a list of Less Built-in functions, see Functions
- For detailed usage instructions, see Using Less.js
- For third-party tools for Less, see Tools
What does Less add to CSS? Here's a quick overview of features.
These are pretty self-explanatory:
Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:
And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:
Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:
In Less, we can also write it this way:
The resulting code is more concise, and mimics the structure of your HTML.
You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin ( & represents the current selector parent):
Читайте также: