Less (мова стилів)

Less (іноді стилізується як LESS) — це динамічна мова стилів, яка інтерпретується в каскадні таблиці стилів (CSS). Спроектована Алексісом Селлієром. Створена під впливом мови стилів Sass, і в свою чергу вплинула на новий синтаксис Sass «SCSS», в якій також використаний синтаксис, який є розширенням CSS.[2]

Less
Дата появи 2009
Творці Алексіс Селлієр
Розробник Алексіс Селлієр, Дмитро Фадєєв
Останній реліз 2.7.2[1] (4 січня 2017 (2017-01-04))
Система типізації Динамічна
Під впливом від каскадні таблиці стилів і Sass
Операційна система Крос-платформова
Ліцензія Apache License 2
Звичайні розширення файлів .less
Репозиторій вихідного коду github.com/less/less.js
Вебсайт lesscss.org

Less — це продукт з відкритим сирцевим кодом. Його перша версія була написана на Ruby, однак у наступних версіях було вирішено відмовитися від використання цієї мови програмування на користь JavaScript. Less це вкладена метамова: валідний CSS буде валідною less-програмою з аналогічною семантикою.

Less забезпечує такі розширення CSS: змінні, вкладені правила, міксини, оператори та функції.[3]

Less може працювати на стороні клієнта (Internet Explorer 6+, WebKit, Firefox) або на стороні сервера під керуванням Node.js або Rhino.[3]

Змінні

Less дозволяє визначати змінні. Змінні починаються зі знака (@). Присвоєння значень змінних здійснюється за допомогою двокрапки (:).

Less підтримує чотири типи даних:

Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.[3]

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

Наведений вище Less код буде скомпільовано в CSS код:

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

Вкладені правила

Одна з ключових особливостей Less — вкладені правила, які полегшують процес створення і редагування вкладених селекторів.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

Наведений вище Less код буде скомпільовано в CSS код:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}

Домішки (міксини)

Для уникнення постійних повторень однакових правил CSS, в Less введені домішки. Домішки (міксини) дозволяють вбудовувати всі властивості класу в інший клас за рахунок включення імені класу як одної зі своїх властивостей, таким чином, вони ведуть себе як свого роду константи або змінні. Вони також можуть вести себе як функції, і приймати аргументи. [3]

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

Наведений вище Less код буде скомпільовано в CSS код:

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

Less має спеціальний тип набору правил — параметричні домішки(міксини), що можуть бути змішані подібно до класів, але приймають параметри.

Функції та операції

Less дозволяє виконувати операції та функції. До дозволених операцій входять додавання, віднімання, ділення і множення значень властивостей і кольору, які можуть бути використані для створення складних взаємозв'язків між властивостями.

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Наведений вище Less код буде скомпільовано в CSS код:

#header {
  color: #333333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Примітки
  1. CHANGELOG. GitHub.
  2. Sass and Less. Архів оригіналу за 21 червня 2009. Процитовано 22 січня 2013.
  3. Офіційний сайт LESS

Посилання
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.