Обзор и старт работы с Less.JS

Метки: / / /

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

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

Что такое Less:

LESS это препроцессор CSS, который упрощал работу со стилями, но это он был раньше, сейчас он превратился скорее JavaScript Библиотеку для работы с CSS, поэтому сейчас называется LESS.JS.

Более подробно о его истории и что это такое прочитает в Википедии.

LESS.js как скачать:

Теперь перейдём к установки, для этого у вас должен быть установлен Node.js, так как устанавливать его на через NPM.

Как установить Node.js узнаете из этик статей.

Вот установка через npm.

Вот результат.

Установка Less.js

У меня всё установилась, у вас тоже должно быть что типа этого.

Компиляция из LESS в CSS:

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

Мы создадим в HTML файле не большое сообщение c классом «toastMessage», но он не будет похож на полно ценное сообщение, это мы изменим с помощью LESS.

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

Теперь компилируем его для нашего CSS, вот как это делается.

Первый параметр, это какой less файл компилировать, а второй, это какой файл выводит компиляцию, вот что появилось в CSS.

Вот результат сообщения.

Результат работе с LESS

Для того того чтобы подключить на сайт Less, нужно подключить во ваш HTML файл два файла, один CSS и JS.

Если вам что то не понятно, то посмотрите наш учебник про CSS.

Вывод о Less.js:

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

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: