Сегодня поговорим о {less} , если кто не знает это интерпретатор css который можно использовать как на серверной стороне так и на стороне клиента, а так же из консоли;).
При использовании данной,технологии стает возможным:
1) использование переменных(чтобы не хранить в голове одни и те же данные,достаточно просто объявить переменную и потом использовать в любом месте каскадной таблицы стилей);
@mainColor:#F2E100; h2{ border-bottom:1px solid @mainColor; — что на выходе нам даст border:1px solid @mainColor; }
2) можно встраривать один сss класс в другой(Что очень удобно и сокращает затраченное время на написание стилей).
Допустим у нас есть класс
.title{ text-align: center; border-bottom: 1px solid @mainColor; color:#73A326; }
И если мы хотим продублировать эти же свойства в другом наборе правил то мы просто указываем этот класс в нем
h1{ font-size: 22px; .title; }
На выходе у нас получится
h1{ font-size: 22px; text-align: center; border-bottom: 1px solid #F2E100; color:#73A326; }
3) Функции и операции(Это позволяет нам манипулировать с переменными).
Тут тоже все просто
@fz: 1em; p{ font-size: @fz * 2; — что на выходе нам даст font-size: 2em; }
4) Стиль написание Less — это то, за что я уже никогда не смогу отказаться от интерператоров css)
Обычно создаются селекторы с наследованием именами дочерних элементов , постоянно приходится писать одно и то же, и копировать одни и те же селекторы… Согласитесь на это уходит много времени.
Допусти у нас есть структура
Как это выглядит при использовании less-a:
5) Удобство работы с цветом, рассмотрим на примере:
@variable:#ccc; lighten(@variable, 50%); // вернет цвет, который на 50% светлее darken(@variable, 50%); // вернет цвет, который на 50% темнее
Использование этих функций, по моему очевидно.
Есть еще много возможностей данного интерпретатора, которые можно посмотреть на официальном сайте данного продукта
А теперь все за и против…
+ Можно использовать на стороне клиента, для этого необходимо подключить всего лишь один js файл
- Когда less подключен на стороне клиента, при разработке, это доставляет немало неудобств, так как результат кэшируеться и это замедляет работу, а иногда и сбивает с толку
+ Less на много проще чем другие известные интерпретаторы
- Отсутствует if/for и другие.
+ В Less можно встраивать JS (‘Это отдельная тема о которой мы расскажем позже’)
+ Можно встраивать классы и удобно мешать стили
+ В любом случае облегчает работу , большая гибкость,которой в сss очень не хватает
- для обработки на серверной стороне , нужно ставить дополнительные модули
И помните не нужно вкладывать все ваши правила стилей в один «Каскад».. так как замечательный код less на выходе превратится в не читаемый сss c селекторами в несколько строк строк