Препроцессор LESS

Оцените материал
(0 голосов)

Здравствуйте! В прошлой статье я писал о препроцессоре SASS. Сегодня я расскажу немного о другом препроцессоре - LESS. В принципе эти препроцессоры похожи но имеют несколько отличий, что связано с наименованием переменных.

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

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

 

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

Чтобы воспользоваться тем, что LESS может предложить, мы сначала должны сохранить наш CSS-код в файл с расширением .less. Использовать LESS очень просто. Он работает как на веб-сервере, так и на стороне клиента.

Очень просто можно скомпилировать файлы на less в css используя программу Koala. Для этого надо создать папку с проектом иназвать папку например Less. В папке у Вас будет файл index.html и style.less. Сохранить папку в корне диска С или D. Дело в том, что программа Koala не любит если в пути к папке встречаются кирилические символы. Следующий шаг запускаем программу Koala (о том как установить Koala я писал здесь).

Затем нажимаем на кнопку с знаком плюс, которая находится в левом верхнем углу и выбрать папку со своим проектом, в нашем случае Less.

 После этого папка с проектом будет подключена к программе Koala.

Для того чтобы скомпилировать из файла style.less файл style.css. Нужно щелкнуть мышкой в правом верхнем углу, при этом появится выдвижная панель в которой внизу нажимаем на кнопке Compile.

Вот собственно и все файл style.css добавится автоматически. В дальнейшем программа Koala будет следить за изменениями в файле style.less и автоматически вносить изменения в стилевой файл.

 

LESS Синтаксис: Переменные

Одни из вещей, которые часто повторяются в файле CSS - это цвета. Одни и те же цвета повторяются в файлах CSS для разных элементов, заголовков, ссылок и т.д.

#header { 
    background-color: #CCCCCC }
.aside { 
    background-color: #CCCCCC; 
    color: #000000;
.sidebar a {   border-bottom: 1px solid #CCCCCC; 
}

В LESS, мы можем просто объявить переменную для сохранения цвета, вот так:

@grey: #CCCCCC;

И затем повторно использовать это так:

#header { 
background-color: @grey; 
 } 
.aside { background-color: @grey; 
  color: #000000; 
} 
 .sidebar a { 
 border-bottom: 1px solid @grey; 
 }

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

LESS Синтаксис: Mixins

Переменные полезны для повторного использования отдельных значений, таких как цвет, размер шрифта. В LESS с mixins мы можем использовать набор свойств из одного или нескольких правил. Mixins могут быть использованы, например, для определения стиля границ, размер шрифта и т.д.

.border_top_bottom {
border-top: dotted 1px #000;
border-bottom: solid 2px #000; 
}

В приведенном выше коде мы определили верхнюю и нижнюю границу внутри класса border_top_bottom. Теперь, когда мы хотим добавить эти стили к другими элементами, мы можем использовать их так:

#header { 
color: #000000; 
.border_top_bottom; 
} 

.content a { 
color: #000000; 
.border_top_bottom; 
}

Приведенный выше код выведет следующее:

#header { 
color: #000000; <
border-top: dotted 1px #000000; 
border-bottom: solid 2px #000000; 
}
.content a { 
color: #000000; 
border-top: dotted 1px #000000; 
border-bottom: solid 2px #000000; 
}

Чтобы добавить больше гибкости, mixins также позволят нам передавать переменные (называемые здесь параметры). Например:

.border-radius (@radius: 5px) { 
border-radius: @radius; 
-moz-border-radius: @radius; 
-webkit-border-radius: @radius; 
}

В приведенном выше примере, мы задали параметр для радиуса. Мы также дали ему значение по умолчанию равное 5px, которое не является обязательным. Теперь мы хотим добавить это для класса button:

.button {
.border-radius(6px); 
}

Если мы уберем 6px из приведенного выше примера, границы радиуса будут заданы по умолчанию, который указан в нашем классе border-radius и равен 5px.

Синтаксис LESS: Вложенность

Одна из вещей, распространеных в CSS, это длинные селекторы, которые нам часто приходится писать для стилей дочерних элементов:

nav { }
nav li { }
nav li a { }
nav li a:hover { }
nav li a.active { }
nav li a.visited { }

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

nav {
    li {
        a {
            &:hover { }
            &:active { }
            &:visited { }
        }
    }
}

Символ "&" используется перед псевдо-классами в нашей вложенной структуре. Описанную выше конструкцию гораздо легче понять и показать иерархию именно так, как она есть.

Синтаксис LESS: Операции

LESS также позволяет нам выполнять такие операции как сложение, вычитание, умножение и деление числовых значений, цветов и переменных в таблице стилей. Допустим, мы объявили переменную padding, которая применяется ко всем нашим элементам H1. Но теперь мы хотим добавить дополнительный отступ для нашего заголовка на главной странице. Мы можем сделать это следующим образом:

@padding: 5px;
h1 {
padding: @padding;
}
h1.page-title {
padding: (@padding * 2);
}

Значение по умолчанию будет умножено на 2, что задаст заголовку на главной странице padding равный 10px. Операции должны выполняться в круглых скобках, однако они могут также работать без скобок.

Синтаксис LESS: Области

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

@var: red;
#page {
@var: white;
#header {
color: @var; // выведет white
}
   }
#footer {
color: @var; // выведет red
}

Заключение

Эта статья не охватывает все что LESS может предложить. Цель состоит в том, чтобы объяснить, как используя LESS можно помочь нам сделать наш CSS более динамичным. CSS препроцессоры позволяют нам создавать и управлять CSS более эффективно. Даже имея хорошее понимание CSS, LESS позволит нам использовать его более продуктивно.

Прочитано 1075 раз Последнее изменение Воскресенье, 18 декабря 2016 14:27
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+