Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

Что такое 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

В Coach View среды IBM Process Designer 8.5 взаимодействие с переменными происходит через JavaScript, который разделён на блоки. Есть основной блок и блоки, код в которых выполняется по соответствующему действию: В данной заметке опишу работу с входящим бизнес объектом (далее БО) и входящими параметрами. Подключение происходит во вкладке «Переменные», в которых можно указать только один

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

Системные файлы в Mac OS X скрыты от пользователей в целях безопасности. Это правильно, но иногда бывают ситуации, когда система принимает пользовательские файлы за системные и тоже скрывает их. Например, файл .htaccess, необходимый для настройки локального сервера, будет скрыт. Для того, чтобы показать системные файлы, необходимо выполнить в Терминале команду: defaults write com.apple.finder AppleShowAllFiles -bool

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

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

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

У Google есть хороший сервис: PageSpeed Insights, который подскажет, что необходимо оптимизировать у вас на сайте. Одним из советов является включение gzip сжатия на хостинге (или сервере), где размещается ваш сайт. Описывать, зачем нужно ускорять загрузку своего сайта, думаю, нет необходимости. Для включения gzip сжатия необходимо иметь работающий сайт на php и хостинг или сервер,

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

С выходом Android 5.0 мобильный браузер Chrome начал поддерживать метатег theme-color. Для примера сделаем верхнюю панель красной: <meta name=»theme-color» content=»red»> Мобильный браузер Firefox в Firefox OS, начиная с версии 2.1, тоже поддерживает этот метатег. С выходом альфа-версии Яндекс.Браузера появились новые возможности для манипулирования внешним видом браузера. Можно задавать свои стили для верхней и нижней панелей браузера

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

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

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

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

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

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

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

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

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

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

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

Тема давно не новая, но все все равно не могу обойти стороной такую замечательную функцию GitHub.com, как генератор статических страниц. Суть заключается в том, что создавая репозиторий на GitHub, можно разместить исходники статического сайта и показывать их как сайт. Эта функция будет полезна для тех, кому нужно где то разместить простенький сайт или сайт-визитку и

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

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

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

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

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

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

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

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

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

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