Учебники

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

В этой главе мы шаг за шагом поймем, как установить 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 вы увидите следующие строки в командной строке –

 `- less@2.6.1
    + - errno@0.1.4
    |  `- prr@0.0.0
    + - graceful-fs@4.1.3
    + - image-size@0.4.0
    + - mime@1.3.4
    + - mkdirp@0.5.1
    |  `- minimist@0.0.8
    + - обещание@7.1.1
    |  `- asap@2.0.3
    + - request@2.69.0
    |  + - aws-sign2@0.6.0
    |  + - aws4@1.3.2
    |  |  `- lru-cache@4.0.0
    |  |  + - pseudomap@1.0.2
    |  |  `- yallist@2.0.0
    |  + - bl@1.0.3
    |  |  `- readable-stream@2.0.6
    |  |  + - core-util-is@1.0.2
    |  |  + --водит@2.0.1
    |  |  + - isarray@1.0.0
    |  |  + - process-nextick-args@1.0.6
    |  |  + - string_decoder@0.10.31
    |  |  `- util-deprecate@1.0.2
    |  + - caseless@0.11.0
    |  + - комбинированный поток@1.0.5
    |  |  `- delayed-stream@1.0.0
    |  + - extension@3.0.0
    |  + - forever-agent@0.6.1
    |  + - form-data@1.0.0-rc4
    |  |  `- async@1.5.2
    |  + - har-validator@2.0.6
    |  |  + - chalk@1.1.1
    |  |  |  + - ansi-styles@2.2.0
    |  |  |  |  `- color-convert@1.0.0
    |  |  |  + - escape-string-regexp@1.0.5
    |  |  |  + - has-ansi@2.0.0
    |  |  |  |  `- ansi-regex@2.0.0
    |  |  |  + - strip-ansi@3.0.1
    |  |  |  `- support-color@2.0.0
    |  |  + - commander@2.9.0
    |  |  |  `- graceful-readlink@1.0.1
    |  |  + - is-my-json-valid@2.13.1
    |  |  |  + - generate-function@2.0.0
    |  |  |  + - generate-object-property@1.2.0
    |  |  |  |  `- is-property@1.0.2
    |  |  |  + - jsonpointer@2.0.0
    |  |  |  `- xtend@4.0.1
    |  |  `- pinkie-promise@2.0.0
    |  |  `- pinkie@2.0.4
    |  + - hawk@3.1.3
    |  |  + - boom@2.10.1
    |  |  + - cryptiles@2.0.5
    |  |  + - hoek@2.16.3
    |  |  `- sntp@1.0.9
    |  + - http-signature@1.1.1
    |  |  + - assert-plus@0.2.0
    |  |  + - jsprim@1.2.2
    |  |  |  + - extsprintf@1.0.2
    |  |  |  + - json-schema@0.2.2
    |  |  |  `- verror@1.3.6
    |  |  `- sshpk@1.7.4
    |  |  + - asn1@0.2.3
    |  |  + - dashdash@1.13.0
    |  |  |  `- assert-plus@1.0.0
    |  |  + - ecc-jsbn@0.1.1
    |  |  + - jodid25519@1.0.2
    |  |  + - jsbn@0.1.0
    |  |  `- tweetnacl@0.14.1
    |  + - is-typedarray@1.0.0
    |  + - isstream@0.1.2
    |  + - json-stringify-safe@5.0.1
    |  + - mime-types@2.1.10
    |  |  `- mime-db@1.22.0
    |  + - node-uuid@1.4.7
    |  + - oauth-sign@0.8.1
    |  + - qs@6.0.2
    |  + - stringstream@0.0.5
    |  + - tough-cookie@2.2.2
    |  `- tunnel-agent@0.4.2
    `- source-map@0.5.3

пример

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

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