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

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

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

Operating System - Кроссплатформенность
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Установка LESS

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

Step 1 - Нам нужно NodeJsзапускать МЕНЬШЕ примеров. Чтобы скачать NodeJs, откройте ссылкуhttps://nodejs.org/en/, вы увидите экран, как показано ниже -

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

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

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

npm install -g less

Step 4 - После успешной установки LESS в командной строке вы увидите следующие строки:

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

пример

Ниже приводится простой пример LESS.

hello.htm

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

Давайте теперь создадим файл style.less, который очень похож на CSS, с той лишь разницей, что он будет сохранен с расширением .less . Оба файла, .html и .less должны быть созданы внутри папки.nodejs.

style.less

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

h3 {
   color: @color;
}

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

lessc style.less style.css

Когда вы запустите указанную выше команду, она автоматически создаст файл style.css . Всякий раз, когда вы изменяете файл LESS, необходимо запускать указанную выше команду вcmdа затем обновится файл style.css .

Style.css файл будет иметь следующий код при запуске выше команды -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Вывод

Давайте теперь выполним следующие шаги, чтобы увидеть, как работает приведенный выше код:

Сохраните приведенный выше html-код в hello.htm файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.