МЕНЬШЕ - Краткое руководство
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 в командной строке вы увидите следующие строки:
`-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
`-- [email protected]
пример
Ниже приводится простой пример LESS.
hello.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Hello!!!!!</h3>
</body>
</html>
Давайте теперь создадим файл style.less, который очень похож на CSS, с той лишь разницей, что он будет сохранен с расширением .less . Оба файла, .html и .less должны быть созданы внутри папки.nodejs.
style.less
@primarycolor: #FF7F50;
@color:#800080;
h1 {
color: @primarycolor;
}
h3 {
color: @color;
}
Скомпилируйте файл 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>
Затем создайте файл style.less .
style.less
.container {
h1 {
font-size: 25px;
color:#E45456;
}
p {
font-size: 25px;
color:#3C7949;
}
.myclass {
h1 {
font-size: 25px;
color:#E45456;
}
p {
font-size: 25px;
color:#3C7949;
}
}
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше 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>
Затем создайте файл style.less .
style.less
.myclass {
@media screen {
color: blue;
@media (min-width: 1024px) {
color: green;
}
}
@media mytext {
color: black;
}
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
@media screen {
.myclass {
color: blue;
}
}
@media screen and (min-width: 1024px) {
.myclass {
color: green;
}
}
@media mytext {
.myclass {
color: black;
}
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше 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.less
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
Вы можете скомпилировать файл 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.less
@color: #FF8000;
@width:1.0;
.mycolor {
color: @color;
width: percentage(@width);
}
Вы можете скомпилировать файл 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.less
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
Вы можете скомпилировать файл 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.less
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
Вы можете скомпилировать файл 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>
Теперь создайте файл myfile.less .
myfile.less
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
Теперь создайте файл style.less .
style.less
@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
color: #FF0000;
}
Myfile.less файл , который будет импортирован в style.less с путиhttps://www.tutorialspoint.com/less/myfile.less
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
.myclass2 {
color: #FF0000;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше 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>
Затем создайте файл style.less .
style.less
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
Вы можете скомпилировать файл extend.less в extend.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше 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>
Теперь создайте файл style.less .
style.less
.style:extend(.container, .img) {
background: #BF70A5;
}
.container {
font-style: italic;
}
.img {
font-size: 30px;
}
Вы можете скомпилировать файл style.less в style.css , используя следующую команду -
lessc style.less style.css
Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -
style.css
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше 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>
Next, create the style.less file.
style.less
.p1 {
color:red;
}
.p2 {
background : #64d9c0;
.p1();
}
.p3 {
background : #LESS520;
.p1;
}
You can compile the style.less 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
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #LESS520;
color: red;
}
Output
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 −
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
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>
Next, create the style.less file.
style.less
@detached-ruleset: {
.mixin() {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
};
.cont {
@detached-ruleset();
.mixin();
}
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>
Next, create the import_dir.less file.
import_dir.less
.myline {
font-size: 20px;
}
Now, create the style.less file.
style.less
@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
color:#FF0000;
}
The import_dir.less file will get imported into style.less file from the path https://www.tutorialspoint.com/less/import_dir.less.
You can compile the style.less 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
.myline {
font-size: 20px;
}
.myline {
color: #FF0000;
}
Output
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>
Now, create the style.less file.
style.less
.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 16px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}
You can compile the style.less 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
.class1 {
font-size: 14px;
color: #FF0000;
}
.class2 {
font-size: 16px;
color: #555;
}
Output
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>
Next, create the style.less file.
style.less
@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope = global) {
background-color: red;
color: black;
}
.style when (@usedScope = mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
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 −
style.css
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
Вывод
Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше html-код в loop_example.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.
Описание
Эта функция в LESS позволяет добавлять значения в список, разделенный запятыми или пробелами, из нескольких свойств, используя одно свойство. Его можно использовать для свойств фона и преобразования.
В следующей таблице описаны два типа функций, поддерживаемых функцией слияния.
Sr.No. | Типы и описание |
---|---|
1 | Запятая Он добавляет значение свойства в конце. |
2 | Космос Он добавляет значение свойства с помощью пробела. |
В этой главе давайте разберемся, как Parent SelectorsРабота. Можно ссылаться на родительский селектор, используя&(амперсанд) оператор. Родительские селекторы вложенного правила представлены& и используется при применении модифицирующего класса или псевдокласса к существующему селектору.
В следующей таблице показаны типы родительского селектора -
Sr.No. | Типы и описание |
---|---|
1 | Множественный & В & будет представлять ближайший селектор, а также все родительские селекторы. |
2 | Изменение порядка выбора Добавление селектора к наследуемым (родительским) селекторам полезно при изменении порядка селектора. |
3 | Combinatorial Explosion В & также может производить все возможные перестановки селекторов в списке, разделенном запятыми. |
пример
В следующем примере демонстрируется использование родительского селектора в файле LESS -
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>Parent Selector</title>
</head>
<body>
<h2>Welcome to TutorialsPoint</h2>
<ul>
<li><a>SASS</a></li>
<li><a>LESS</a></li>
</ul>
</body>
</html>
Затем создайте файл style.less .
style.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-адресов для специальных символов. Вы не могли закодировать некоторые символы, например, , / , ? , @ , & , + , ~ , ! , $ , ' и некоторые символы, которые вы можете закодировать, например \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ и =. |
Он выводит экранированную строку как - |
2 | e Это строковая функция, которая использует строку в качестве параметра и возвращает информацию без кавычек. Это экранирование CSS, в котором в качестве параметров используются экранированные значения и числа ~ "некоторого содержимого" . |
Он выводит экранированную строку как - |
3 | % format Эта функция форматирует строку. Это можно записать в следующем формате - |
Он выводит отформатированную строку как - |
4 | replace Он используется для замены текста в строке. Он использует некоторые параметры -
|
Он заменяет строку как - |
Описание
LESS состоит из функций списка, которые используются для указания длины списка и позиции значения в списке.
В следующей таблице перечислены функции списка, используемые в LESS -
Sr.No. | Описание функции |
---|---|
1 | Длина В качестве параметра потребуется список значений, разделенных запятыми или пробелами. |
2 | Извлечь Он вернет значение в указанной позиции в списке. |
Описание
Математические функции включают методы, которые используются для выполнения числовых операций, таких как округление, извлечение квадратного корня, значение степени, модуль, процент и т. Д.
В следующей таблице показаны математические функции, используемые в LESS -
Sr.No. | Описание функции | пример |
---|---|---|
1 | ceil Он округляет число до следующего наибольшего целого числа. |
округлить число до - |
2 | floor Он округляет число до следующего наименьшего целого числа. |
округлить число до - |
3 | percentage Он преобразует число с плавающей запятой в процентную строку. |
он преобразует число в процентную строку как - |
4 | round Он округляет число с плавающей запятой. |
он преобразует число в значение округления как - |
5 | sqrt Возвращает квадратный корень числа. |
он определяет квадратный корень из числа как - |
6 | abs Он обеспечивает абсолютное значение числа. |
он отображает абсолютное значение как - |
7 | sin Возвращает радианы для чисел. |
он вычисляет значение синуса как - |
8 | asin Он определяет арксинус (обратный синусу) числа, которое возвращает значение от -pi / 2 до pi / 2. |
он вычисляет значение asin как - |
9 | cos Он возвращает косинус указанного значения и определяет радианы для чисел без единиц. |
он вычисляет значение cos как - |
10 | acos Он определяет арккосинус (обратный косинусу) числа, которое возвращает значение от 0 до пи. |
он вычисляет значение acos как - |
11 | tan Он указывает тангенс числа. |
он вычисляет значение загара как - |
12 | atan Он определяет арктангенс (обратный касательной) указанного числа. |
он отображает значение atan как - |
13 | pi Возвращает значение пи. |
он определяет значение пи как - |
14 | pow Он определяет значение первого аргумента, возведенное в степень второго аргумента. |
он определяет значение мощности как - |
15 | mod Он возвращает модуль первого аргумента по отношению ко второму аргументу. Он также обрабатывает отрицательные числа и числа с плавающей запятой. |
он возвращает значение модуля как - |
16 | min Он определяет наименьшее значение одного или нескольких аргументов. |
он возвращает минимальное значение как - |
17 | max Он указывает наивысшее значение одного или нескольких аргументов. |
он возвращает максимальное значение как - |
В этой главе мы поймем важность Type Functionsменее. Они используются для определения типа значения.
В следующей таблице показаны функции типов, используемые в LESS.
Sr.No. | Тип Функции и описание | пример |
---|---|---|
1 | isnumber Он принимает значение в качестве параметра и возвращает истину , если это число, или ложь в противном случае. |
|
2 | isstring Он принимает значение в качестве параметра и возвращает true , если это строка, или false в противном случае. |
|
3 | iscolor Он принимает значение в качестве параметра и возвращает истину , если значение имеет цвет, или ложь, если нет. |
|
4 | iskeyword Он принимает значение в качестве параметра и возвращает истину , если значение является ключевым словом, или ложь, если это не так. |
|
5 | isurl Он принимает значение в качестве параметра и возвращает true , если значение является URL-адресом, или false, если это не так. |
|
6 | ispixel Он принимает значение в качестве параметра и возвращает true , если значение является числом в пикселях, или false в противном случае. |
|
7 | isem Он принимает значение в качестве параметра и возвращает истину , если значение равно em, или ложь, если это не так. |
|
8 | ispercentage Он принимает значение в качестве параметра и возвращает истину , если значение в процентах, или возвращает ложь , если значение не в процентах. |
|
9 | isunit Он возвращает истину, если значение является числом в указанных единицах измерения, указанным в качестве параметра, или возвращает ложь, если значение не является числом в указанных единицах. |
|
10 | isruleset Он принимает значение в качестве параметра и возвращает true , если значение является набором правил, или false в противном случае. |
|
Описание
LESS предоставляет ряд полезных цветовых функций для изменения цветов и управления ими различными способами. LESS поддерживает некоторые функции определения цвета, как показано в таблице ниже -
Sr.No. | Описание функции | пример |
---|---|---|
1 | rgb Он создает цвет из значений красного, зеленого и синего цветов. Он имеет следующие параметры -
|
он преобразует цвет со значениями rgb как - |
2 | rgba Он определяет цвет по значениям красного, зеленого, синего и альфа-канала. Он имеет следующие параметры -
|
он преобразует цветной объект со значениями rgba как - |
3 | argb Он определяет шестнадцатеричное представление цвета в #AARRGGBBформат. Он использует следующий параметр -
|
он возвращает цвет argb как - |
4 | hsl Он генерирует цвет из значений оттенка, насыщенности и яркости. Он имеет следующие параметры -
|
он возвращает объект цвета, используя значения HSL как - |
5 | hsla Он генерирует цвет из значений оттенка, насыщенности, яркости и альфа. Он имеет следующие параметры -
|
он определяет объект цвета, используя значения HSLA как - |
6 | hsv Он производит цвет из значений оттенка, насыщенности и значений. Он содержит следующие параметры -
|
он преобразует цветной объект со значениями hsv как - |
7 | hsva Он производит цвет из значений оттенка, насыщенности, значения и альфа. Он использует следующие параметры -
|
он определяет объект цвета со значениями hsva как - |
В этой главе мы поймем важность функций цветового канала в LESS. LESS поддерживает несколько встроенных функций, которые устанавливают значение для канала. Канал устанавливает значение в зависимости от определения цвета. Цвета HSL имеют канал оттенка, насыщенности и яркости, а цвет RGB имеет красный, зеленый и синий каналы. В следующей таблице перечислены все функции цветового канала -
Sr.No. | Описание функции | пример |
---|---|---|
1 | hue В цветовом пространстве HSL канал оттенка извлекается из цветового объекта. |
Он компилируется в CSS, как показано ниже - |
2 | saturation В цветовом пространстве HSL канал насыщенности извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
3 | lightness В цветовом пространстве HSL канал яркости извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
4 | hsvhue В цветовом пространстве HSV канал оттенка извлекается из цветового объекта. |
Он компилируется в CSS, как показано ниже - |
5 | hsvsaturation В цветовом пространстве HSL канал насыщенности извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
6 | hsvvalue В цветовом пространстве HSL канал значений извлекается из цветового объекта. |
Он компилируется в CSS, как показано ниже - |
7 | red Красный канал извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
8 | green Зеленый канал извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
9 | blue Синий канал извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
10 | alpha Альфа-канал извлекается из цветного объекта. |
Он компилируется в CSS, как показано ниже - |
11 | luma значение яркости рассчитывается для цветного объекта. |
Он компилируется в CSS, как показано ниже - |
12 | luminance Значение яркости рассчитывается без гамма-коррекции. |
Он компилируется в CSS, как показано ниже - |
Описание
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 когда источник установлен на тире или дефис (-).
lessc [option option = parameter ...]
Например, мы можем скомпилировать .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. |
|
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(;). |
|
3 | Makefile It generates a makefile import dependencies list to stdout as output. |
|
4 | No Color It disables colorized output. |
|
5 | No IE Compatibility It disables IE compatibility checks. |
|
6 | Disable Javascript It disables the javascript in less files. |
|
7 | Lint It checks the syntax and reports error without any output. |
|
8 | Silent It forcibly stops the display of error messages. |
|
9 | Strict Imports It force evaluates imports. |
|
10 | Allow Imports from Insecure HTTPS Hosts It imports from the insecure HTTPS hosts. |
|
11 | Version It displays the version number and exits. |
|
12 | Compress It helps in removing the whitespaces and compress the output. |
|
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. |
|
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. |
|
15 | Source Map Basepath A path is specified which has to be removed from the output paths. Basepath is opposite of the rootpath option. |
|
16 | Source Map Less Inline All the Less files should be included in the sourcemap. |
|
17 | Source Map Map Inline It specifies that in the output css the map file should be inline. |
|
18 | Source Map URL A URL is allowed to override the points in the map file in the css. |
|
19 | Rootpath It sets paths for URL rewriting in relative imports and urls. |
|
20 | Relative URLs In imported files, the URL are re-written so that the URL is always relative to the base file. |
|
21 | Strict Math It processes all Math function in your css. By default, it's off. |
|
22 | Strict Units It allows mixed units. |
|
23 | Global Variable A variable is defined which can be referenced by the file. |
|
24 | Modify Variable This is unlike global variable option; it moves the declaration at the end of your less file. |
|
25 | URL Arguments To move on to every URL, an argument is allowed to specify. |
|
26 | Line Numbers Inline source-mapping is generated. |
|
27 | Plugin It loads the plugin. |
|
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.
For instance, we can set option as followed −
<script>
less = {
env: "development"
};
</script>
<script src = "less.js"></script>
We can also set the option in another format on the script tag as specified below −
<script>
less = {
env: "development"
};
</script>
<script src = "less.js" data-env = "development"></script>
You can also add these options to the link tags.
<link data-dump-line-numbers = "all"
data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }'
rel = "stylesheet/less" type = "text/css" href = "less/style.less">
The points that need to be considered for attribute options are −
window.less < script tag < link tag are the importance level.
The data attributes cannot be written in camel case; the link tag option are represented as time options.
The data attributes with non-string values should be JSON valid.
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.
<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>
Modify Variables
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 −
less.modifyVars({
'@buttonFace': '#eee',
'@buttonText': '#fff'
});
Debugging
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.
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src = "less.js"></script>
async − It is a Boolean type. The imported files are requested whether with the option async or not. By default, it is false.
dumpLineNumbers − It is a string type. In the output css file, the source line information is added when the dumpLineNumbers is set. It helps in debugging the particular rule came from.
env − It is a string type. The env may run on development or production. Development is set automatically when the document URL starts with file:// or it is present in your local machine.
errorReporting − When the compilation fails, the error reporting method can be set.
fileAsync − It is a Boolean type. When a page is present with a file protocol then it can request whether to import asynchronously or not.
functions − It is object type.
logLevel − It is a number type. It displays the logging level in the javascript console.
2 : Information and errors
1 : Errors
0 : Nothing
poll − In the watch mode, the time displays in milliseconds between the polls. It is an integer type; by default, it is set to 1000.
relativeUrls − The URLs adjust to be relative; by default, this option is set as false. This means that the URLs are relative already to the entry less file. It is a Boolean type.
globalVars − Inserts the list of global variables into the code. The string type variable should be included in quotes
modifyVars − It is unlike the global variable option. It moves the declaration at the end of your less file.
rootpath − It sets paths at the start of every URL resource.
useFileCache − Uses per session file cache. The cache in less files is used to call the modifyVars where all the less files will not retrieve again.
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.
var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
.then(function(output) {
},
function(error) {
});
In the Browser
Before the less.js script, the plugin author should include the javascript file in the page.
<script src = "plugin.js"></script>
<script>
less = {
plugins: [plugin]
};
</script>
<script src = "less.min.js"></script>
List of Less Plugins
The following table lists out the plugins available in LESS.
Postprocessor/Feature Plugins
Sr.No. | Plugins & Description |
---|---|
1 | Autoprefixer It is used to add prefixes to CSS after translation from LESS. |
2 | CSScomb It helps to improve the maintenance of your stylesheet. |
3 | clean-css It minifies the CSS output from LESS. |
4 | CSSWring It compresses or minify the CSS output from LESS. |
5 | css-flip It is used to generate the CSS from left-to-right(LTR) or right-to-left(RTL). |
6 | functions It writes the function of LESS in the LESS itself. |
7 | glob It is used to import multiple files. |
8 | group-css-media-queries It does the post-processing for Less. |
9 | inline-urls Automatically converts the URL to data uri. |
10 | npm-import It imports from npm package for less. |
11 | pleeease It is used to postprocess Less. |
12 | rtl LESS is reversed from ltr(left-to-right) to rtl(right-to-left). |
Framework/Library Importers
Sr.No. | Importers & Description |
---|---|
1 | Bootstrap Bootstrap LESS code is imported before the custom LESS code. |
2 | Bower Resolve LESS files are imported from the Bower packages. |
3 | Cardinal CSS for less.js Before the custom LESS code, the LESS code for Cardinal is imported. |
4 | Flexbox Grid Most commonly imported Framework or library importer. |
5 | Flexible Grid System It imports the Flexible Grid System. |
6 | Ionic It imports the ionic framework. |
7 | Lesshat It imports the Lesshat mixins. |
8 | Skeleton It imports the skeleton less code. |
Function Libraries
Sr.No. | Importers & Description |
---|---|
1 | advanced-color-functions It is used to find more contrasting colors. |
2 | cubehelix Using gamma correction value of 1, the cubehelix function can return a color between the two colors. |
3 | lists This lists manipulation functions library. |
For Plugin Authors
LESS allow an author to combine with less.
{
install: function(less, pluginManager) {
},
setOptions: function(argumentString) {
},
printUsage: function() {
},
minVersion: [2, 0, 0]
}
pluginManager provides a holder which can add file managers, post processors or visitors.
setOptions function passes the string.
printUsage function is used to explain the options.
The main point of programmatic usage in the LESS is less.render function. This function uses the following format in LESS −
less.render(input_data, options)
.then(function(output) {
//code here
},
function(error) {
});
the function can also be written in the following way −
less.render(css, options, function(error, output) {})
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 −
less.logger.addListener({
debug: function(message) {
},
info: function(message) {
},
warn: function(message) {
},
error: function(message) {
}
});
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, используя следующую команду -
java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss
Вы можете перейти по следующей ссылке, чтобы узнать больше о Wro4j Runner CLI
CSS :: LESSp
Этот модуль используется для синтаксического анализа и компиляции файла LESS в файл CSS. Ниже приводится команда, используемая для компиляции -
lessp.pl styles.less > styles.css
Вы можете перейти по следующей ссылке, чтобы узнать больше о CSS :: LESSp
Хост сценариев Windows
Ниже приведен компилятор командной строки, который будет работать в Windows.
cscript //nologo lessc.wsf input.less [output.css] [-compress]
OR
lessc input.less [output.css] [-compress]
Вы можете перейти по следующей ссылке, чтобы узнать больше о Less.js для Windows.
без точек
Ниже приведен компилятор командной строки для запуска без точки для Windows.
dotless.Compiler.exe [-switches] <inputfile> [outputfile]
Вы можете перейти по следующей ссылке, чтобы узнать больше о без точки
UI / Тематические рамки и компоненты
LESS поддерживает некоторые из фреймворков пользовательского интерфейса / тем, перечисленных в следующей таблице -
Sr.No. | Структура и описание |
---|---|
1 | 1pxdeep Это плоская тема Bootstrap 3 с мощными элементами управления цветовой схемой. |
2 | Bootflat Это платформа с открытым исходным кодом, основанная на Bootstrap. |
3 | BootPress Это PHP-фреймворк на основе плоских файловых CMS. |
4 | Бутстрап Это мощная мобильная интерфейсная среда для быстрой и простой веб-разработки. |
5 | Bootstrap a11y тема Он обеспечивает легкий доступ для веб-разработки. |
6 | Сапоги Это тема с открытым исходным кодом, которая предоставляет бесплатные темы для Bootstrap. |
7 | Кардинал Это CSS-фреймворк для мобильных устройств, который позволяет поддерживать CSS для адаптивных веб-сайтов, пользовательских интерфейсов и приложений. |
8 | CSSHorus Это библиотека, которая обеспечивает простую разработку мобильных веб-сайтов. |
9 | Flat UI Бесплатно Он основан на Bootstrap 3, который содержит базовые и сложные компоненты и обеспечивает дизайн темы для Bootstrap. |
10 | фронтальный Это интерфейсный фреймворк, содержащий набор инструментов для создания виджетов. |
11 | InContent Он определяет описание изображения с помощью CSS3 и SASS / LESS. |
12 | Чернила Он создает адаптивные веб-интерфейсы. |
13 | JBST Это мощный фреймворк тем, используемый для создания дочерних тем для WordPress и используемый в качестве автономного конструктора веб-сайтов. |
14 | KNACSS Он используется для разработки проектов HTML / CSS с использованием гибких и расширяемых таблиц стилей. |
15 | Кубе Это CSS-фреймворк, используемый профессиональными дизайнерами и разработчиками. |
16 | Метро UI CSS Это интерфейсный фреймворк, используемый для создания стиля Windows Metro в проектах. |
17 | Предварительно Это CSS-фреймворк, который использует LESS. |
18 | прелюдия Это интерфейсный CSS-фреймворк, который использует LESS. |
19 | Схема Это легкий и отзывчивый фреймворк, который помогает создавать сложные веб-сайты. |
20 | Семантический интерфейс Это структура пользовательского интерфейса, которая создает адаптивные макеты с использованием HTML. |
21 год | UIkit Это интерфейсный фреймворк, который включает компоненты HTML, CSS и JS и прост в использовании и разработке веб-приложений. |
22 | ngBoilerplate Это система сборки на основе grunt, используемая для проектов AngularJS. |
23 | менее рельсовый Это язык динамических таблиц стилей, который использует Less.js для проектов Rails. |
24 | Wee Это интерфейсный фреймворк, содержащий компоненты начальной загрузки HTML, CSS и JavaScript для разработки адаптивных веб-проектов. |
Сеточные системы
LESS поддерживает фреймворки грид-систем, перечисленные в следующей таблице -
Sr.No. | Структура и описание |
---|---|
1 | Гибкая сетка Это CSS-фреймворк, который гибко создает веб-проекты. |
2 | AdaptGrid Это адаптивная сеточная система для разработки веб-приложений. |
3 | Текучий Это легкая адаптивная сеточная система, основанная на препроцессоре LESS. |
4 | Золотая сетка Это сеточная система для адаптивного дизайна. |
5 | МЕНЬШЕ Zen Grid Он используется для решения проблемы округления субпикселей. |
6 | Order.less Это библиотека LESS, используемая для выравнивания, системы сеток и модульных шкал. |
7 | ответственно Это настраиваемая и автономная сеточная система. |
8 | Отзывчивый шаблон Это легкая сеточная система, используемая для создания адаптивного веб-дизайна для сайтов. |
9 | Semantic.gs Это стандартный дистрибутив веб-браузера для его операционной системы. |
Библиотеки миксинов
LESS предоставляет библиотеки миксинов, перечисленные в следующей таблице -
Sr.No. | Структура и описание |
---|---|
1 | 3L Он предоставляет новейшие функции CSS3 для препроцессора LESS. |
2 | оживлять Это библиотека, используемая для анимации браузера, используемой в проектах. |
3 | Clearless Он использует многоразовые миксины LESS, не разрушая стиль и не создавая чрезмерных размеров в таблицах стилей. |
4 | Css3LessPlease Он преобразует css3please.com в МЕНЬШЕ миксинов, и при запуске CSS элемент будет мгновенно изменен. |
5 | CssEffects Он предоставляет эффекты стиля CSS, написанные как LESS миксины. |
6 | Cssowl Это библиотека миксинов, которая поддерживает LESS, SASS и Stylus. |
7 | cube.less Это трехмерный анимированный куб, созданный с использованием только CSS. |
8 | tRRtoolbelt.less Это библиотека, которая предоставляет миксины и функции для выполнения действий с файлами LESS. |
9 | стандартное восточное время Он основан на LESS, что позволяет более эффективно писать код LESS. |
10 | Шестиугольник Он создает шестиугольники CSS с размером и цветом. |
11 | бездомный Это библиотека миксинов, которая содержит полезные функции для Less.js. |
12 | LESS Elements Это набор миксинов для препроцессора LESS. |
13 | МЕНЬШЕ шляпы Это библиотека миксинов, которая помогает экспортировать CSS для всех браузеров и создает множество теней, градиентов, анимации и т. Д. |
14 | Lessley Это набор для тестирования, написанный на LESS. |
15 | МЕНЬШЕ-биди Это набор миксинов LESS, который обеспечивает двунаправленное стили без дублирования кода. |
16 | LESS-Mix Это библиотека миксинов, написанная на LESS. |
17 | медиа-запрос к типу Он используется для создания медиа-запросов, которые позволяют Internet Explorer 8 и более ранним версиям получать доступ к контенту. |
18 | Больше-Colors.less Он предоставляет переменные для управления цветом при разработке веб-приложений. |
19 | более менее Это библиотека, которая позволяет писать код CSS для кроссбраузерной совместимости. |
20 | Более менее Это комбинация Compass и Twitter Bootstrap, которая предоставляет больше возможностей для LESS за счет использования CSS3 и кроссбраузерных миксинов. |
21 год | более или менее Он предоставляет мощные миксины для less.js. |
22 | normalize.less Он предоставляет нормализованный CSS с использованием LESS. |
23 | Обан Это набор миксинов, которые ускоряют процесс разработки веб-приложения. |
24 | Предварительная загрузка Это набор LESS-сервисов, которые используют миксины и переменные для написания лучшего CSS и формируются из Bootstrap. |
25 | прелюдия-миксины Это МЕНЬШАЯ библиотека миксинов. |
26 | Форма: МЕНЬШЕ Он предоставляет ряд миксинов для определения различных форм для приложения. |