В этой статье вы прочитаете об основах работы с Less.js и о том как его установить, поэтому если вы им интересуетесь, то обязательно прочитайте статью.
Также если вы выбираете между LESS и SASS то посмотрите эту статью
SASS или LESS что лучше начать учить.
Что такое Less:
LESS это препроцессор CSS, который упрощал работу со стилями, но это он был раньше, сейчас он превратился скорее JavaScript Библиотеку для работы с CSS, поэтому сейчас называется LESS.JS.
Более подробно о его истории и что это такое прочитает в Википедии.
LESS.js как скачать:
Теперь перейдём к установки, для этого у вас должен быть установлен Node.js, так как устанавливать его на через NPM.
Как установить Node.js узнаете из этик статей.
Вот установка через npm.
1 | npm install -g less |
Вот результат.
У меня всё установилась, у вас тоже должно быть что типа этого.
Компиляция из LESS в CSS:
Это сделать будит очень просто, для этого сделаем два файла, с расширением Less и CSS, суть работы, что при компиляции данные будут вводится в CSS файл, а сам файл подключен к странице на которой будут видны изменения.
Мы создадим в HTML файле не большое сообщение c классом «toastMessage», но он не будет похож на полно ценное сообщение, это мы изменим с помощью LESS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .displayAt(@position) when (@position = top) { top: 0; } .displayAt(@position) when (@position = bottom) { bottom: 0; } .displayAt(@position) when (@position = left) { left: 0; } .displayAt(@position) when (@position = right) { right: 0; } .toastMessage { .displayAt(bottom); .displayAt(right); } .toastMessage { width: 200px; position: absolute; background: #BBF5BB; color: #478342; border: 1px solid #99C995; border-radius: 6px; box-shadow: 0 6px 12px rgba(0,0,0,0.17); padding: 10px; margin: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } |
Рассказывать что, к чему я не буду, так как, это обычный CSS с добавками и это не урок а просто старт работы.
Теперь компилируем его для нашего CSS, вот как это делается.
1 | lessc style.less style.css |
Первый параметр, это какой less файл компилировать, а второй, это какой файл выводит компиляцию, вот что появилось в CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .toastMessage { bottom: 0; right: 0; } .toastMessage { width: 200px; position: absolute; background: #BBF5BB; color: #478342; border: 1px solid #99C995; border-radius: 6px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.17); padding: 10px; margin: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; } |
Вот результат сообщения.
Для того того чтобы подключить на сайт Less, нужно подключить во ваш HTML файл два файла, один CSS и JS.
Если вам что то не понятно, то посмотрите наш учебник про CSS.
Вывод о Less.js:
В этой статье вы прочитали о работе что такое less и как с ним работать, если вас он заинтересовал, то переходите на полную документацию.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...