LESS - это препроцессор CSS, который обеспечивает настраиваемую, управляемую и многоразовую таблицу стилей для веб-сайта. LESS - это язык динамических таблиц стилей, расширяющий возможности CSS. LESS также поддерживает кроссбраузерность.
Препроцессор CSS - это язык сценариев, который расширяет CSS и компилируется в обычный синтаксис CSS, чтобы его можно было прочитать в вашем веб-браузере. Он предоставляет такие функции, как переменные , функции , миксины и операции, которые позволяют создавать динамический CSS.
Почему МЕНЬШЕ?
Давайте теперь поймем, почему мы используем LESS.
LESS поддерживает создание более чистого и удобного для разных браузеров CSS быстрее и проще.
LESS разработан на JavaScript, а также создан для использования в реальном времени , который компилируется быстрее, чем другие препроцессоры CSS.
LESS сохраняет ваш код модульным, что очень важно, поскольку делает его читабельным и легко изменяемым.
Более быстрое обслуживание может быть достигнуто за счет использования МЕНЬШИХ переменных .
История
LESS был разработан Alexis Sellierв 2009 году. LESS является открытым исходным кодом. Первая версия LESS была написана на Ruby; в более поздних версиях использование Ruby было заменено JavaScript.
Особенности
Более чистый и читаемый код можно написать организованным способом.
Мы можем определять стили, и их можно повторно использовать во всем коде.
LESS основан на JavaScript и представляет собой супернабор CSS.
LESS - это гибкий инструмент, решающий проблему избыточности кода.
Преимущества
LESS легко генерирует CSS, который работает во всех браузерах.
LESS позволяет вам писать более качественный и хорошо организованный код с помощью вложенности .
Техническое обслуживание может быть достигнуто быстрее за счет использования переменных .
LESS позволяет легко повторно использовать целые классы, ссылаясь на них в наборах правил.
LESS обеспечивает использование операций, которые ускоряют кодирование и экономят время.
Недостатки
Если вы новичок в предварительной обработке CSS, потребуется время.
Из-за тесной связи между модулями необходимо приложить больше усилий для повторного использования и / или тестирования зависимых модулей.
LESS имеет меньше фреймворков по сравнению со старым препроцессором, таким как SASS, который состоит из фреймворков Compass , Gravity и Susy .
В этой главе мы шаг за шагом поймем, как установить LESS.
Системные требования для LESS
Operating System - Кроссплатформенность
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.
Установка LESS
Давайте теперь разберемся с установкой LESS.
Step 1 - Нам нужно NodeJsзапускать МЕНЬШЕ примеров. Чтобы скачать NodeJs, откройте ссылкуhttps://nodejs.org/en/, вы увидите экран, как показано ниже -
Загрузите последнюю версию zip-файла.
Step 2- Запустите программу установки, чтобы установить Node.js в вашу систему.
Step 3- Затем установите LESS на сервер через NPM (диспетчер пакетов узлов). Выполните следующую команду в командной строке.
npm install -g less
Step 4 - После успешной установки LESS в командной строке вы увидите следующие строки:
Давайте теперь создадим файл style.less, который очень похож на CSS, с той лишь разницей, что он будет сохранен с расширением .less . Оба файла, .html и .less должны быть созданы внутри папки.nodejs.
Скомпилируйте файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Когда вы запустите указанную выше команду, она автоматически создаст файл style.css . Всякий раз, когда вы изменяете файл LESS, необходимо запускать указанную выше команду вcmdа затем обновится файл style.css .
Style.css файл будет иметь следующий код при запуске выше команды -
style.css
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
Вывод
Давайте теперь выполним следующие шаги, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше html-код в hello.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Это группа свойств CSS, которая позволяет использовать свойства одного класса в другом классе и включает имя класса в качестве своих свойств. В LESS вы можете объявить миксин так же, как стиль CSS, используя селектор классов или идентификаторов. Он может хранить несколько значений и может быть повторно использован в коде при необходимости.
пример
В следующем примере демонстрируется использование вложенных правил в файле LESS -
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class = "myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в nested_rules.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Вы можете вложить такие директивы, как media и keyframe, таким же образом, как и селекторы. Вы можете разместить директиву сверху, и ее относительные элементы не будут изменены в ее наборе правил. Это известно как процесс пузырьков.
пример
В следующем примере демонстрируется использование вложенных директив и восходящей цепочки в файле LESS:
<html>
<head>
<title>Nested Directives</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Nested Directives</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в nested_directives_bubbling.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
LESS обеспечивает поддержку некоторых арифметических операций, таких как плюс (+), минус (-), умножение (*) и деление (/), и они могут работать с любым числом, цветом или переменной. Операции экономят много времени, когда вы используете переменные и вам хочется работать с простой математикой.
пример
В следующем примере демонстрируется использование операций в файле LESS -
<html>
<head>
<title>Less Operations</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.myclass {
font-size: 20px;
color: green;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в operations.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Он создает селекторы динамически и использует значение свойства или переменной как произвольную строку.
пример
В следующем примере демонстрируется использование экранирования в файле LESS -
<html>
<head>
<title>Less Escaping</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Escaping</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Теперь создайте файл style.less .
style.less
p {
color: ~"green";
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду, она автоматически создаст файл style.css со следующим кодом -
style.css
p {
color: green;
}
Все, что написано внутри ~ "some_text", будет отображаться как some_text после компиляции кода LESS в код CSS.
Вывод
Давайте теперь выполним следующие шаги, чтобы увидеть, как работает приведенный выше код:
Сохраните приведенный выше html-код в escaping.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
LESS сопоставляет код JavaScript с манипуляциями со значениями и использует предопределенные функции для управления аспектами HTML-элементов в таблице стилей. Он предоставляет несколько функций для управления цветами, таких как функция округления, функция пола, функция потолка, функция процента и т. Д.
пример
В следующем примере демонстрируется использование функций в файле LESS -
<html>
<head>
<title>Less Functions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class = "mycolor">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Теперь выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в functions.html файл.
Откройте этот HTML-файл в браузере, и вы получите следующий результат.
Описание
Пространства имен используются для группировки миксинов под общим именем. Используя пространства имен, вы можете избежать конфликта имен и инкапсулировать группу миксинов извне.
пример
В следующем примере демонстрируется использование пространств имен и методов доступа в файле LESS:
<html>
<head>
<title>Less Namespaces and Accessors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Namespaces and Accessors</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.myclass {
font-size: 20px;
color: green;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в namespaces_accessors.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Область видимости переменной определяет место доступной переменной. Переменные будут искать из локальной области видимости, и если они недоступны, компилятор будет искать из родительской области.
пример
В следующем примере демонстрируется использование пространств имен и методов доступа в файле LESS:
<html>
<head>
<title>Less Scope</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Scope</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.myclass {
font-size: 20px;
color: green;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в scope.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Комментарии делают код понятным и понятным для пользователей. Вы можете использовать в коде как стиль блока, так и встроенные комментарии, но при компиляции кода LESS однострочные комментарии не появятся в файле CSS.
пример
В следующем примере демонстрируется использование комментариев в файле LESS -
<html>
<head>
<title>Less Comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Comments</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
</body>
</html>
Теперь создайте файл style.less .
style.less
/* It displays the
green color! */
.myclass {
color: green;
}
// It displays the blue color
.myclass1 {
color: red;
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Теперь выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в comments.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Он используется для импорта содержимого файлов LESS или CSS.
пример
В следующем примере демонстрируется использование импорта в файл LESS -
<html>
<head>
<title>Less Importing</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Importing</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
<p class = "myclass2">LESS supports creating cleaner,
cross-browser friendly CSS faster and easier.</p>
</body>
</html>
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в importing.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
В этой главе мы обсудим переменные в LESS. LESS позволяет определять переменные с помощью символа @. Назначение переменной выполняется с помощьюcolon(:).
В следующей таблице подробно показано использование переменных LESS .
Sr.No.
Использование и описание переменных
1
Обзор
Многократного повторения одного и того же значения можно избежать, используя переменные .
2
Переменная интерполяция
Переменные могут быть также использованы в других местах , таких как имена селекторов , имена свойств , URL s и @import заявления.
3
Имена переменных
Мы можем определять переменные с именем переменной, состоящим из значения.
4
Ленивая загрузка
При отложенной загрузке переменные можно использовать, даже если это не так.
5
Переменные по умолчанию
Переменная по умолчанию имеет возможность установить переменную, только если она еще не установлена. Эта функция не требуется, потому что переменные можно легко переопределить, определив их позже.
Extend - это псевдокласс LESS, который расширяет другие стили селектора в одном селекторе с помощью :extend селектор.
пример
В следующем примере демонстрируется использование расширения в файле LESS -
extend_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<p>Hello!!!!!</p>
</div>
</body>
</html>
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в extend_syntax.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Расширить синтаксис
Extend помещается в набор правил или прикрепляется к селектору. Он похож на псевдокласс, содержащий один или несколько классов, разделенных запятыми. Использование необязательного ключевого словаall, можно следовать за каждым селектором.
пример
В следующем примере показано использование расширенного синтаксиса в файле LESS:
extend_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<div class = "container">
<p>Hello!!!!!</p>
</div>
</div>
</body>
</html>
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в extend_syntax.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
В следующей таблице перечислены все типы расширенного синтаксиса, которые вы можете использовать в LESS -
Sr.No.
Типы и описание
1
Расширение прикреплено к селектору
Extend связан с селектором, который похож на псевдокласс с селектором в качестве параметра.
2
Расширение внутреннего набора правил
В &:extend(selector) синтаксис можно поместить внутрь набора правил.
3
Расширение вложенных селекторов
Вложенные селекторы сопоставляются с помощью селектора расширения .
4
Точное соответствие с расширением
По умолчанию, extend ищет точное совпадение между селекторами.
5
n-е выражение
Форма n-го выражения важна для расширения, в противном случае он рассматривает селектор как другой.
6
Расширить «все»
Когда ключевое слово все наконец определено вextend Тогда LESS соответствует этому селектору как части другого селектора.
7
Селекторная интерполяция с расширением
В extend может быть подключен к интерполированному селектору.
8
Объем / расширение внутри @media
Extend соответствует только селектору, который присутствует в том же объявлении носителя.
9
Обнаружение дублирования
Он не может обнаружить дублирование селекторов.
Ниже приведены типы сценариев использования для расширения.
Sr.No.
Типы и описание
1
Классический вариант использования
Классический вариант использования используется, чтобы избежать добавления базового класса в LESS.
2
Reducing CSS Size
Extend is used to move the selector as far as the properties you want to use; this helps in reducing the css generated code.
3
Combining Styles/ A More Advanced Mixin
Using extend we can combine the same styles of a particular selectors into other selector.
Mixins are similar to functions in programming languages. Mixins are a group of CSS properties that allow you to use properties of one class for another class and includes class name as its properties. In LESS, you can declare a mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.
The following table demonstrates the use of LESS mixins in detail.
Sr.No.
Mixins usage & Description
1
Not Outputting the Mixin
Mixins can be made to disappear in the output by simply placing the parentheses after it.
2
Selectors in Mixins
The mixins can contain not just properties, but they can contain selectors too.
3
Namespaces
Namespaces are used to group the mixins under a common name.
4
Guarded Namespaces
When guard is applied to namespace, mixins defined by it are used only when the guard condition returns true.
5
The !important keyword
The !important keyword is used to override the particular property.
Example
The following example demonstrates the use of mixins in the LESS file −
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class = "p1">LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<p class = "p3">LESS is cross browser friendly.</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the less_mixins.html file.
Open this HTML file in a browser, the following output will get displayed.
The parentheses are optional when calling mixins. In the above example, both statements .p1(); and .p1; do the same thing.
Description
Parametric mixins use one or more parameters that extend functionality of LESS by taking arguments and its properties to customize the mixin output when mixed into another block.
For instance, consider a simple LESS code snippet −
Here we are using the parametric mixin as .border with three parameters - width, style and color. Using these parameters, you can customize the mixin output with the passed parameters value.
The following table describes the different types of parametric mixins along with description.
Sr.No.
Types & Description
1
Mixins with Multiple Parameters
Parameters can be separated using commas or semicolon.
2
Named Parameters
Mixins provide parameter values instead of positions by using their names.
3
@arguments Variable
When a mixin is called, the @arguments include all the passed arguments.
4
Advanced Arguments and the @rest Variable
Mixin takes variable number of arguments by using .....
5
Pattern-matching
Change the behavior of mixin by passing parameters to it.
In this chapter, we will understand the importance of Mixins as Functions. Like functions, mixins can be nested, can accept parameters, and return values too.
The following table demonstrates the use of mixins as functions in details.
Sr.No.
Mixins usage & Description
1
Mixin scope
Mixins consist of variables; these can be used in caller's scope and are visible.
2
Mixin and return values
Mixins are similar to functions and the variables that are defined in a mixin will behave as the return values.
3
Mixin inside another mixin
Whenever a mixin is defined inside another mixin, it can be used as return value too.
Description
Detached ruleset contains rulesets such as properties, nested rulesets, variables declaration, mixins, etc. It is stored in a variable and included in another structure; all the properties of the ruleset get copied to that structure.
Example
The following example shows how to pass a ruleset to mixin in the LESS file −
passing_ruleset.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the passing_ruleset.htm file.
Open this HTML file in a browser, the following output will get displayed.
Scoping
All variables and mixins in detached ruleset are available wherever the ruleset called or defined. Otherwise, both the caller and the definition scopes are available by default. The declaration scope takes the priority when both scopes contain same mixin or variable. Detached ruleset body is defined in the declaration scope. It does not change its scope after the detached ruleset is copied from one variable to another.
The following table lists all the types of scope −
Sr.No.
Types & Description
1
Definition and Caller Scope Visibility
Variables and mixins are defined inside the detached ruleset.
2
Referencing Won't Modify Detached Ruleset Scope
Just giving the references, the ruleset does not access to any new scopes.
3
Unlocking Will Modify Detached Ruleset Scope
The detached ruleset can access to scope by being imported into it.
Description
The @import directive is used to import the files in the code. It spreads the LESS code over different files and allows to maintain the structure of code easily. You can put the @import statements anywhere in the code.
For instance, you can import the file by using @import keyword as @import "file_name.less".
File Extensions
You can use the @import statements depending on the different file extensions such as −
If you are using .css extension, then it will be considered as CSS and the @import statement remains as it is.
If it contains any other extension, then it will be considered as LESS and will be imported.
If there is no LESS extension, then it will appended and included as imported LESS file.
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
Example
The following example demonstrates the use of variable in the SCSS file −
<!doctype html>
<head>
<title>Import Directives</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class = "myline">Welcome to Tutorialspoint...</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the import_directives.html file.
Open this HTML file in a browser, the following output will get displayed.
In this chapter, we will understand the importance of Import Options in LESS. LESS offers the @import statement that allows the style sheets to import both LESS and CSS style sheets.
The following tables lists the import directives that will be implemented in the import statements.
Sr.No.
Import options & Description
1
reference
It uses a LESS file only as reference and will not output it.
2
inline
It enables you to copy your CSS into the output without being processed.
3
less
It will treat the imported file as the regular LESS file, despite whatever may be the file extension.
4
css
It will treat the imported file as the regular CSS file, despite whatever may be the file extension.
5
once
It will import the file only one time.
6
multiple
It will import the file multiple times.
7
optional
It continues compiling even though the file to import is not found.
More than one keyword is allowed to use in the @import statement, however you have to use commas to seperate the keywords.
For instance −
@import (less, optional) "custom.css";
Description
If you want to match simple values or number of arguments on expressions, then you can make use of guards. It is associated with mixin declaration and includes condition that is attached to a mixin. Each mixin will have one or more guards which are separated by comma; a guard must be enclosed within parentheses. LESS uses guarded mixins instead of if/else statements and performs calculations to specify matched mixin.
The following table describes the different types of mixins guards along with description.
Sr.No.
Types & Description
1
Guard Comparison Operators
You can use the comparison operator (=) to compare numbers, strings, identifiers, etc.
2
Guard Logical Operators
You can use the and keyword to work around logical operators with guards.
3
Type Checking Functions
It contains the built-in functions to determine the value types for matching mixins.
4
Conditional Mixins
LESS uses the default function to match mixin with other mixing matches.
Example
The following example demonstrates the use of mixin guards in the LESS file −
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Mixin Guards</h2>
<p class = "class1">Hello World...</p>
<p class = "class2">Welcome to Tutorialspoint...</p>
</body>
</html>
Follow these steps to see how the above code works −
Save the above html code in the mixin-guard.html file.
Open this HTML file in a browser, the following output will get displayed.
Description
Guards are used to match simple values or a number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.
Example
The following example demonstrates the use of css guard in the LESS file −
css_guard.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div class = "style">
<h3>The largest Tutorials Library on the web.</h3>
</div>
</body>
</html>
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.style {
background-color: blue;
color: white;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the css_guard.htm file.
Open this HTML file in a browser, the following output will get displayed.
In this chapter, we will understand how Loops work in LESS. Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combine with Guard Expressions and Pattern Matching.
Example
The following example demonstrates the use of loops in the LESS file −
loop_example.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
Next, create the style.less file.
style.less
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
You can compile the style.less file to style.css by using the following command −
lessc style.less style.css
Execute the above command; it will create the style.css file automatically with the following code −
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в loop_example.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Эта функция в LESS позволяет добавлять значения в список, разделенный запятыми или пробелами, из нескольких свойств, используя одно свойство. Его можно использовать для свойств фона и преобразования.
В следующей таблице описаны два типа функций, поддерживаемых функцией слияния.
Sr.No.
Типы и описание
1
Запятая
Он добавляет значение свойства в конце.
2
Космос
Он добавляет значение свойства с помощью пробела.
В этой главе давайте разберемся, как Parent SelectorsРабота. Можно ссылаться на родительский селектор, используя&(амперсанд) оператор. Родительские селекторы вложенного правила представлены& и используется при применении модифицирующего класса или псевдокласса к существующему селектору.
В следующей таблице показаны типы родительского селектора -
Sr.No.
Типы и описание
1
Множественный &
В & будет представлять ближайший селектор, а также все родительские селекторы.
2
Изменение порядка выбора
Добавление селектора к наследуемым (родительским) селекторам полезно при изменении порядка селектора.
3
Combinatorial Explosion
В & также может производить все возможные перестановки селекторов в списке, разделенном запятыми.
пример
В следующем примере демонстрируется использование родительского селектора в файле LESS -
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
В приведенном выше примере & относится к селектору a.
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в parent_selector1.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Оператор родительских селекторов имеет множество применений, например, когда вам нужно объединить селекторы вложенных правил иным способом, чем по умолчанию. Еще одно типичное использование&состоит в том, чтобы многократно генерировать имена классов. Для получения дополнительной информации нажмите здесь .
Прочие функции состоят из группы функций другого типа.
В следующей таблице перечислены все типы различных функций -
Sr.No.
Функции и описание
1
цвет
Это строка, представляющая цвета.
2
Размер изображения
Он используется для проверки размера изображения из файла.
3
изображение - ширина
Он проверяет ширину изображения из файла.
4
изображение - высота
Он проверяет высоту изображения из файла.
5
конвертировать
Число преобразуется из одной единицы в другую.
6
данные - uri
URI данных - это схема универсального идентификатора ресурса (URI), которая получает ресурс, встроенный в веб-страницы.
7
по умолчанию
Функция по умолчанию возвращает истину только в том случае, если она доступна внутри условия защиты и не соответствует никаким другим миксинам.
8
единица измерения
Функция по умолчанию возвращает истину, только если она доступна внутри условия защиты и не совпадает с другими примесями.
9
получить - единица
get - unit функция возвращает единицу измерения, в которой присутствует аргумент с числом и единицами.
10
svg - градиент
svg-gradient - это переход одного цвета в другой. Он может добавить много цветов к одному и тому же элементу.
Описание
Less поддерживает некоторые строковые функции, перечисленные ниже -
escape
e
% формат
replace
В следующей таблице описаны вышеуказанные строковые функции вместе с описанием.
Sr.No.
Типы и описание
пример
1
Escape
Он кодирует строку или информацию, используя кодирование URL-адресов для специальных символов. Вы не могли закодировать некоторые символы, например, , / , ? , @ , & , + , ~ , ! , $ , ' и некоторые символы, которые вы можете закодировать, например \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ и =.
escape("Hello!! welcome to Tutorialspoint!")
Он выводит экранированную строку как -
Hello%21%21%20welcome%20to%20Tutorialspoint%21
2
e
Это строковая функция, которая использует строку в качестве параметра и возвращает информацию без кавычек. Это экранирование CSS, в котором в качестве параметров используются экранированные значения и числа ~ "некоторого содержимого" .
filter: e("Hello!! welcome to Tutorialspoint!");
Он выводит экранированную строку как -
filter: Hello!! welcome to Tutorialspoint!;
3
% format
Эта функция форматирует строку. Это можно записать в следующем формате -
LESS состоит из функций списка, которые используются для указания длины списка и позиции значения в списке.
В следующей таблице перечислены функции списка, используемые в LESS -
Sr.No.
Описание функции
1
Длина
В качестве параметра потребуется список значений, разделенных запятыми или пробелами.
2
Извлечь
Он вернет значение в указанной позиции в списке.
Описание
Математические функции включают методы, которые используются для выполнения числовых операций, таких как округление, извлечение квадратного корня, значение степени, модуль, процент и т. Д.
В следующей таблице показаны математические функции, используемые в LESS -
Sr.No.
Описание функции
пример
1
ceil
Он округляет число до следующего наибольшего целого числа.
ceil(0.7)
округлить число до -
1
2
floor
Он округляет число до следующего наименьшего целого числа.
floor(3.3)
округлить число до -
3
3
percentage
Он преобразует число с плавающей запятой в процентную строку.
percentage(0.2)
он преобразует число в процентную строку как -
20%
4
round
Он округляет число с плавающей запятой.
round(3.77)
он преобразует число в значение округления как -
4
5
sqrt
Возвращает квадратный корень числа.
sqrt(25)
он определяет квадратный корень из числа как -
5
6
abs
Он обеспечивает абсолютное значение числа.
abs(30ft)
он отображает абсолютное значение как -
30ft
7
sin
Возвращает радианы для чисел.
sin(2)
он вычисляет значение синуса как -
0.90929742682
8
asin
Он определяет арксинус (обратный синусу) числа, которое возвращает значение от -pi / 2 до pi / 2.
asin(1)
он вычисляет значение asin как -
1.5707963267948966
9
cos
Он возвращает косинус указанного значения и определяет радианы для чисел без единиц.
cos(2)
он вычисляет значение cos как -
-0.4161468365471424
10
acos
Он определяет арккосинус (обратный косинусу) числа, которое возвращает значение от 0 до пи.
acos(1)
он вычисляет значение acos как -
0
11
tan
Он указывает тангенс числа.
tan(60)
он вычисляет значение загара как -
0.320040389379563
12
atan
Он определяет арктангенс (обратный касательной) указанного числа.
atan(1)
он отображает значение atan как -
0.7853981633974483
13
pi
Возвращает значение пи.
pi()
он определяет значение пи как -
3.141592653589793
14
pow
Он определяет значение первого аргумента, возведенное в степень второго аргумента.
pow(3,3)
он определяет значение мощности как -
27
15
mod
Он возвращает модуль первого аргумента по отношению ко второму аргументу. Он также обрабатывает отрицательные числа и числа с плавающей запятой.
mod(7,3)
он возвращает значение модуля как -
1
16
min
Он определяет наименьшее значение одного или нескольких аргументов.
min(70,30,45,20)
он возвращает минимальное значение как -
20
17
max
Он указывает наивысшее значение одного или нескольких аргументов.
max(70,30,45,20)
он возвращает максимальное значение как -
70
В этой главе мы поймем важность Type Functionsменее. Они используются для определения типа значения.
В следующей таблице показаны функции типов, используемые в LESS.
Sr.No.
Тип Функции и описание
пример
1
isnumber
Он принимает значение в качестве параметра и возвращает истину , если это число, или ложь в противном случае.
Он возвращает истину, если значение является числом в указанных единицах измерения, указанным в качестве параметра, или возвращает ложь, если значение не является числом в указанных единицах.
LESS предоставляет ряд полезных цветовых функций для изменения цветов и управления ими различными способами. LESS поддерживает некоторые функции определения цвета, как показано в таблице ниже -
Sr.No.
Описание функции
пример
1
rgb
Он создает цвет из значений красного, зеленого и синего цветов. Он имеет следующие параметры -
red - Он содержит целое число от 0 до 255 или процентное значение от 0 до 100%.
green - Он содержит целое число от 0 до 255 или процентное значение от 0 до 100%.
blue - Он содержит целое число от 0 до 255 или процентное значение от 0 до 100%.
rgb(220,20,60)
он преобразует цвет со значениями rgb как -
#dc143c
2
rgba
Он определяет цвет по значениям красного, зеленого, синего и альфа-канала. Он имеет следующие параметры -
red - Он содержит целое число от 0 до 255 или процентное значение от 0 до 100%.
green - Он содержит целое число от 0 до 255 или процентное значение от 0 до 100%.
blue - Он содержит целое число от 0 до 255 или процентное значение от 0 до 100%.
alpha - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
rgba(220,20,60, 0.5)
он преобразует цветной объект со значениями rgba как -
rgba(220, 20, 60, 0.5)
3
argb
Он определяет шестнадцатеричное представление цвета в #AARRGGBBформат. Он использует следующий параметр -
color - Указывает цвет объекта.
argb(rgba(176,23,31,0.5))
он возвращает цвет argb как -
#80b0171f
4
hsl
Он генерирует цвет из значений оттенка, насыщенности и яркости. Он имеет следующие параметры -
hue - Он содержит целое число от 0 до 360, которое представляет градусы.
saturation - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
lightness - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
hsl(120,100%, 50%)
он возвращает объект цвета, используя значения HSL как -
#00ff00
5
hsla
Он генерирует цвет из значений оттенка, насыщенности, яркости и альфа. Он имеет следующие параметры -
hue - Он содержит целое число от 0 до 360, которое представляет градусы.
saturation - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
lightness - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
alpha - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
hsla(0,100%,50%,0.5)
он определяет объект цвета, используя значения HSLA как -
rgba(255, 0, 0, 0.5);
6
hsv
Он производит цвет из значений оттенка, насыщенности и значений. Он содержит следующие параметры -
hue - Он содержит целое число от 0 до 360, которое представляет градусы.
saturation - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
value - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
hsv(80,90%,70%)
он преобразует цветной объект со значениями hsv как -
#7db312
7
hsva
Он производит цвет из значений оттенка, насыщенности, значения и альфа. Он использует следующие параметры -
hue - Он содержит целое число от 0 до 360, которое представляет градусы.
saturation - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
value - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
alpha - Он содержит число от 0 до 1 или процентное значение от 0 до 100%.
hsva(80,90%,70%,0.6)
он определяет объект цвета со значениями hsva как -
rgba(125, 179, 18, 0.6)
В этой главе мы поймем важность функций цветового канала в LESS. LESS поддерживает несколько встроенных функций, которые устанавливают значение для канала. Канал устанавливает значение в зависимости от определения цвета. Цвета HSL имеют канал оттенка, насыщенности и яркости, а цвет RGB имеет красный, зеленый и синий каналы. В следующей таблице перечислены все функции цветового канала -
Sr.No.
Описание функции
пример
1
hue
В цветовом пространстве HSL канал оттенка извлекается из цветового объекта.
background: hue(hsl(75, 90%, 30%));
Он компилируется в CSS, как показано ниже -
background: 75;
2
saturation
В цветовом пространстве HSL канал насыщенности извлекается из цветного объекта.
background: saturation(hsl(75, 90%, 30%));
Он компилируется в CSS, как показано ниже -
background: 90%;
3
lightness
В цветовом пространстве HSL канал яркости извлекается из цветного объекта.
background: lightness(hsl(75, 90%, 30%));
Он компилируется в CSS, как показано ниже -
background: 30%;
4
hsvhue
В цветовом пространстве HSV канал оттенка извлекается из цветового объекта.
background: hsvhue(hsv(75, 90%, 30%));
Он компилируется в CSS, как показано ниже -
background: 75;
5
hsvsaturation
В цветовом пространстве HSL канал насыщенности извлекается из цветного объекта.
background: hsvsaturation(hsv(75, 90%, 30%));
Он компилируется в CSS, как показано ниже -
background: 90%;
6
hsvvalue
В цветовом пространстве HSL канал значений извлекается из цветового объекта.
background: hsvvalue(hsv(75, 90%, 30%));
Он компилируется в CSS, как показано ниже -
background: 30%;
7
red
Красный канал извлекается из цветного объекта.
background: red(rgb(5, 15, 25));
Он компилируется в CSS, как показано ниже -
background: 5;
8
green
Зеленый канал извлекается из цветного объекта.
background: green(rgb(5, 15, 25));
Он компилируется в CSS, как показано ниже -
background: 15;
9
blue
Синий канал извлекается из цветного объекта.
background: blue(rgb(5, 15, 25));
Он компилируется в CSS, как показано ниже -
background: 25;
10
alpha
Альфа-канал извлекается из цветного объекта.
background: alpha(rgba(5, 15, 25, 1.5));
Он компилируется в CSS, как показано ниже -
background: 2;
11
luma
значение яркости рассчитывается для цветного объекта.
background: luma(rgb(50, 250, 150));
Он компилируется в CSS, как показано ниже -
background: 71.2513323%;
12
luminance
Значение яркости рассчитывается без гамма-коррекции.
background: luminance(rgb(50, 250, 150));
Он компилируется в CSS, как показано ниже -
background: 78.53333333%;
Описание
LESS предоставляет ряд полезных операционных функций для изменения цветов и управления ими по-разному, а также принимает параметры в одних и тех же единицах. LESS поддерживает некоторые функции управления цветом, как показано в таблице ниже -
Sr.No.
Директивы и описание
1
насыщать
Он изменяет интенсивность или насыщенность цвета элемента.
2
обесцветить
Уменьшает интенсивность или насыщенность цвета элемента.
3
облегчить
Это увеличивает яркость цвета элемента.
4
затемнять
Он изменяет интенсивность или насыщенность цвета элемента.
5
исчезать
Увеличивает непрозрачность выбранных элементов.
6
исчезать
Уменьшает непрозрачность выбранных элементов.
7
исчезать
Он используется для установки прозрачности цвета для выбранных элементов.
8
вращение
Он используется для поворота угла цвета выбранных элементов.
9
смешивание
Он смешивает два цвета вместе с непрозрачностью.
10
оттенок
Он смешивает цвет с белым по мере уменьшения доли цвета.
11
тень
Он смешивает цвет с черным, когда вы уменьшаете пропорцию цвета.
12
оттенки серого
Он отбрасывает насыщенность цвета в выбранных элементах.
13
контраст
Он устанавливает контраст цветов в элементе.
В этой главе мы поймем Color Blending Functionsменее. Подобные операции используются в редакторах изображений, таких как Photoshop, Fireworks или GIMP, которые сопоставляют цвета CSS с изображениями.
В следующей таблице показаны функции смешивания цветов, используемые в LESS.
Sr.No.
Функции и описание
1
умножать
Он умножает два цвета и возвращает результирующий цвет.
2
экран
Он берет два цвета и возвращает более яркий цвет. Он работает противоположно функции умножения .
3
наложение
Он генерирует результат, комбинируя эффект умножения и экрана .
4
мягкий свет
Он работает аналогично наложению, но использует только часть цвета, мягко выделяя другой цвет.
5
жесткий свет
Он работает аналогично наложению, но роль цветов изменилась.
6
разница
Он вычитает второй входной цвет из первого входного цвета.
7
исключение
Работает аналогично функции разницы, но с меньшей контрастностью.
8
в среднем
Он вычисляет среднее значение двух входных цветов для каждого канала (RGB).
9
отрицание
Работает противоположно функции разности , которая вычитает первый цвет из второго.
С помощью командной строки, мы можем скомпилировать .less файл .css .
Установка lessc для глобального использования
Следующая команда используется для установки lessc с помощью npm (диспетчера пакетов узлов), чтобы сделать lessc доступным глобально.
npm install less -g
Вы также можете добавить конкретную версию после имени пакета. Напримерnpm install [email protected] -g
Установка для разработки узла
Следующая команда используется для установки последней версии lessc в папку вашего проекта.
npm i less -save-dev
Он также добавляется в devDependencies в вашем проекте package.json.
Бета-версии lessc
Он помечается как бета, когда lessc структура опубликована в npmЗдесь периодически разрабатывается новый функционал. less -v используется для получения текущей версии.
Установка неопубликованной разрабатываемой версии lessc
Фиксация фиксации должна быть указана, когда мы перейдем к установке неопубликованной версии lessc, и необходимо следовать инструкциям для определения URL-адреса git как зависимости. Это гарантирует, что вы используете правильную версию leesc для своего проекта.
Использование на стороне сервера и командной строки
bin/lesscвключает двоичный файл в репозиторий. Он работает с Windows, OS X и nodejs на * nix.
Использование командной строки
Ввод читается из stdin когда источник установлен на тире или дефис (-).
Например, мы можем скомпилировать .less к .css с помощью следующей команды -
lessc stylesheet.less stylesheet.css
Мы можем скомпилировать .less к .css и уменьшите результат, используя следующую команду.
lessc -x stylesheet.less stylesheet.css
Параметры
Following table lists out options used in command line usage −
Sr.No.
Options & Description
Command
1
Help
Help message is displayed with the options available.
lessc -help
lessc -h
2
Include Paths
It includes the available paths to the library. These paths can be referenced simply and relatively in the Less files. The paths in windows are separated by colon(:) or semicolon(;).
lessc --include-path = PATH1;PATH2
3
Makefile
It generates a makefile import dependencies list to stdout as output.
lessc -M
lessc --depends
4
No Color
It disables colorized output.
lessc --no-color
5
No IE Compatibility
It disables IE compatibility checks.
lessc --no-ie-compat
6
Disable Javascript
It disables the javascript in less files.
lessc --no-js
7
Lint
It checks the syntax and reports error without any output.
lessc --lint
lessc -l
8
Silent
It forcibly stops the display of error messages.
lessc --silent
lessc -s
9
Strict Imports
It force evaluates imports.
lessc --strict-imports
10
Allow Imports from Insecure HTTPS Hosts
It imports from the insecure HTTPS hosts.
lessc --insecure
11
Version
It displays the version number and exits.
lessc -version
lessc -v
12
Compress
It helps in removing the whitespaces and compress the output.
lessc -x
lessc --compress
13
Source Map Output Filename
It generates the sourcemap in less. If sourcemap option is defined without filename then it will use the extension map with the Less file name as source.
lessc --source-map
lessc -source-map = file.map
14
Source Map Rootpath
Rootpath is specified and should be added to Less file paths inside the sourcemap and also to the map file which is specified in your output css.
lessc --source-map-rootpath = dev-files/
15
Source Map Basepath
A path is specified which has to be removed from the output paths. Basepath is opposite of the rootpath option.
lessc --source-map-basepath = less-files/
16
Source Map Less Inline
All the Less files should be included in the sourcemap.
lessc --source-map-less-inline
17
Source Map Map Inline
It specifies that in the output css the map file should be inline.
lessc --source-map-map-inline
18
Source Map URL
A URL is allowed to override the points in the map file in the css.
lessc --source-map-url = ../my-map.json
19
Rootpath
It sets paths for URL rewriting in relative imports and urls.
lessc -rp=resources/
lessc --rootpath=resources/
20
Relative URLs
In imported files, the URL are re-written so that the URL is always relative to the base file.
lessc -ru
lessc --relative-urls
21
Strict Math
It processes all Math function in your css. By default, it's off.
lessc -sm = on
lessc --strict-math = on
22
Strict Units
It allows mixed units.
lessc -su = on
lessc --strict-units = on
23
Global Variable
A variable is defined which can be referenced by the file.
lessc --global-var = "background = green"
24
Modify Variable
This is unlike global variable option; it moves the declaration at the end of your less file.
lessc --modify-var = "background = green"
25
URL Arguments
To move on to every URL, an argument is allowed to specify.
Less is used in the browser when you want to compile the Less file dynamically when needed and not on the serverside; this is because less is a large javascript file.
To begin with, we need to add the LESS script to use LESS in the browser −
<script src = "less.js"></script>
To find the style tags on page, we need to add the following line on the page. It also creates the style tags with the compiled css.
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
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.
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.
Watch Mode
The watch mode can be enabled by setting the env option to development and call the less.watch() after the less.js file is added. If you want the watch mode to be enabled on a temporary basis, then add #!watch to the URL.
Run time modification of LESS variable is enabled. LESS file is recompiled when new value is called. The following code shows the basic usage of modify variables −
We can add the option !dumpLineNumbers:mediaquery to the url or dumpLineNumbers option as mentioned above. The mediaquery option can be used with FireLESS(It display the original LESS file name and line number of LESS-generated CSS styles.)
Options
Before loading the script file less.js, options have to be set in a global less object.
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.
LESS is cross-browser friendly. It supports modern browsers such as Google Chrome, Mozilla Firefox, Safari and Internet Explorer and allows reusing CSS elements and write LESS code with the same semantics. You must be careful about the performance implications while using LESS on the client side and while displaying the JavaScript to avoid any cosmetic issues such as
Spelling mistakes,
Color changes,
Texture
Look
Links, etc.
Compile the LESS files on the server side to improve the performance levels of the website.
PhantomJS does not implement Function.prototype.bind function, so you need to use es5 shim JavaScript engine to run under PhantomJS. Users can make adjustments with variables to affect the theme and show them in real time by using the client side LESS in the production.
If you want to run LESS in older browsers, then use the es-5 shim JavaScript engine which adds JavaScript features that LESS supports. You can use attributes on the script or link tags by using JSON.parse which must be supported by the browser.
In this chapter, we will understand how a Plugin can be uploaded to expand the functionality of the site. Plugins can be used to make your work easier.
Command Line
To install plugin using command line, you first need to install the lessc plugin. The plugin can be installed using less-plugin at the beginning. The following command line will help you install the clean-css plugin −
npm install less-plugin-clean-css
Directly, you can use the installed plugin by using the following command −
lessc --plugin = path_to_plugin = options
Using a Plugin in Code
In Node, the plugin is required and it is pass in an array as an option plugin to the less.
The options is an optional argument which returns a promise when you don't specify the callback and returns a promise when you specify the callback. You can display the file by reading it into string and set the filename fields of the main file.
The sourceMap option allows to set sourcemap options such as sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles and sourceMapFileInline. The point that needs to be considered here is that the sourceMap option is not available for the less.js.
You can gain access to the log by adding a listener as shown in the below format −
The above defined functions are optional. If an error is displayed, then it will pass the error to callback or promise present in the less.render.
In this chapter, we will understand the importance of online compilers in LESS. Online compilers are used to compile the less code into css code. Online compilers tools easily help to generate the css code. Following are the available online less compilers −
winless.org/online-less-compiler
lesstester.com
dopefly.com/less-converte
lessphp.gpeasy.com/demo
leafo.net/lessphp/editor
estFiddle
Online Web IDEs/Playgrounds with Less support
Following are the available Online Web IDEs with Less support.
Sr.No.
Online Web IDEs & Description
1
CSSDeck Labs
This is a place where you can easily create testcases that involve HTML, CSS, JS code.
2
CodePen
This is a playground for the frontend web.
3
Fiddle Salad
This is a place where you can add an existing code in the environment.
4
JS Bin
This helps Javascript and CSS code.
5
jsFiddle
This is an online web editor.
In this chapter, we will understand the GUIs for LESS. You can use different LESS tools for your platform. For command line usage and tools click this link.
The following table lists the GUI compilers that supports cross platform.
Sr.No.
Tools & Description
1
Crunch 2!
It supports across platforms like Windows, Mac and Linux. It provides editor with integrated compiling.
2
Mixture
It is a rapid prototyping and static site generation tool used by designers and developers. It is quick, efficient and works well with your editor. It brings together a collection of awesome tools and best practices.
3
SimpLESS
It is a minimalistic LESS compiler. It provides drag, drop and compile functionality. SimpLESS supports prefixing your CSS by using prefixr which is the unique feature of SimpLESS. It is built on Titanium platform.
4
Koala
It is used to compile LESS, SASS and CoffeeScript. It provides features like compile error notification supports and compile options supports.
The following table lists the GUI compilers that support Windows platform.
Sr.No.
Tools & Description
1
Prepros
It a tool that compiles LESS, SASS, Compass, Stylus, Jade and many more.
2
WinLess
Initially it was a clone of LESS.app, it has several settings and takes more feature complete approach. It supports starting with command line arguments.
The following table lists the GUI compilers that supports OS X platform.
Sr.No.
Tools & Description
1
CodeKit
t is successor of LESS.app and supports LESS among many other processing languages like SASS, Jade, Markdown and more.
2
LiveReload
It edits CSS and changes images instantly. SASS, LESS, CoffeeScript and others work well.
The following table lists the GUI compilers that supports OS X platform.
Sr.No.
Tools & Description
1
Plessc
It is gui frontend for lessc. It has features like log viewer, auto compile, opening the LESS file with the chosen editor and sourcemap support.
In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.
Let us now discuss editors and IDEs for LESS.
Sr.No.
Editors and IDEs & Description
1
Crunch!
It supports cross-platforms like Windows, Mac and Linux. It provides editor with integrated compiling.
2
Mindscape Web Workbench
It provide CoffeeScript, SASS, Compass and LESS editing and makes modern web development easy in Visual Studio.
3
NetBeans
It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS.
4
TextMate
It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system.
5
Vim
The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS.
6
Emacs
It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save.
7
jetBrains WebStorm and PhpStorm
WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks.
8
Brackets
It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers.
9
CodeLobster
It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP.
10
KineticWing IDE
It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast.
11
nodeMirror
It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries.
12
HTML-Kit Tools
This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor.
Превосходный текст 2 и 3
Возвышенный текст предусматривает различные варианты LESS, которые перечислены в следующей таблице -
Sr.No.
Опции и описание
1
Менее возвышенный
Синтаксис LESS для возвышенного текста обеспечивает подсветку синтаксиса для файлов .less вместе с фрагментами.
2
Возвышенное без CSS
Плагин Sublime Text 2 и 3 для компиляции файлов .less в CSS при сохранении. Это требуетlessc установлен в PATH.
3
Менее стройное возвышенное
Система сборки LESS для возвышенного текста 2, которая предоставляет две системы сборки для файлов LESS, как минифицированные, так и неминифицированные.
4
SublimeOnSaveBuild
Это простой плагин для Sublime Text 2, запускающий сборку при нажатии кнопки «Сохранить». Хорошо работает с препроцессорами, такими как LESS, Compass и любыми другими.
Затмение
Eclipse имеет два плагина для LESS, перечисленных в следующей таблице:
Sr.No.
Плагины и описание
1
Плагин Eclipse Less
Расширяя Eclipse IDE, этот плагин предоставляет полезные функции для редактирования и компиляции таблиц стилей LESS.
2
Плагин Transpiler
Этот плагин Eclipse автоматически переносит ваши файлы, такие как LESS, SASS, CoffeeScript и т. Д.
Visual Studio
Visual Studio имеет следующие различные варианты для LESS -
Sr.No.
Опции и описание
1
CSS меньше
Это расширение позволяет открывать файлы LESS с помощью языковой службы CSS.
2
Веб-основы 2012
Это расширение позволяет значительно упростить выполнение стандартных задач и добавляет в Visual Studio полезные функции для веб-разработчиков.
3
Веб-основы 2013
Он расширяет Visual Studio множеством новых функций, которые не относятся к конкретному языку или редактору.
4
Веб-инструменты 2013
Это поможет вам в задачах разработки, связанных с ASP.NET.
Dreamweaver
При работе с Dreamweaver необходимо учитывать следующие моменты .
Это приложение Adobe, используемое веб-дизайнерами и разработчиками для создания приложений и веб-сайтов.
Он может работать на нескольких платформах, включая браузеры, устройства и планшеты.
Веб-дизайнеры используют Dreamweaver для создания прототипов веб-сайтов.
Компилятор DMXzone Less CSS делает все возможности LESS CSS непосредственно в Dreamweaver.
Блокнот ++ 6.x
При работе с Notepad ++ необходимо учитывать следующие моменты .
Notepad ++ - это бесплатный текстовый редактор и редактор исходного кода, который поддерживает редактирование с вкладками, то есть работу с несколькими открытыми файлами в одном окне.
LESS для Notepad ++ - это XML-файл, который обеспечивает выделение или раскраску синтаксиса для файлов .less. Чтобы получить дополнительную информацию, нажмите на эту ссылку .
Чтобы установить Notepad ++, щелкните эту ссылку .
Компиляторы Node.js
Ниже приведены компиляторы Node.js, используемые для LESS.
хрюканье без вклада
Grunt - средство выполнения задач Node. Он будет компилировать ваши таблицы стилей каждый раз, когда вы фиксируете изменения в ваших файлах LESS.
без сборки
Assembly-less - это мощный плагин grunt для компиляции файла LESS в CSS. Задача less извлекает JSON и шаблон нижнего тире (подчеркивание) для определения пакетов LESS, компонентов пользовательского интерфейса, сжатых таблиц стилей или тем.
без глотка
Это LESS плагин для Gulp. gulp-minify-css используется для минимизации вашего CSS. gulp-sourcemaps используется для создания библиотеки исходных карт.
РЕЦЕСС
Это инструмент с открытым исходным кодом, который построен на LESS и помогает оптимизировать ваш CSS-код. Он сохраняет код CSS без ошибок, чистым и управляемым.
автоматический
Это .less файл наблюдающий. Он содержит отслеживание зависимостей и кроссплатформенное уведомление.
Подключить промежуточное ПО для Less.js
Он используется, чтобы разрешить обработку для подключения JS-фреймворка LESS файлов. Он компилирует исходный файл по запросу и кеширует скомпилированные данные для следующего запроса.
Прочие технологии
Ниже приведены несколько других технологий, которые помогут вам скомпилировать код LESS.
Интерфейс командной строки Wro4j Runner
Вы можете загрузить wro4j-runner.jar и скомпилировать код LESS в CSS, используя следующую команду -