EN
Оставить заявку

Интерпретатор Less. Достоинства и недостатки

Интерпретатор Less. Достоинства и недостатки

Сегодня поговорим о {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)

Обычно создаются селекторы с наследованием именами дочерних элементов , постоянно приходится писать одно и то же, и копировать одни и те же селекторы… Согласитесь на это уходит много времени. 
Допусти у нас есть структура

less1

Как это выглядит при использовании less-a:

less2

5) Удобство работы с цветом, рассмотрим на примере:

  @variable:#ccc; lighten(@variable, 50%); // вернет цвет, который на 50% светлее darken(@variable, 50%); // вернет цвет, который на 50% темнее  

Использование этих функций, по моему очевидно.

Есть еще много возможностей данного интерпретатора, которые можно посмотреть на официальном сайте данного продукта

А теперь все за и против…

+ Можно использовать на стороне клиента,  для этого необходимо подключить всего лишь один js файл 
- Когда less подключен на стороне клиента, при разработке, это доставляет немало неудобств, так как результат кэшируеться и это замедляет работу, а иногда и сбивает с толку

+ Less на много проще чем другие известные интерпретаторы 
- Отсутствует if/for и другие.

+ В Less можно встраивать JS (‘Это отдельная тема о которой мы расскажем позже’)

+ Можно встраивать классы и удобно мешать стили

+ В любом случае облегчает работу , большая гибкость,которой в сss очень не хватает

- для обработки на серверной стороне , нужно ставить дополнительные модули

И помните не нужно вкладывать все ваши правила стилей в один «Каскад».. так как замечательный код less на выходе превратится в не читаемый сss c селекторами в несколько строк строк

Интерпретатор Less. Достоинства и недостатки 4.91/5 1099
Контакты
Украина
0 800 330 690
бесплатно по Украине с любого номера
Киев, ул. Вадима Гетьмана, 1Б
Харьков, ул. Отакара Яроша, 18
Нью-Йорк
Москва
 
ОБСУДИТЬ ПРОЕКТ
Крутые проекты начинаются с заполнения этой формы
Success
Заявка успешно отправлена
Спасибо, что обратились в Art Lemon.
Обращения обрабатываются с 10:00 до 18:00 по будням. Заявки, полученные в выходные, обрабатываются в первой половине следующего рабочего дня.
Переверните устройство