Саша Бизиков

В Москве на самоизоляции

Что такое LESS и как его использовать

Для упрощения жизни верстальщика придумано достаточное количество фреймворков и надстроек. Сейчас пойдет речь об упрощении и ускорении написания стилей для сайтов. Для этого как известно используются каскадные таблицы стилей CSS.

LESS — это надстройка над CSS. LESS — это программируемый CSS. LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания и операции.

Для того, что бы начать писать стили на LESS, достаточно знаний CSS, ничего нового изучать не нужно. Поэтому порог вхождения в данный язык очень мал.

Как перейти на LESS?

Так как LESS использует синтаксис CSS, то это означает что имеющийся CSS уже является валидным LESS. Для более удобного использоваться готового CSS в LESS, можно воспользоваться онлайн сервисами конвертирования CSS в LESS:

После того, как стили сконвертированы в LESS, создаем соответствующий файл с расширением .less, например style.less.

Использование

Вариант с компиляцией на лету не рассматривал, т.к изначально увеличивается время загрузки страницы. Поэтому лучше конвертировать вручную с использованием соответствующих приложений или плагинов:

Если вы используете среду разработки IDEA, то советую использовать плагин. При потере фокуса программы less будет компилироваться в css, это очень удобно 🙂

Когда есть понимание того, как работать с LESS, можно переходить к основным возможностям языка, ради которого стоит его использовать:

Переменные

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

LESS

@color: #4D926F; 
#header { 
 color: @color; 
} 
h2 { 
 color: @color; 
}

CSS

#header { 
 color: #4D926F;
}
h2 { 
 color: #4D926F;
}

Mixins

Mixins (примешивания) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

LESS

.box-sizing(@a: border-box) { 
 box-sizing: @a; 
 -webkit-box-sizing: @a; 
 -moz-box-sizing: @a;
}
.wrapper {
 box-sizing;
}

CSS

.wrapper { 
 box-sizing: border-box; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;
}

Вложенные правила

Вместо создания длинных имен селекторов для указания наследования, в Less мы можем просто вкладывать селекторы в другие селекторы. Это делает наследование прозрачнее для понимания, а таблицы стилей — короче.

LESS

.content {
 a { 
 text-decoration: none; 
 &:hover { 
 text-decoration: underline; 
 }
 }
}

CSS

.content a { 
 text-decoration: none;
}
.content a:hover { 
 text-decoration: underline;
}

Операции

Операции позволяют увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами. Довольно удобно при задании размеров пропорциональным блокам. Например, основной части сайта и сайдбара.

LESS

@width: 960px;
.content { 
 width: @width * 2/3;}
.sidebar { 
 width: @width / 3;
}

CSS

.content { 
 width: 640px;
}
.sidebar { 
 width: 320px;
}

Вывод

Несомненно помимо LESS есть и другие надстройки над CSS, например SCSS. Лично я предпочитаю использовать LESS, за его простоту и схожесть синтаксиса. Но что точно — для быстрого написания стилей нужно использовать надстройки, которые будут беречь ваше время. Для начала советую воспользоваться LESS, так как ничего нового учить не нужно, сразу используйте дополнительные возможности.

,

Веду аудиодневник с наблюдениями на темы дизайна, саморазвития и в целом, отношения к жизни.

В третьем сезоне учусь рассказывать истории, разбираюсь в том, что такое счастье и ищу умиротворения. Когда сам не могу разобраться в теме, то зову эксперта. Подписывайтесь на подкаст, чтобы не пропустить новые выпуски.

Нет комментариев

Написать комментарий

Ещё заметки

Прошёл курс «iOS-программирование для дизайнеров»

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона. В заметке рассказываю, чему научился.

Правильный перенос сайта Вордпрес на новый домен

Рассказываю как правильно перенести сайт на WordPress на новый домен с помощью Search Replace DB.

Перенос записей в WordPress

В заметке рассмотрим как перенести большое количество записей в формате CSV на WordPress. Решение подойдёт даже для случая больше 100 000 записей.

Двухфакторная аутентификация в WordPress

Если у вас есть сайт или блог на WordPress, то его можно обезопасить от взлома. Один из таких способов повышения безопасности сайта — настройка двухфакторной аутентификации.

Что выбрать: Jekyll или WordPress?

Целый год мой блог работал на Jekyll и размещался на GitHub. Месяц назад вернулся обратно к WordPress и в заметке расскажу почему.

IBM Process Designer 8.5: чтение и запись данных в Coach View

Показать скрытые файлы в Mac OS X

Как перевести тему WordPress на русский язык

В большинстве тем для WordPress присутствует папка languages, которая позволяет перевести на необходимый язык весь её интерфейс. Перевод заключается в редактировании .po-файла. В заметке рассказываю как перевести тему WordPress на русский язык.

Оптимизация сайта: включаем gzip-сжатие

Меняем фон верхней панели браузера

Страница в Sharepoint 2013 c областями для веб-частей

Мне тут по работе довелось верстать под Sharepoint 2013. Многие вещи оказались для меня далеко не тривиальными. Поэтому свой опыт хочу задокументировать в виде статьи, где опишу процесс создания .aspx-страницы с зонами для вставки веб-частей.

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin.

Система сеток с использованием LESS

В этой заметке пойдет речь о примере использования LESS с целью упрощения верстки проектов.

Полезные ресурсы по Sharepoint

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

Работаем с куками через JavaScript

Рассказываю как записывать и считывать значения из куки.

Бесплатный хостинг на Гитхаб

Перенос Вордпрес на новый домен

Описываю как правильно выполнить перенос сайта на WordPress.

Установка и настройка Git

Описываю по шагам как установить Git к себе на компьютер.

Отключить топик-ссылки и фотосеты в LiveStreet

При создании сайта на CMS LiveStreet часто приходится производить много настроек. Например, иногда полезно отключить некоторые виды постов. В заметке привожу пример кода, отключающий некоторые виды постов.

Настройка виртуального сервера для работы с LiveStreet

Мне необходимо было перейти на выделенный сервер, где будет работать сайт на LiveStreet. Настраивал сервер впервые, узнал много нового. В заметке опишу основные этапы настройки.

Настройка файла .htaccess после установки LiveStreet

Решение ошибки когда главная страница работает, а при переходе на любую другую — получаю 404 ошибку.