LESS (язык стилей)

Материал из Национальной библиотеки им. Н. Э. Баумана
Последнее изменение этой страницы: 01:21, 22 мая 2016.
LESS
LESS Logo.svg.png
Спроектировано Alexis Sellier
Разработчики Alexis Sellier, Дмитрий Фадеев
Первый   появившийся 2009
Стабильная версия 2.5.1 / 21 мая 2015
Печать дисциплины динамическая
OS Кроссплатформенный
Лицензия Apache License 2
Портал: http://lesscss.org/
Под влиянием
CSS, Sass
Влияние
Sass, Less Fraemwork

LESS — это динамический язык стилей, который разработал Alexis Sellier, созданый под влиянием языка стилей Sass, и оказавший влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS. Это продукт с открытым исходным кодом. Первоначально был написан на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript. Less — это вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой. Он обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции, и может работать на стороне клиента (Internet Explorer 6+, WebKit, Firefox) или на стороне сервера под управлением Node.js или Rhino.

Как использовать LESS

Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript или скомпилировать его заранее и использовать получившийся CSS файл.

Используем LESS и Javascript файл

Для начала нужно скачать с official LESS Javascript файл и привязать его к страничке как любой другой js скрипт. 

<script src="less.js" type="text/javascript">

Затем создать файл с расширением .less и привять его с помощью такого кода: 

<link rel="stylesheet/less" type="text/css" href="style.less">

Удостоверьтесь, что LESS файл прикреплен перед JS.Теперь LESS файл будет работать также как и обычный CSS.

Компилируем LESS файл

Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака.

Укрощаем мощь LESS

Рассмотрим LESS код. Его очень легко читать и понимать, поскольку LESS обеспечивает расширения для CSS: переменные, вложенные блоки, примеси(mixins), функции и операторы.

Переменные

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

@header-font: Georgia;

h1, h2, h3, h4 {
  font-family: @header-font;
}
.large {
  font-family:@header-font;
}

В примере выше объявляется переменная @header-font и записывается туда значение «Georgia». Теперь можно использовать эту переменную всегда, когда надо установить шрифт Georgia. Если же надо будет изменить шрифт, то просто следует изменить значение переменной.

С LESS мы можем модифицировать и одновременно документировать наш рабочий процесс. 

/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc;
@color-black_dark: #333333;
@color-black_medium: #454545;

body {
  background: @color-black_dark;
  color: @color-black_medium;
}
a {
  color:@color-orange;
}
h1, h2, h3, h4, h5, h6 {
  color: @color-black_dark;
}

Область видимости переменных

Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.

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

a {
  @color: #ff9900;
  color:@color<nowiki>;</nowiki>
}
button {
  background: @color;
}

В этом примере LESS не будет сконвертирован из-за ошибки, @color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально. 

@color: #222222;

a {
  @color: #ffffff;
  color:@color;
}
button {
  background: @color;
}

Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.

Переменные в переменных

Если вы писали на PHP, то знаете, что можно объявить имя переменной в другой переменной. 

@color-chirstmas_red: #941f1f;
@name-of-color: "color-chirstmas_red";
@color: @name-of-color;

Вложенность

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

article.post p{
  margin: 0 0 12px 0;
}

Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.В LESS можно вложить эти правила, что даст более короткую и логичную версию стилей. Например: 

article.post {
  p{
    margin: 0 0 12px 0;
  }
  a {
    color: red;
  }
  a:hover {
    color: blue;
  }
  img {
    float:left;
  }
}

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

a {
  color:red;
}
p {
  margin:0px;
}
article {
  a {
    color: green;
  }
  p {
    color: #555
    a {
        color:blue;
    }
  }
}

Примеси (mixins)

Примеси в LESS избавят от набора излишнего кода. Пример создания закругленной рамки, в которой только верхние углы скруглены: 

.tab {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

И так каждый раз…. С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис. 

.rounded_top {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top;
}
.submit {
  .rounded_top;
}

В вышеприведенном коде определяем элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите .tab), мы по существу импортируем правила, которые создали для него. Благодаря такому синтаксису можем использовать любой элемент в качестве примеси. 

.rounded_top {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top;
}
.submit {
  .tab;
  background: red;
}

Стили у элемента .submit — это скругленные углы наверху, белый цвет и красный фон (background переопределен).

Примеси с параметрами

Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как можно определить элемент с радиусом в 6px на верхних углах. А если захочется создать элемент с радиусом в 3px? Надо объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, надо использовать примеси с параметрами! Они сходны с функциями, потому что при их вызове можно менять значения. Перепишем пример с border-radius, чтобы посмотреть, как это работает. 

.rounded_top(@radius) {
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top(6px);
}
.submit {
  .rounded_top(3px);
}

В вышеприведенном коде радиус у .tab равен 6px, а .submit элемент получит значение 3px.

Стандартные значения

Если обычно используется одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение. 

.rounded_top(@radius:6px) {
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  -moz-border-radius-topleft: @radius;
  -moz-border-radius-topright: @radius;
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
}
.tab {
  background: #333;
  color: #fff;
  .rounded_top;
}
.submit {
  .rounded_top(3px);
}

В этом примере .tab получит стандартное значение в 6px, а .submit – 3px.

Множественные параметры

Вы также можете использовать множественные параметры, чтобы определить более сложные примеси. 

.radius(@radius:6px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.button(@radius:3px, @background: #e7ba64, @padding: 4px) {
  .radius(@radius);
  background:@background;
  border: 1px solid @background - #222;
  padding: @padding;
}
.read_more {
  .button(0px);
}

В этом примере класс .read_more отформатирован с отступом 4px, фоновым цветом #e7ba64 и с border-radius рывным 0px.

Использование всех аргументов за раз

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

div {
  border:1px solid #bbb;
}

Чтобы задать всем необходимым элементам серую границу, можно использовать такую функцию: 

.gray_border(@width: 1px, @type: solid, @color: #bbb){
  border:@arguments;
}
div {
  .gray_border(2px, dashed);
}

@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет: 

div {
  border:2px dashed #bbb;
}

Функции и операции.

Можно оперировать значениями или переменными: складывая их, вычитая или умножая. В каких случаях это может пригодиться? Например, при использовании левого фиксированного меню. 

@leftMenuWidth: 100px;

.leftMenu {
  width: @leftMenuWidth;
  height: 100%;
  position: fixed;
}
.content {
  margin-left: @leftMenuWidth + 20;
}

Таким образом, отступ у блока с классом "content" будет равен "ширина меню + 20px".

Более популярный пример это операции с цветом. В некоторых случаях может понадобится сделать цвет фона или текста темнее или светлее (например, при наведении). Этого можно добиться путем сложения или вычитания цветов: 

@exampleColor: #9b59b6;

.example {
  // увеличиваем значение HEX на 1
  // получаем более светлый оттенок
  color: @exampleColor + #111;
  &amp;:hover {
    // уменьшаем значение HEX на 1
    // получаем более темный оттенок
    color: @exampleColor - #111;
  }
}

Или с использованием встроенных в LESS функций: 

@exampleColor: #9b59b6;

.example {
  // осветляем цвет на 10%
  color: lighten(@exampleColor, 10%);
  &amp;:hover {
    // затемняем цвет на 10%
    color: darken(@exampleColor, 20%);
  }
}

Для цветов есть также функции saturate, desaturate, spin и др. С полным списком функций и способами применения можно ознакомиться на оффициальном сайте LESS.

Строковая интерполяция

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

@url: "http://mycompany.com/assets/";
background-image: url("@{url}/sprite.png");

Это может быть полезно при создании централизованного фреймворка.

Экранирование

Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого: 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');

Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его. 

.button {
  background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
  background: -moz-linear-gradient(top, #666666, @color - #444444);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";
}

Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.

Импорт

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

@import "reset.min.css";
@import "framework.less";
@import "widgets";

Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.

Комметарии

Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша. 

/*
  This is my main LESS file.
  It governs how most of the site looks.
*/
body {
  padding:0px; // This resets the body padding
}

Ссылки

Источник — «https://ru.bmstu.wiki/index.php?title=LESS_(язык_стилей)&oldid=38049»