МЕНЬШЕ — Обзор

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

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

Почему МЕНЬШЕ?

Давайте теперь поймем, почему мы используем LESS.

• LESS поддерживает создание более чистого, кроссбраузерного CSS быстрее и проще.

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

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

• Более быстрое обслуживание может быть достигнуто с помощью переменных LESS.

LESS поддерживает создание более чистого, кроссбраузерного CSS быстрее и проще.

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

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

Более быстрое обслуживание может быть достигнуто с помощью переменных LESS.

история

LESS был спроектирован Алексисом Селье в 2009 году. LESS является открытым исходным кодом. Первая версия LESS была написана на Ruby; в более поздних версиях использование Ruby было заменено JavaScript.

Характеристики

• Более чистый и читаемый код может быть написан организованно.

• Мы можем определить стили, и они могут быть повторно использованы в коде.

• LESS основан на JavaScript и является супер-набором CSS.

• LESS — это гибкий инструмент, который решает проблему избыточности кода.

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

Мы можем определить стили, и они могут быть повторно использованы в коде.

LESS основан на JavaScript и является супер-набором CSS.

LESS — это гибкий инструмент, который решает проблему избыточности кода.

преимущества

• LESS легко генерирует CSS, который работает во всех браузерах.

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

• Техническое обслуживание может быть достигнуто быстрее с помощью переменных .

• LESS позволяет вам легко повторно использовать целые классы, ссылаясь на них в ваших наборах правил.

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

LESS легко генерирует CSS, который работает во всех браузерах.

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

Техническое обслуживание может быть достигнуто быстрее с помощью переменных .

LESS позволяет вам легко повторно использовать целые классы, ссылаясь на них в ваших наборах правил.

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

Недостатки

• Требуется время, чтобы узнать, если вы новичок в предварительной обработке CSS.

• Из-за тесной связи между модулями, необходимо приложить больше усилий для повторного использования и / или тестирования зависимых модулей.

• LESS имеет меньше фреймворка по сравнению со старым препроцессором, таким как SASS, который состоит из фреймворков Compass , Gravity и Susy .

Требуется время, чтобы узнать, если вы новичок в предварительной обработке CSS.

Из-за тесной связи между модулями, необходимо приложить больше усилий для повторного использования и / или тестирования зависимых модулей.

LESS имеет меньше фреймворка по сравнению со старым препроцессором, таким как SASS, который состоит из фреймворков Compass , Gravity и Susy .

МЕНЬШЕ — Установка

В этой главе мы шаг за шагом поймем, как установить LESS.

Системные требования для LESS

• Операционная система — кроссплатформенная

• Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Операционная система — кроссплатформенная

Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Установка LESS

Давайте теперь разберемся с установкой LESS.

Шаг 1 — Нам нужны NodeJ для запуска LESS примеров. Чтобы скачать NodeJs, откройте ссылку https://nodejs.org/en/ , вы увидите экран, как показано ниже —

Загрузите последнюю версию версии ZIP-файла.

Шаг 2 — Запустите программу установки, чтобы установить Node.js в вашей системе.

Шаг 3 — Далее установите LESS на сервер через NPM (Node Package Manager). Выполните следующую команду в командной строке.

npm install -g less

Шаг 4 — После успешной установки LESS вы увидите следующие строки в командной строке —

 `- [email protected]
    + - [email protected]
    |  `- [email protected]
    + - [email protected]
    + - [email protected]
    + - [email protected]
    + - [email protected]
    |  `- [email protected]
    + - обещание@7.1.1
    |  `- [email protected]
    + - [email protected]
    |  + - [email protected]
    |  + - [email protected]
    |  |  `- [email protected]
    |  |  + - [email protected]
    |  |  `- [email protected]
    |  + - [email protected]
    |  |  `- [email protected]
    |  |  + - [email protected]
    |  |  + --водит@2.0.1
    |  |  + - [email protected]
    |  |  + - [email protected]
    |  |  + - [email protected]
    |  |  `- [email protected]
    |  + - [email protected]
    |  + - комбинированный поток@1.0.5
    |  |  `- [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]

пример

Ниже приведен простой пример МЕНЬШЕ.

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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле hello.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

МЕНЬШЕ — Вложенные правила

Описание

Это группа свойств CSS, которая позволяет использовать свойства одного класса в другом классе и включает имя класса в качестве его свойств. В LESS вы можете объявить mixin так же, как стиль 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле escaping.html .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

LESS — Функции

Описание

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-файл в браузере, и вы получите следующий вывод.

Сохраните приведенный выше HTML-код в файле functions.html .

Откройте этот HTML-файл в браузере, и вы получите следующий вывод.

LESS — Пространства имен и средства доступа

Описание

Пространства имен используются для группировки миксинов под общим именем. Используя пространства имен, вы можете избежать конфликта имен и инкапсулировать группу миксинов извне.

пример

В следующем примере демонстрируется использование пространств имен и методов доступа в файле 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле scope.html .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

LESS — Комментарии

Описание

Комментарии делают код ясным и понятным для пользователей. Вы можете использовать как стиль блока, так и встроенные комментарии в коде, но при компиляции кода 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше 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-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле importing.html .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

МЕНЬШЕ — Переменные

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

Следующая таблица демонстрирует использование переменных LESS в деталях.

Многократного повторения одного и того же значения можно избежать с помощью использования переменных .

Переменные также можно использовать в других местах, таких как имена селекторов, имена свойств , URL-адреса и операторы @import .

Мы можем определить переменные с именем переменной, состоящей из значения.

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

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

МЕНЬШЕ — Продлить

Extend — это псевдо-класс LESS, который расширяет другие стили селектора в одном селекторе с помощью : extension селектора.

пример

В следующем примере демонстрируется использование extension в файле 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;
}

Вы можете скомпилировать файл exte.less для extension.css , используя следующую команду:

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле exte_syntax.htm .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле exte_syntax.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Расширить синтаксис

Расширение помещается в набор правил или прикрепляется к селектору. Это похоже на псевдокласс, содержащий один или несколько классов, разделенных запятой. Используя необязательное ключевое слово 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-код в файле exte_syntax.htm .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле exte_syntax.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

В следующей таблице перечислены все типы синтаксиса расширений, которые вы можете использовать в LESS —

Extend связан с селектором, который похож на псевдокласс с селектором в качестве параметра.

Синтаксис &: extend (селектор) может быть помещен в тело набора правил.

Вложенные селекторы сопоставляются с помощью селектора расширения .

По умолчанию, расширение ищет точное соответствие между селекторами.

Форма n-го выражения важна в расширении, иначе она рассматривает селектор как другой.

Когда ключевое слово all идентифицируется наконец в аргументе расширения, тогда LESS сопоставляет этот селектор как часть другого селектора.

Расширение может быть подключено к интерполированному селектору.

Расширение соответствует только селектору, который присутствует в той же декларации мультимедиа.

Он не может обнаружить дублирование селекторов.

Ниже приведены типы вариантов использования для расширения.

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

Расширение используется для перемещения селектора до свойств, которые вы хотите использовать; это помогает уменьшить код, сгенерированный CSS.

Используя extension, мы можем объединить те же стили отдельных селекторов в другой селектор.

LESS — Mixins

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

Следующая таблица демонстрирует использование смесей LESS в деталях.

Можно сделать так, чтобы миксины исчезали с выхода, просто помещая скобки после него.

Миксины могут содержать не только свойства, но и селекторы.

Пространства имен используются для группировки миксинов под общим именем.

Когда для пространства имен применяется guard, определенные им миксины используются только тогда, когда условие guard возвращает true.

Ключевое слово ! Important используется для переопределения конкретного свойства.

пример

Следующий пример демонстрирует использование mixins в файле LESS —

<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>

Затем создайте файл style.less .

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

Вы можете скомпилировать style.less в style.css , используя следующую команду —

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле less_mixins.html .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле less_mixins.html .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Скобки необязательны при вызове mixins. В приведенном выше примере оба оператора .p1 (); и .p1; сделать то же самое.

LESS — Параметрические миксины

Описание

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

Например, рассмотрим простой фрагмент кода LESS —

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

Здесь мы используем параметрический миксин в качестве .border с тремя параметрами — шириной, стилем и цветом. Используя эти параметры, вы можете настроить выход миксина с использованием переданных значений параметров.

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

Параметры могут быть разделены запятыми или точками с запятой.

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

Когда вызывается миксин , @arguments включает все переданные аргументы.

Mixin принимает переменное количество аргументов, используя …..

Измените поведение mixin, передав ему параметры.

LESS — Mixins как функции

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

Следующая таблица демонстрирует использование mixins как функции в деталях.

Mixins состоят из переменных; они могут использоваться в области действия вызывающего абонента и являются видимыми.

Миксины аналогичны функциям, а переменные, определенные в миксинах, будут вести себя как возвращаемые значения.

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

LESS — Передача наборов правил в Mixins

Описание

Отдельный набор правил содержит наборы правил, такие как свойства, вложенные наборы правил, объявление переменных, миксины и т. Д. Он хранится в переменной и включается в другую структуру; все свойства набора правил копируются в эту структуру.

пример

В следующем примере показано, как передать набор правил в mixin в файле LESS —

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>

Затем создайте файл style.less .

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

Вы можете скомпилировать файл style.less в style.css , используя следующую команду —

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файлеpass_ruleset.htm .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файлеpass_ruleset.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Обзорный

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

В следующей таблице перечислены все типы областей действия.

Переменные и миксины определяются внутри отдельного набора правил.

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

Отсоединенный набор правил может получить доступ к области, импортировавшись в нее.

LESS — импортные директивы

Описание

Директива @import используется для импорта файлов в коде. Он распространяет код LESS по разным файлам и позволяет легко поддерживать структуру кода. Вы можете поместить операторы @import в любом месте кода.

Например, вы можете импортировать файл, используя ключевое слово @import как @import «file_name.less» .

Расширения файлов

Вы можете использовать операторы @import в зависимости от различных расширений файлов, таких как —

• Если вы используете расширение .css , то оно будет рассматриваться как CSS, а оператор @import останется без изменений.

• Если оно содержит какое-либо другое расширение, оно будет считаться МЕНЬШИМ и будет импортировано.

• Если расширение LESS отсутствует, оно будет добавлено и включено как импортированный файл LESS.

Если вы используете расширение .css , то оно будет рассматриваться как CSS, а оператор @import останется без изменений.

Если оно содержит какое-либо другое расширение, оно будет считаться МЕНЬШИМ и будет импортировано.

Если расширение LESS отсутствует, оно будет добавлено и включено как импортированный файл LESS.

@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

пример

В следующем примере демонстрируется использование переменной в файле SCSS —

<!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>

Затем создайте файл import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Теперь создайте файл style.less .

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Файл import_dir.less будет импортирован в файл style.less по пути https://www.tutorialspoint.com/less/import_dir.less .

Вы можете скомпилировать style.less в style.css , используя следующую команду —

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле import_directives.html .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле import_directives.html .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

LESS — Параметры импорта

В этой главе мы поймем важность параметров импорта в LESS. LESS предлагает оператор @import, который позволяет таблицам стилей импортировать таблицы стилей LESS и CSS.

В следующих таблицах перечислены директивы импорта, которые будут реализованы в операторах импорта.

Он использует файл LESS только в качестве ссылки и не будет выводить его.

Это позволяет вам копировать ваш CSS в вывод без обработки.

Он будет обрабатывать импортированный файл как обычный файл LESS, независимо от того, каким может быть расширение файла.

Импортированный файл будет рассматриваться как обычный файл CSS, несмотря на то, что может быть расширением файла.

Импортирует файл только один раз.

Это будет импортировать файл несколько раз.

Он продолжает компиляцию, даже если импортируемый файл не найден.

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

Например —

@import (less, optional) "custom.css";

LESS — Mixin Guards

Описание

Если вы хотите сопоставить простые значения или количество аргументов в выражениях, тогда вы можете использовать охранники. Он связан с объявлением mixin и включает условие, которое прикреплено к mixin. У каждого миксина будет один или несколько охранников, разделенных запятой; охранник должен быть заключен в скобки. LESS использует защищенные миксины вместо операторов if / else и выполняет вычисления, чтобы определить совпавший миксин.

В следующей таблице описаны различные типы защитных элементов mixin вместе с описанием.

Вы можете использовать оператор сравнения (=) для сравнения чисел, строк, идентификаторов и т. Д.

Вы можете использовать ключевое слово and для обхода логических операторов со средствами защиты.

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

LESS использует функцию по умолчанию для сопоставления mixin с другими совпадениями микширования.

пример

В следующем примере демонстрируется использование миксиновой охраны в файле LESS —

<!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>

Теперь создайте файл style.less .

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)
}

Вы можете скомпилировать style.less в style.css , используя следующую команду —

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле mixin-guard.html .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле mixin-guard.html .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

LESS — CSS Guards

Описание

Защитные элементы используются для сопоставления простых значений или ряда аргументов в выражениях. Применяется к селекторам CSS. Это синтаксис объявления mixin и его немедленного вызова. Чтобы успешно вывести оператор типа if ; присоединитесь к этому с помощью функции & , которая позволяет группировать несколько охранников.

пример

В следующем примере демонстрируется использование css guard в файле LESS —

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>

Затем создайте файл style.less .

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();

Вы можете скомпилировать файл style.less в style.css , используя следующую команду —

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

.style {
   background-color: blue;
   color: white;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле css_guard.htm .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле css_guard.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

LESS — Петли

В этой главе мы поймем, как работают циклы в LESS. Оператор Loops позволяет нам выполнять оператор или группу операторов несколько раз. Различные итеративные / циклические структуры могут быть созданы, когда рекурсивный миксин объединяется с Guard Expressions и Pattern Matching .

пример

В следующем примере демонстрируется использование циклов в файле LESS —

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>

Затем создайте файл style.less .

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

Вы можете скомпилировать файл style.less в style.css , используя следующую команду —

lessc style.less style.css

Выполните вышеуказанную команду; он автоматически создаст файл style.css со следующим кодом —

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле loop_example.htm .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле loop_example.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

МЕНЬШЕ — Слияние

Описание

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

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

Это добавляет значение свойства в конце.

Это добавляет значение свойства с пробелом.

LESS — родительские селекторы

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

В следующей таблице показаны типы родительского селектора —

Символ & будет представлять ближайший селектор, а также все родительские селекторы.

Добавление селектора к унаследованным (родительским) селекторам полезно при изменении порядка селекторов.

& Также может производить все возможные перестановки селекторов в списке, разделенном запятыми.

пример

В следующем примере демонстрируется использование родительского селектора в файле 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;
}

В приведенном выше примере & относится к селектору а .

Выход

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код.

• Сохраните приведенный выше HTML-код в файле parent_selector1.htm .

• Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Сохраните приведенный выше HTML-код в файле parent_selector1.htm .

Откройте этот HTML-файл в браузере, отобразится следующий вывод.

Оператор « Родительские селекторы» имеет много применений, например, когда вам нужно объединить селекторы вложенного правила иным способом, чем по умолчанию. Другим типичным использованием & является многократное создание имен классов. Для получения дополнительной информации нажмите здесь .

LESS — Разные функции

Разные функции состоят из группы функций разного рода.

В следующей таблице перечислены все типы функций misc —

Это строка, которая представляет цвета.

Он используется для проверки размера изображения из файла.

Он проверяет ширину изображения из файла.

Он проверяет высоту изображения из файла.

Число конвертируется из одной единицы в другую.

Data uri — это схема универсального идентификатора ресурса (URI), которая получает ресурс на веб-страницах.

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

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

Функция get — unit возвращает свою единицу, где присутствует аргумент с числом и единицами измерения.

SVG-градиент — это переход одного цвета в другой. Он может добавить много цветов к одному элементу.

LESS — Строковые функции

Описание

Less поддерживает некоторые строковые функции, перечисленные ниже —

• побег
• е
• % формат
• замещать

В следующей таблице описаны вышеприведенные строковые функции вместе с описанием.

escape("Hello!! welcome to Tutorialspoint!")

Hello%21%21%20welcome%20to%20Tutorialspoint%21

filter: e("Hello!! welcome to Tutorialspoint!");

filter: Hello!! welcome to Tutorialspoint!;

%(string, arguments ...)

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

"Welcome, to Tutorialspoint!"

Побег

Он кодирует строку или информацию, используя URL-кодирование для специальных символов. Вы не можете закодировать некоторые символы, такие как,, / ,? , @ , & , + , ~ ,! , $ , ‘ и некоторые символы, которые вы можете кодировать, такие как \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ и = .

Выходная строка выводится как —

е

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

Выходная строка выводится как —

% формат

Эта функция форматирует строку. Это может быть написано в следующем формате —

Он выводит отформатированную строку как —

замещать

Он используется для замены текста в строке. Он использует некоторые параметры —

строка — поиск строки и замена в.

шаблон — он ищет шаблон регулярного выражения.

замена — заменяет строку, которая соответствует шаблону.

флаги — это необязательные флаги регулярного выражения.

Заменяет строку как —

LESS — список функций

Описание

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

В следующей таблице перечислены функции списка, используемые в LESS —

Он будет принимать список значений через запятую или через пробел в качестве параметра.

Он вернет значение в указанной позиции в списке.

LESS — математические функции

Описание

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

Следующая таблица показывает математические функции, используемые в LESS —

ceil(0.7)

1

floor(3.3)

3

percentage(0.2)

20%

round(3.77)

4

sqrt(25)

5

abs(30ft)

30ft

sin(2)

0.90929742682

asin(1)

1.5707963267948966

cos(2)

-0.4161468365471424

acos(1)

0

tan(60)

0.320040389379563

atan(1)

0.7853981633974483

pi()

3.141592653589793

pow(3,3)

27

mod(7,3)

1

min(70,30,45,20)

20

max(70,30,45,20)

70

перекрывать

Он округляет число до следующего наибольшего целого числа.

это вокруг числа до —

этаж

Он округляет число до следующего младшего целого числа.

это вокруг числа до —

процент

Преобразует число с плавающей запятой в процентную строку.

он преобразует число в процентную строку как —

круглый

Округляет число с плавающей запятой.

он преобразует число в значение округления как —

SQRT

Возвращает квадратный корень числа.

он определяет квадратный корень числа как —

абс

Это обеспечивает абсолютное значение числа.

абсолютное значение отображается как —

грех

Возвращает радианы по числам.

вычисляет значение синуса как —

как в

Он определяет арксинус (обратный синусу) числа, которое возвращает значение от -pi / 2 до pi / 2.

вычисляет значение asin как —

соз

Возвращает косинус заданного значения и определяет радианы по числам без единиц измерения.

он вычисляет значение cos как —

экоса

Он определяет арккозин (обратное косинусу) числа, которое возвращает значение между 0 и пи.

вычисляет значение acos как —

загар

Указывает тангенс числа.

он рассчитывает значение загара как —

загар

Он указывает арктангенс (обратный касательной) указанного числа.

он отображает значение atan как —

число Пи

Возвращает значение пи.

он определяет значение пи как —

бух

Он определяет значение первого аргумента, возведенного в степень второго аргумента.

он определяет значение мощности как —

модификация

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

возвращает значение модуля как —

мин

Он указывает наименьшее значение одного или нескольких аргументов.

возвращает минимальное значение как —

Максимум

Он указывает наибольшее значение одного или нескольких аргументов.

возвращает максимальное значение как —

LESS — Тип Функции

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

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

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

ISNUMBER

Он принимает значение в качестве параметра и возвращает истину , если это число или ложь в противном случае.

IsString

Он принимает значение в качестве параметра и возвращает true , если это строка или false в противном случае.

iscolor

Он принимает значение в качестве параметра и возвращает true , если значение является цветом, или false, если это не так.

iskeyword

Он принимает значение в качестве параметра и возвращает true , если значение является ключевым словом, или false, если это не так.

ISURL

Он принимает значение в качестве параметра и возвращает истину , если значение является URL-адресом или ложью, если это не так.

ispixel

Он принимает значение в качестве параметра и возвращает значение true , если значение представляет собой число в пикселях или значение false в противном случае.

ISEM

Он принимает значение в качестве параметра и возвращает true , если значение является значением em, или false, если это не так.

ispercentage

Он принимает значение в качестве параметра и возвращает значение true , если значение указано в процентах, или возвращает значение false , если значение не указано в процентах.

isunit

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

isruleset

Он принимает значение в качестве параметра и возвращает true , если value является набором правил или false в противном случае.

МЕНЬШЕ — Функции определения цвета

Описание

LESS предоставляет ряд полезных цветовых функций для изменения и управления цветами по-разному. LESS поддерживает некоторые функции определения цвета, как показано в таблице ниже —

rgb(220,20,60)

#dc143c

rgba(220,20,60, 0.5)

rgba(220, 20, 60, 0.5)

argb(rgba(176,23,31,0.5))

#80b0171f

hsl(120,100%, 50%)

#00ff00

hsla(0,100%,50%,0.5)

rgba(255, 0, 0, 0.5);

hsv(80,90%,70%)

#7db312

hsva(80,90%,70%,0.6)

rgba(125, 179, 18, 0.6)

RGB

Он создает цвет из красного, зеленого и синего значений. Имеет следующие параметры —

красный — содержит целое число от 0 до 255 или процент от 0 до 100%.

зеленый — содержит целое число от 0 до 255 или процент от 0 до 100%.

синий — содержит целое число от 0 до 255 или процент от 0 до 100%.

он преобразует цвет со значениями RGB как —

RGBA

Он определяет цвет по красному, зеленому, синему и альфа-значениям. Имеет следующие параметры —

красный — содержит целое число от 0 до 255 или процент от 0 до 100%.

зеленый — содержит целое число от 0 до 255 или процент от 0 до 100%.

синий — содержит целое число от 0 до 255 или процент от 0 до 100%.

альфа — содержит число от 0 до 1 или процент от 0 до 100%.

он преобразует цветовой объект со значениями rgba как —

ARGB

Он определяет шестнадцатеричное представление цвета в формате #AARRGGBB . Он использует следующий параметр —

цвет — определяет цвет объекта.

возвращает цвет argb как —

HSL

Он генерирует цвет по значениям оттенка, насыщенности и яркости. Имеет следующие параметры —

hue — содержит целое число от 0 до 360, представляющее градусы.

насыщенность — содержит число от 0 до 1 или процент от 0 до 100%.

легкость — содержит число от 0 до 1 или процент от 0 до 100%.

он возвращает цветовой объект, используя значения HSL как —

HSLA

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

hue — содержит целое число от 0 до 360, представляющее градусы.

насыщенность — содержит число от 0 до 1 или процент от 0 до 100%.

легкость — содержит число от 0 до 1 или процент от 0 до 100%.

альфа — содержит число от 0 до 1 или процент от 0 до 100%.

он определяет цветовой объект, используя значения HSLA как —

ВПГ

Это производит цвет от значения оттенка, насыщенности и значения. Он содержит следующие параметры —

hue — содержит целое число от 0 до 360, представляющее градусы.

насыщенность — содержит число от 0 до 1 или процент от 0 до 100%.

значение — содержит число от 0 до 1 или процент от 0 до 100%.

он преобразует цветовой объект со значениями hsv как —

hsva

Это производит цвет от оттенка, насыщенности, значения и альфа-значений. Он использует следующие параметры —

hue — содержит целое число от 0 до 360, представляющее градусы.

насыщенность — содержит число от 0 до 1 или процент от 0 до 100%.

значение — содержит число от 0 до 1 или процент от 0 до 100%.

альфа — содержит число от 0 до 1 или процент от 0 до 100%.

определяет цвет объекта со значениями hsva как —

LESS — функции цветного канала

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

background: hue(hsl(75, 90%, 30%));

background: 75;

background: saturation(hsl(75, 90%, 30%));

background: 90%;

background: lightness(hsl(75, 90%, 30%));

background: 30%;

background: hsvhue(hsv(75, 90%, 30%));

background: 75;

background: hsvsaturation(hsv(75, 90%, 30%));

background: 90%;

background: hsvvalue(hsv(75, 90%, 30%));

background: 30%;

background: red(rgb(5, 15, 25));

background: 5;

background: green(rgb(5, 15, 25));

background: 15;

background: blue(rgb(5, 15, 25));

background: 25;

background: alpha(rgba(5, 15, 25, 1.5));

background: 2;

background: luma(rgb(50, 250, 150));

background: 71.2513323%;

background: luminance(rgb(50, 250, 150));

background: 78.53333333%;

цвет

В цветовом пространстве HSL канал оттенка извлекается из цветового объекта.

Он компилируется в CSS, как показано ниже —

насыщение

В цветовом пространстве HSL канал насыщения извлекается из цветового объекта.

Он компилируется в CSS, как показано ниже —

расторопность

В цветовом пространстве HSL канал яркости выделяется из цветового объекта.

Он компилируется в CSS, как показано ниже —

hsvhue

В цветовом пространстве HSV канал оттенка извлекается из цветового объекта.

Он компилируется в CSS, как показано ниже —

hsvsaturation

В цветовом пространстве HSL канал насыщения извлекается из цветового объекта.

Он компилируется в CSS, как показано ниже —

hsvvalue

В цветовом пространстве HSL канал значений извлекается из цветового объекта.

Он компилируется в CSS, как показано ниже —

красный

Красный канал извлекается из цветного объекта.

Он компилируется в CSS, как показано ниже —

зеленый

Зеленый канал извлекается из цветного объекта.

Он компилируется в CSS, как показано ниже —

синий

Синий канал извлекается из цветного объекта.

Он компилируется в CSS, как показано ниже —

альфа

Альфа-канал извлекается из цветного объекта.

Он компилируется в CSS, как показано ниже —

яркостной

Значение яркости рассчитывается для цветного объекта.

Он компилируется в CSS, как показано ниже —

яркость

Значение яркости рассчитывается без гамма-коррекции.

Он компилируется в CSS, как показано ниже —

МЕНЬШЕ — Цветовая операция

Описание

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

Это изменяет интенсивность или насыщенность цвета в элементе.

Это уменьшает интенсивность или насыщенность цвета в элементе.

Это увеличивает легкость цвета в элементе.

Это изменяет интенсивность или насыщенность цвета в элементе.

Это увеличивает непрозрачность для выбранных элементов.

Уменьшает непрозрачность для выбранных элементов.

Используется для установки прозрачности цвета для выбранных элементов.

Используется для поворота угла цвета для выбранных элементов.

Он смешивает два цвета вместе с непрозрачностью.

Он смешивает цвет с белым по мере уменьшения пропорции цвета.

Он смешивает цвет с черным, когда вы уменьшаете пропорцию цвета.

Он отбрасывает насыщенность от цвета в выбранных элементах.

Устанавливает контраст для цветов в элементе.

LESS — функции смешивания цветов

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

В следующей таблице приведены функции смешивания цветов, используемые в LESS.

Он умножает два цвета и возвращает результирующий цвет.

Он принимает два цвета и возвращает более яркий цвет. Он работает напротив функции умножения .

Он генерирует результат, комбинируя эффект умножения и экрана .

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

Это похоже на наложение, но роль цветов поменялась местами.

Вычитает второй входной цвет из первого входного цвета.

Он работает аналогично функции разности, но с более низким контрастом.

Он вычисляет среднее значение двух входных цветов для каждого канала (RGB).

Он работает напротив функции разности , которая вычитает первый цвет из второго.

LESS — Использование командной строки

Используя командную строку, мы можем скомпилировать файл .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

Необходимо указать commit — ish, когда мы приступаем к установке неопубликованной версии lessc, и необходимо следовать инструкциям для определения URL-адреса git в качестве зависимости. Это гарантирует, что вы используете правильную версию leesc для вашего проекта.

Использование на стороне сервера и в командной строке

bin / lessc включает двоичный файл в хранилище. Он работает с Windows, OS X и nodejs на * nix.

Использование командной строки

Входные данные читаются из стандартного ввода, когда для источника установлено тире или дефис (-).

lessc [option option = parameter ...]  [destination]

Например, мы можем скомпилировать .less в .css , используя следующую команду:

lessc stylesheet.less stylesheet.css

Мы можем скомпилировать .less в .css и минимизировать результат, используя следующую команду.

lessc -x stylesheet.less stylesheet.css

Опции

В следующей таблице перечислены параметры, используемые в командной строке —

lessc -help
lessc -h

lessc --include-path = PATH1;PATH2

lessc -M
lessc --depends

lessc --no-color

lessc --no-ie-compat

lessc --no-js

lessc --lint
lessc -l

lessc --silent
lessc -s

lessc --strict-imports

lessc --insecure

lessc -version
lessc -v

lessc -x
lessc --compress

lessc --source-map
lessc -source-map = file.map

lessc --source-map-rootpath = dev-files/

lessc --source-map-basepath = less-files/

lessc --source-map-less-inline

lessc --source-map-map-inline

lessc --source-map-url = ../my-map.json

lessc -rp=resources/
lessc --rootpath=resources/

lessc -ru
lessc --relative-urls

lessc -sm = on
lessc --strict-math = on

lessc -su = on
lessc --strict-units = on

lessc --global-var = "background = green"

lessc --modify-var = "background = green"

lessc --url-args = "arg736357"

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all

lessc --clean-css
lessc --plugin = clean-css = "advanced"

Помогите

Справочное сообщение отображается с доступными параметрами.

Включить пути

Включает в себя доступные пути к библиотеке. На эти пути можно просто и относительно ссылаться в файлах Less. Пути в окнах разделяются двоеточием (:) или точкой с запятой (;).

Makefile

Он генерирует список зависимостей импорта make-файла в стандартный вывод в качестве вывода.

Нет цвета

Это отключает цветной вывод.

Нет IE Совместимость

Это отключает проверки совместимости IE.

Отключить JavaScript

Это отключает JavaScript в меньшем количестве файлов.

корпия

Он проверяет синтаксис и сообщает об ошибке без вывода.

бесшумный

Он принудительно останавливает отображение сообщений об ошибках.

Строгий импорт

Это сила оценивает импорт.

Разрешить импорт из небезопасных хостов HTTPS

Он импортирует с небезопасных узлов HTTPS.

Версия

Он отображает номер версии и выходит.

Компресс

Это помогает удалить пробелы и сжать вывод.

Исходное имя выходного файла карты

Он генерирует исходную карту меньше. Если опция sourcemap определена без имени файла, она будет использовать карту расширений с именем файла Less в качестве источника.

Исходная карта Rootpath

Rootpath указывается и должен быть добавлен в Less пути к файлам внутри исходной карты, а также в файл карты, который указан в вашем выходном css.

Исходная карта Базовый путь

Указан путь, который должен быть удален из выходных путей. Basepath противоположен параметру rootpath.

Карта источника менее встроенная

Все файлы Less должны быть включены в исходную карту.

Карта источника Карта Встроенная

Он указывает, что в выходном css файл карты должен быть встроенным.

URL исходной карты

URL разрешено переопределять точки в файле карты в CSS.

ROOTPATH

Он устанавливает пути для перезаписи URL в относительных импорте и URL.

Относительные URL

В импортированных файлах URL-адрес переписывается так, чтобы URL-адрес всегда относился к базовому файлу.

Строгая математика

Он обрабатывает все математические функции в вашем CSS. По умолчанию он выключен.

Строгие Единицы

Это позволяет смешанные единицы.

Глобальная переменная

Определяется переменная, на которую может ссылаться файл.

Изменить переменную

Это не похоже на глобальную переменную; он перемещает объявление в конец вашего файла менее.

Аргументы URL

Чтобы перейти к каждому URL, можно указать аргумент.

Номера строк

Встроенное отображение источника генерируется.

Plugin

Он загружает плагин.

LESS — меньше использовать в браузере

Less используется в браузере, когда вы хотите динамически скомпилировать файл Less при необходимости, а не на стороне сервера; это потому, что less — это большой файл javascript.

Для начала нам нужно добавить скрипт LESS, чтобы использовать LESS в браузере —

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

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

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Настройки параметров

Перед тегом сценария можно установить параметры для объекта less программно. Это повлияет на все программное использование less и начальные теги ссылок.

Например, мы можем установить опцию следующим образом:

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

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

Мы также можем установить опцию в другом формате тега script, как указано ниже —

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

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

Вы также можете добавить эти опции в теги ссылок.

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

Точки, которые необходимо учитывать для параметров атрибута:

• window.less <скрипт тэга <тэг ссылки — это уровень важности.

• Атрибуты данных не могут быть записаны в случае верблюда; опция тега ссылки представлена ​​как варианты времени.

• Атрибуты данных с нестроковыми значениями должны быть в формате JSON.

window.less <скрипт тэга <тэг ссылки — это уровень важности.

Атрибуты данных не могут быть записаны в случае верблюда; опция тега ссылки представлена ​​как варианты времени.

Атрибуты данных с нестроковыми значениями должны быть в формате JSON.

Режим просмотра

Режим наблюдения можно включить, установив опцию env в development и вызвав less.watch () после добавления файла less.js. Если вы хотите, чтобы режим наблюдения был включен на временной основе, добавьте #! Watch к URL-адресу.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Изменить переменные

Изменение времени выполнения переменной LESS включено. LESS файл перекомпилируется при вызове нового значения. Следующий код показывает основное использование переменных изменения —

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

отладка

Мы можем добавить параметр ! DumpLineNumbers: mediaquery к параметру url или dumpLineNumbers, как упомянуто выше. Опцию mediaquery можно использовать с FireLESS (он отображает исходное имя файла LESS и номер строки сгенерированных LESS стилей CSS.)

Опции

Перед загрузкой файла сценария less.js необходимо установить параметры в глобальном объекте less .

<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 — это логический тип Импортированные файлы запрашиваются с опцией асинхронного или нет. По умолчанию это ложь.

• dumpLineNumbers — это строковый тип. В выходной файл css информация об исходной строке добавляется, когда задан dumpLineNumbers. Это помогает в отладке конкретного правила.

• env — это строковый тип. Конверт может работать на разработку или производство. Разработка устанавливается автоматически, когда URL документа начинается с file: // или он присутствует на вашем локальном компьютере.

• errorReporting — при сбое компиляции может быть установлен метод сообщения об ошибках.

• fileAsync — это логический тип. Когда страница присутствует с файловым протоколом, она может запросить асинхронный импорт или нет.

• функции — это тип объекта.

• logLevel — это числовой тип. Он отображает уровень ведения журнала в консоли javascript.

  • 2: информация и ошибки

  • 1: ошибки

  • 0: ничего

• poll — в режиме просмотра время отображается в миллисекундах между опросами. Это целочисленный тип; по умолчанию установлено 1000

• lativeUrls — URL-адреса корректируются, чтобы быть относительными; по умолчанию эта опция установлена ​​как ложная. Это означает, что URL уже относятся к файлу без записи. Это логический тип.

• globalVars — вставляет список глобальных переменных в код. Переменная типа string должна быть включена в кавычки

• modifyVars — В отличие от опции глобальной переменной. Он перемещает объявление в конец вашего меньшего файла.

• rootpath — устанавливает пути в начале каждого ресурса URL.

• useFileCache — использует кеш файла сессии. Кэш в меньшем количестве файлов используется для вызова modifyVars, где все меньше файлов не будут извлечены снова.

async — это логический тип Импортированные файлы запрашиваются с опцией асинхронного или нет. По умолчанию это ложь.

dumpLineNumbers — это строковый тип. В выходной файл css информация об исходной строке добавляется, когда задан dumpLineNumbers. Это помогает в отладке конкретного правила.

env — это строковый тип. Конверт может работать на разработку или производство. Разработка устанавливается автоматически, когда URL документа начинается с file: // или он присутствует на вашем локальном компьютере.

errorReporting — при сбое компиляции может быть установлен метод сообщения об ошибках.

fileAsync — это логический тип. Когда страница присутствует с файловым протоколом, она может запросить асинхронный импорт или нет.

функции — это тип объекта.

logLevel — это числовой тип. Он отображает уровень ведения журнала в консоли javascript.

2: информация и ошибки

1: ошибки

0: ничего

poll — в режиме просмотра время отображается в миллисекундах между опросами. Это целочисленный тип; по умолчанию установлено 1000

lativeUrls — URL-адреса корректируются, чтобы быть относительными; по умолчанию эта опция установлена ​​как ложная. Это означает, что URL уже относятся к файлу без записи. Это логический тип.

globalVars — вставляет список глобальных переменных в код. Переменная типа string должна быть включена в кавычки

modifyVars — В отличие от опции глобальной переменной. Он перемещает объявление в конец вашего меньшего файла.

rootpath — устанавливает пути в начале каждого ресурса URL.

useFileCache — использует кеш файла сессии. Кэш в меньшем количестве файлов используется для вызова modifyVars, где все меньше файлов не будут извлечены снова.

LESS — поддержка браузера

LESS кросс-браузер дружественный. Он поддерживает современные браузеры, такие как Google Chrome, Mozilla Firefox, Safari и Internet Explorer, и позволяет повторно использовать элементы CSS и писать код LESS с той же семантикой. Вы должны быть осторожны с влиянием на производительность при использовании LESS на стороне клиента и при отображении JavaScript, чтобы избежать косметических проблем, таких как

• Орфографические ошибки,
• Изменения цвета,
• Текстура
• Посмотрите
• Ссылки и т. Д.

Скомпилируйте файлы LESS на стороне сервера, чтобы повысить уровень производительности веб-сайта.

PhantomJS не реализует функцию Function.prototype.bind , поэтому для запуска под PhantomJS необходимо использовать движок es5 shim JavaScript. Пользователи могут вносить изменения в переменные, чтобы повлиять на тему, и отображать их в режиме реального времени, используя LESS на стороне клиента в процессе производства.

Если вы хотите запустить LESS в старых браузерах, используйте движок es-5 shim JavaScript, который добавляет функции JavaScript, которые поддерживает LESS. Вы можете использовать атрибуты скрипта или теги ссылки, используя JSON.parse, который должен поддерживаться браузером.

LESS — Плагины

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

Командная строка

Чтобы установить плагин с помощью командной строки, сначала нужно установить плагин lessc. Плагин можно установить с помощью less-plugin в начале. Следующая командная строка поможет вам установить плагин clean-css —

npm install less-plugin-clean-css

Напрямую вы можете использовать установленный плагин, используя следующую команду —

lessc --plugin = path_to_plugin = options

Использование плагина в коде

В Node требуется плагин, и он передается в массиве в качестве дополнительного плагина для менее.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

В браузере

Перед сценарием less.js автор плагина должен включить файл javascript на страницу.

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

<script>
less = {
   plugins: [plugin]
};
</script>

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

Список меньше плагинов

В следующей таблице перечислены плагины, доступные в LESS.

Постпроцессор / Дополнительные плагины

Он используется для добавления префиксов в CSS после перевода из LESS.

Это помогает улучшить обслуживание вашей таблицы стилей.

Это минимизирует вывод CSS из LESS.

Он сжимает или минимизирует вывод CSS из LESS.

Он используется для генерации CSS слева направо (LTR) или справа налево (RTL).

Он пишет функцию МЕНЬШЕ в самом МЕНЬШЕ.

Он используется для импорта нескольких файлов.

Это делает пост-обработку для Меньше.

Автоматически преобразует URL в данные URI.

Он импортирует из пакета npm меньше.

Используется для постобработки Меньше.

МЕНЬШЕЕ меняется с ltr (слева направо) на rtl (справа налево).

Импортеры рамок / библиотек

Загрузочный код LESS импортируется перед пользовательским кодом LESS.

Файлы LESS импортируются из пакетов Bower.

Перед пользовательским LESS-кодом импортируется LESS-код для Cardinal.

Чаще всего импортируется Framework или импортер библиотек.

Это импортирует Гибкую Систему Сетки.

Импортирует ионную структуру.

Он импортирует миксины Lesshat.

Это импортирует скелет меньше кода.

Библиотеки функций

Он используется для поиска более контрастных цветов.

Используя значение гамма-коррекции 1, функция cubehelix может возвращать цвет между двумя цветами.

Это перечисляет библиотеку функций манипуляции.

Для авторов плагинов

МЕНЬШЕ позволяют автору объединяться с меньшим.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

• pluginManager предоставляет держатель, который может добавлять файловые менеджеры, почтовые процессоры или посетителей.

• Функция setOptions передает строку.

• Функция printUsage используется для объяснения параметров.

pluginManager предоставляет держатель, который может добавлять файловые менеджеры, почтовые процессоры или посетителей.

Функция setOptions передает строку.

Функция printUsage используется для объяснения параметров.

LESS — Программное использование

Основной смысл программного использования в LESS — функция less.render. Эта функция использует следующий формат в LESS —

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

функция также может быть записана следующим образом —

less.render(css, options, function(error, output) {})

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

Опция sourceMap позволяет установить параметры исходной карты , такие как sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles и sourceMapFileInline . Здесь необходимо учесть, что опция sourceMap недоступна для less.js.

Вы можете получить доступ к журналу, добавив прослушиватель, как показано в следующем формате —

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

Вышеуказанные функции являются необязательными. Если отображается ошибка, она передается в обратный вызов или обещание, присутствующее в less.render .

LESS — Интернет-компиляторы

В этой главе мы поймем важность онлайн-компиляторов в LESS. Онлайн-компиляторы используются для компиляции меньшего кода в код CSS. Инструменты онлайн-компиляторов легко помогают генерировать код CSS. Ниже приведены доступные онлайн меньше компиляторов —

• winless.org/online-less-compiler

• lesstester.com

• dopefly.com/less-converte

• lessphp.gpeasy.com/demo

• leafo.net/lessphp/editor

• estFiddle

winless.org/online-less-compiler

lesstester.com

dopefly.com/less-converte

lessphp.gpeasy.com/demo

leafo.net/lessphp/editor

estFiddle

Интернет-IDE / игровые площадки с меньшей поддержкой

Ниже приведены доступные в Интернете веб-среды с меньшей поддержкой.

Это место, где вы можете легко создавать тестовые сценарии, включающие код HTML, CSS, JS.

CodePen

Это игровая площадка для веб-интерфейса.

Это место, где вы можете добавить существующий код в среде.

Это помогает JavaScript и CSS-код.

Это онлайн веб-редактор.

МЕНЬШЕ — GUI

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

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

Он поддерживает на всех платформах, таких как Windows, Mac и Linux . Он предоставляет редактор со встроенной компиляцией.

Смесь

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

Это минималистичный LESS-компилятор. Он обеспечивает функциональность перетаскивания и компиляции. SimpLESS поддерживает префикс вашего CSS с помощью префикса, который является уникальной особенностью SimpLESS. Он построен на платформе Titanium.

Он используется для компиляции LESS, SASS и CoffeeScript. Он предоставляет такие функции, как поддержка уведомлений об ошибках компиляции и поддержка опций компиляции.

В следующей таблице перечислены компиляторы GUI, которые поддерживают платформу Windows.

Это инструмент, который собирает LESS, SASS, Compass, Stylus, Jade и многие другие.

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

В следующей таблице перечислены компиляторы GUI, которые поддерживают платформу OS X.

Он является наследником LESS.app и поддерживает LESS среди многих других языков обработки, таких как SASS, Jade, Markdown и других.

Он редактирует CSS и мгновенно меняет изображения. SASS, LESS, CoffeeScript и другие работают хорошо.

В следующей таблице перечислены компиляторы GUI, которые поддерживают платформу OS X.

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

LESS — Редакторы и плагины

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

Давайте теперь обсудим редакторов и IDE для LESS.

Он поддерживает кроссплатформенности, такие как Windows, Mac и Linux . Он предоставляет редактор со встроенной компиляцией.

Он обеспечивает редактирование CoffeeScript, SASS, Compass и LESS и облегчает современную веб-разработку в Visual Studio.

Это IDE с открытым исходным кодом на основе Java. Это помогает в быстрой разработке ваших настольных, мобильных и веб-приложений, а также приложений HTML5, использующих HTML, JavaScript и CSS.

Это графический графический редактор общего назначения для Mac OS X. Он содержит декларативные настройки, записываемые макросы, фрагменты, интеграцию с оболочкой, вкладки открытых документов и расширяемую систему связок.

Пакет vim добавляет функции, такие как отступ, выделение и автозаполнение для языка динамических таблиц стилей LESS.

Он содержит модель less-css, которая обеспечивает режим Emacs для LESS CSS (lesscss.org); Emacs поддерживает компиляцию при сохранении.

WebStrom — это легкая и мощная среда разработки. Он отлично оснащен для сложной клиентской и серверной разработки с Node.js. PhpStorm — это PHP IDE, которая поддерживает глубокое понимание кода и предоставляет первоклассную помощь в написании кода и поддержку всех основных инструментов и сред.

Это легкий, мощный и редактор с открытым исходным кодом, который помогает веб-дизайнерам и разработчикам приложений.

Это портативная интегрированная среда разработки (IDE), в основном для PHP. Он также поддерживает разработку HTML, CSS и JavaScript, а плагины доступны для Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii и CakePHP.

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

Это открытая и легко настраиваемая среда разработки. Он использует CodeMirror.net, pty.js и другие библиотеки.

Это современный веб-редактор для HTML5, CSS3, JavaScript и многого другого. С его помощью вы можете редактировать, просматривать, проверять публикацию и управлять проектами из современного редактора, соответствующего стандартам.

Возвышенный текст 2 и 3

Возвышенный текст предоставляет различные опции для МЕНЬШЕГО, как указано в следующей таблице —

Синтаксис LESS для возвышенного текста обеспечивает подсветку синтаксиса для файлов .less , а также фрагменты.

Sublime text 2 и 3 плагин для компиляции .less файлов в CSS при сохранении. Требуется установка lessc в PATH.

Система сборки LESS для возвышенного текста 2, которая предоставляет две системы сборки для файлов LESS, как минимизированные, так и не минимизированные.

SublimeOnSaveBuild

Это простой плагин для возвышенного текста 2, который запускает сборку при нажатии кнопки «Сохранить». Хорошо работает с препроцессорами, такими как LESS, Compass и любыми другими.

Затмение

Eclipse имеет два плагина для LESS, как указано в следующей таблице:

Расширяя Eclipse IDE, этот плагин предоставляет полезные функции для редактирования и компиляции таблиц стилей LESS.

Этот плагин Eclipse автоматически переносит ваши файлы, такие как LESS, SASS, CoffeeScript и т. Д.

Visual Studio

Visual Studio имеет следующие различные параметры для LESS —

Это расширение делает файлы LESS открытыми с помощью языкового сервиса CSS.

Это расширение позволяет гораздо проще выполнять общие задачи и добавляет полезные функции в Visual Studio для веб-разработчиков.

Он расширяет Visual Studio множеством новых функций, которые не относятся к конкретному языку или редактору.

Это поможет вам в задачах разработки, связанных с ASP.NET

Dreamweaver

При работе с Dreamweaver необходимо учитывать следующие моменты.

• Это приложение Adobe, используемое веб-дизайнерами и разработчиками для создания приложений и веб-сайтов.

• Он способен работать на нескольких платформах, включая браузеры, устройства и планшеты.

• Веб-дизайнеры используют Dreamweaver для создания прототипов веб-сайтов.

• DMXzone Less CSS Compiler делает все МЕНЬШЕ CSS-возможностей прямо в Dreamweaver.

Это приложение Adobe, используемое веб-дизайнерами и разработчиками для создания приложений и веб-сайтов.

Веб-дизайнеры используют Dreamweaver для создания прототипов веб-сайтов.

DMXzone Less CSS Compiler делает все МЕНЬШЕ CSS-возможностей прямо в Dreamweaver.

Блокнот ++ 6.x

Следующие пункты необходимо учитывать при работе на Notepad ++ .

• Notepad ++ — это бесплатный текстовый редактор и редактор исходного кода, который поддерживает редактирование с вкладками, т. Е. Работает с несколькими открытыми файлами в одном окне.

• LESS for Notepad ++ — это XML-файл, который обеспечивает подсветку синтаксиса или раскраску для файлов .less. Чтобы получить больше информации, нажмите на эту ссылку .

• Чтобы установить Notepad ++, нажмите на эту ссылку .

Notepad ++ — это бесплатный текстовый редактор и редактор исходного кода, который поддерживает редактирование с вкладками, т. Е. Работает с несколькими открытыми файлами в одном окне.

LESS for Notepad ++ — это XML-файл, который обеспечивает подсветку синтаксиса или раскраску для файлов .less. Чтобы получить больше информации, нажмите на эту ссылку .

Чтобы установить Notepad ++, нажмите на эту ссылку .

LESS — сторонние компиляторы

Node.js Компиляторы

Ниже приведены компиляторы Node.js, используемые для LESS.

Грунт-вно менее

Grunt — это организатор задач Node. Он будет компилировать ваши таблицы стилей каждый раз, когда вы вносите изменения в ваши файлы LESS.

собрать меньше

assembly-less — мощный плагин grunt для компиляции файла LESS в CSS. Задача less позволяет использовать шаблон JSON и Lo — dash (подчеркивание) для определения пакетов LESS, компонентов пользовательского интерфейса, сжатых таблиц стилей или тем.

глоток меньше

Это меньше плагин для Gulp. gulp-minify-css используется для минимизации вашего CSS. gulp-sourcemaps используется для генерации библиотеки sourcemaps.

RECESS

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

autoless

Это .less файл наблюдатель. Он содержит отслеживание зависимостей и кроссплатформенное уведомление.

Подключите Middleware для Less.js

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

Другие Технологии

Ниже приведены несколько других технологий, которые помогут вам скомпилировать код LESS.

Wro4j Runner CLI

Вы можете скачать 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 Script Host

Ниже приведен компилятор командной строки, который будет работать в Windows.

cscript //nologo lessc.wsf input.less [output.css] [-compress]

ИЛИ ЖЕ

lessc input.less [output.css] [-compress]

Вы можете посетить следующую ссылку, чтобы узнать больше о Less.js для Windows

без точки

Ниже приведен компилятор командной строки для запуска без точек для Windows.

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

Вы можете посетить следующую ссылку, чтобы узнать больше о без точек

LESS — Каркасы

Пользовательский интерфейс / Тематические рамки и компоненты

LESS поддерживает некоторые из интерфейсов UI / Theme, перечисленных в следующей таблице:

Это плоская тема Bootstrap 3, которая обеспечивает мощные средства управления цветовой схемой.

Это фреймворк с открытым исходным кодом, основанный на Bootstrap.

Это PHP-фреймворк на основе плоских файлов CMS

Это мощный мобильный первый интерфейс для быстрой и простой веб-разработки.

Это обеспечивает легкий доступ для веб-разработки.

Это тема с открытым исходным кодом, которая предоставляет бесплатные темы для Bootstrap.

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

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

Он основан на Bootstrap 3, который содержит базовые и сложные компоненты и обеспечивает дизайн темы для Bootstrap.

Это оболочка внешнего интерфейса, содержащая набор инструментов для создания виджетов.

InContent

Он определяет описание изображения с использованием CSS3 и SASS / LESS.

Это создает адаптивные веб-интерфейсы.

Это мощный фреймворк, используемый для создания дочерних тем для WordPress и используемый в качестве автономного конструктора сайтов.

Он используется для разработки проектов HTML / CSS с использованием адаптивных и расширяемых таблиц стилей.

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

Это оболочка внешнего интерфейса, используемая для создания стиля Windows Metro в проектах.

Это CSS-фреймворк, который использует LESS.

Это интерфейс CSS, который использует LESS.

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

Это инфраструктура пользовательского интерфейса, которая создает адаптивные макеты с использованием HTML.

Это оболочка внешнего интерфейса, включающая компоненты HTML, CSS и JS, а также простая в использовании и разработке веб-приложений.

ngBoilerplate

Это основанная на grunt система сборки, используемая для проектов AngularJS.

Это динамический язык таблиц стилей, который использует Less.js для проектов Rails.

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

Grid Systems

LESS поддерживает каркасные системы, как указано в следующей таблице —

Это CSS-фреймворк, который гибко создает веб-проекты.

Это адаптивная сеточная система для разработки веб-приложений.

Это легкая адаптивная сеточная система на основе препроцессора LESS.

Это сеточная система для адаптивного дизайна.

Он используется для решения проблемы округления субпикселей.

Это библиотека LESS, используемая для выравнивания, сетки и модульных шкал.

Это настраиваемая и автономная сеточная система.

Это легкая сеточная система, используемая для создания адаптивного веб-дизайна для сайтов.

Это стандартный дистрибутив веб-браузера для его операционной системы.

Mixin библиотеки

LESS предоставляет смешанные библиотеки, как указано в следующей таблице:

Он предоставляет новейшие функции CSS3 для препроцессора LESS.

Это библиотека для анимации браузера, используемая в проектах.

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

Он преобразует css3please.com в LESS mixins, и элемент получит мгновенные изменения при запуске CSS.

Он предоставляет эффекты в стиле CSS, написанные как LESS mixins.

Это библиотека mixin, которая поддерживает LESS, SASS и Stylus.

Это трехмерный анимированный куб, созданный с использованием только CSS.

Это библиотека, которая предоставляет миксины и функции для выполнения действий с файлами LESS.

Он основан на LESS, что позволяет писать код LESS более эффективно.

Это создает шестиугольники CSS с размером и цветом.

Это библиотека mixin, которая содержит полезные функции для Less.js.

МЕНЬШЕ элементов

Это коллекция миксинов для препроцессора LESS.

Это библиотека mixin, которая помогает в экспорте CSS для всех браузеров и создает количество теней, градиентов, анимаций и т. Д.

Это набор тестов, который написан на LESS.

Это коллекция миксов LESS, которая обеспечивает двунаправленное моделирование без дублирования кода.

LESS-Mix

Это библиотека mixin, написанная на LESS.

Он используется для создания медиазапросов, что позволяет Internet Explorer 8 и ниже версий получать доступ к контенту.

Он предоставляет переменные для управления цветом при разработке веб-приложений.

Это библиотека, которая позволяет писать CSS-код для кросс-браузерной совместимости.

Это комбинация Compass и Twitter Bootstrap, которая предоставляет LESS больше, используя CSS3 и кросс-браузерные миксины.

Он предоставляет мощные миксины для less.js.

Он обеспечивает нормализованный CSS с использованием LESS.

Это коллекция миксинов, которая ускоряет процесс разработки веб-приложения.

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

Это МЕНЬШАЯ библиотека миксинов.

Он предоставляет несколько миксов для определения различных форм для приложения.