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

Поделись знанием:
Перейти к: навигация, поиск
У этого термина существуют и другие значения, см. less (значения).
LESS
Появился в:

2009

Автор:

Alexis Sellier

Система типов:

динамическая

Испытал влияние:

CSS, Sass

Повлиял на:

Sass, Less Framework

Лицензия:

Apache License 2

Сайт:

[lesscss.org/ .org]

LESS — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS[1].

LESS — это продукт с открытым исходным кодом. Его первая версия была написана на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript. Less — это вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой.

LESS обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции[2].

LESS может работать на стороне клиента (Internet Explorer 6+, WebKit, Firefox) или на стороне сервера под управлением Node.js или Rhino[2].





Переменные

Less позволяет использовать переменные. Имя переменной предваряется символом @. В качестве знака присваивания используется двоеточие (:).

При трансляции значение переменной подставляется в результирующий CSS документ[2]. 

@color: #4D926F;

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

Данный LESS-код будет скомпилирован в следующий CSS-файл: 

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

Примеси

Примеси позволяют включать целый набор свойств из одного набора правил в другой путём включения имени класса в качестве одного из свойств другого класса. Такое поведение можно рассматривать как разновидность констант или переменных. Они также могут вести себя подобно функциям, принимая аргументы. В чистом CSS повторяющийся код должен быть повторён в нескольких местах — примеси делают код чище, понятнее и упрощают его изменение[2]. 

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

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

Данный LESS-код будет скомпилирован в следующий CSS-файл: 

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
   border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
   border-radius: 10px;
}

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

LESS даёт возможность вкладывать определения вместо либо вместе с каскадированием. Пусть, например, у нас есть такой CSS: CSS поддерживает логическое каскадирование, но один блок кода в другой вложен быть не может. Less позволяет вложить один селектор в другой. Это делает наследование более ясным и укорачивает таблицы стилей[2]. 

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

Данный LESS-код будет скомпилирован в следующий CSS-файл: 

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

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

Less позволяет использовать операции и функции. Благодаря операциям можно складывать, вычитать, делить и умножать значения свойств и цветов, что можно использовать для создания сложных отношений между свойствами. Функции один-к-одному отображаются в JavaScript код, позволяя обрабатывать значения. 

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

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

Данный LESS-код будет скомпилирован в следующий CSS-файл: 

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

Сравнение с другими препроцессорами CSS

И Sass, и LESS — это препроцессоры CSS, позволяющие писать ясный CSS с использованием программных конструкций вместо статических правил[3].

LESS вдохновлен Sass[4]. Sass был спроектирован с целью как упростить, так и расширить CSS, в первых версиях фигурные скобки были исключены из синтаксиса (этот синтаксис называется sass). LESS разработан с целью быть как можно ближе к CSS, поэтому у них идентичный синтаксис. В результате существующие CSS можно использовать в качестве LESS кода. Новые версии Sass также включают CSS-подобный синтаксис, который называется SCSS (Sassy CSS)[1].

Подробное сравнение синтаксиса см. «Sass/Less Comparison»[5].

ZUSS (ZK User-interface Style Sheet)[6] это язык стилей, основанный на идеях LESS. Он имеет аналогичный синтаксис, за исключением того, что предназначен для использования на стороне сервера вместе с языком программирования Java. Он не использует интерпретатор JavaScript (Rhino), но позволяет напрямую вызывать Java методы.

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

LESS можно использовать на сайте различными способами. Один из вариантов — подключение к веб-странице JavaScript-файла less.js для преобразования кода в CSS «на лету», средствами браузера.

Это делается, например, с помощью следующего html-кода: 

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Если вы используете серверный JavaScript: Rhino или node.js, вы можете преобразовывать .less файлы в .css на стороне сервера.

Наконец существуют сторонние реализации языка: к примеру SimpLESS open source компилятор для Windows, Linux и Mac OS X[7], .less{} — реализация для .NET framework[8] или lessphp[9], позволяющий компилировать less-стили на стороне сервера для PHP-сайтов.

Напишите отзыв о статье "LESS (язык стилей)"

Примечания

  1. ↑ 1 2 [nex-3.com/posts/83-sass-and-less Sass and Less]
  2. ↑ 1 2 3 4 5 [lesscss.org/ официальный сайт LESS]
  3. ↑ [www.codinghorror.com/blog/2010/04/whats-wrong-with-css.html What’s Wrong With CSS]
  4. ↑ [lesscss.org/about About LESS]
  5. ↑ [gist.github.com/674726 Sass/Less Comparison]
  6. ↑ [github.com/tomyeh/ZUSS ZUSS]
  7. ↑ [wearekiss.com/simpless SimpLESS — your LESS CSS compiler]
  8. ↑ [www.dotlesscss.org/ Less Css for .Net]
  9. ↑ [leafo.net/lessphp/ lessphp]: [techportal.ibuildings.com/2010/12/17/lessphp-php-implementation-of-less-css/ Robert Raszczynski. lessphp: PHP implementation of Less CSS]

Литература

  • Alex Libby. [books.google.ru/books?id=mD2RipDgLQcC Instant LESS CSS Preprocessor How-to]. — Packt Publishing (англ.)русск., 2013. — 80 p. — ISBN 9781782163770.
  • Antony Kennedy, Inayaili de Leon. Ch. 9. Dynamic CSS → LESS // [books.google.ru/books?id=fAKqKhXdvlwC Pro CSS for High Traffic Websites]. — Apress, 2011. — P. 260-279. — 432 p. — (Expert's voice in web design). — ISBN 9781430232896.
  • Jeremy Hixon. [coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/ An Introduction To LESS, And Comparison To Sass]. Smashing Magazine (англ.)русск. (9 сентября 2011). Проверено 31 марта 2012. [www.webcitation.org/67h0O7quT Архивировано из первоисточника 16 мая 2012].
  • Jeremy Foster. App. A. CSS Libraries and Resources → LESS // [books.google.ru/books?id=ouZdAlif4RwC CSS for Windows 8 App Development]. — Apress, 2013. — P. 261-265. — 312 p. — (Expert's voice in Windows 8). — ISBN 9781430249849.
  • Jennifer Niederst Robbins. Ch. 18. CSS Techniques → Sass and LESS // Learning Web Design. Fourth Edition. — O'Reilly, 2012. — P. 433. — 621 p. — ISBN 978-1-449-31927-4.
  • Daniel Pataki. [webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/ Get Into LESS: the Programmable Stylesheet Language]. tuts+ (13 декабря 2011). Проверено 31 марта 2012. [www.webcitation.org/67h0PxgH8 Архивировано из первоисточника 16 мая 2012]. + перевод [habrahabr.ru/post/136525/ LESS: программируемый язык стилей]

См. также

Ссылки

  • [lesscss.org/ Официальный сайт]
  • [github.com/cloudhead/less.js Проект LESS] на сайте GitHub


Режимы
Стандартные
CSS · DSSSL · XSL
Нестандартные
JSSS</span>ruen · FOSI</span>ruen · Qt Style Sheets · Sass · LESS · Stylus</span>ruen · SMIL Timesheets</span>ruen

Отрывок, характеризующий LESS (язык стилей)

– Не замуж, а так , – повторила она.
– Как же это, мой друг?
– Да так . Ну, очень нужно, что замуж не выйду, а… так .
– Так, так, – повторила графиня и, трясясь всем своим телом, засмеялась добрым, неожиданным старушечьим смехом.
– Полноте смеяться, перестаньте, – закричала Наташа, – всю кровать трясете. Ужасно вы на меня похожи, такая же хохотунья… Постойте… – Она схватила обе руки графини, поцеловала на одной кость мизинца – июнь, и продолжала целовать июль, август на другой руке. – Мама, а он очень влюблен? Как на ваши глаза? В вас были так влюблены? И очень мил, очень, очень мил! Только не совсем в моем вкусе – он узкий такой, как часы столовые… Вы не понимаете?…Узкий, знаете, серый, светлый…
– Что ты врешь! – сказала графиня.
Наташа продолжала:
– Неужели вы не понимаете? Николенька бы понял… Безухий – тот синий, темно синий с красным, и он четвероугольный.
– Ты и с ним кокетничаешь, – смеясь сказала графиня.
– Нет, он франмасон, я узнала. Он славный, темно синий с красным, как вам растолковать…
– Графинюшка, – послышался голос графа из за двери. – Ты не спишь? – Наташа вскочила босиком, захватила в руки туфли и убежала в свою комнату.
Она долго не могла заснуть. Она всё думала о том, что никто никак не может понять всего, что она понимает, и что в ней есть.
«Соня?» подумала она, глядя на спящую, свернувшуюся кошечку с ее огромной косой. «Нет, куда ей! Она добродетельная. Она влюбилась в Николеньку и больше ничего знать не хочет. Мама, и та не понимает. Это удивительно, как я умна и как… она мила», – продолжала она, говоря про себя в третьем лице и воображая, что это говорит про нее какой то очень умный, самый умный и самый хороший мужчина… «Всё, всё в ней есть, – продолжал этот мужчина, – умна необыкновенно, мила и потом хороша, необыкновенно хороша, ловка, – плавает, верхом ездит отлично, а голос! Можно сказать, удивительный голос!» Она пропела свою любимую музыкальную фразу из Херубиниевской оперы, бросилась на постель, засмеялась от радостной мысли, что она сейчас заснет, крикнула Дуняшу потушить свечку, и еще Дуняша не успела выйти из комнаты, как она уже перешла в другой, еще более счастливый мир сновидений, где всё было так же легко и прекрасно, как и в действительности, но только было еще лучше, потому что было по другому.

На другой день графиня, пригласив к себе Бориса, переговорила с ним, и с того дня он перестал бывать у Ростовых.


31 го декабря, накануне нового 1810 года, le reveillon [ночной ужин], был бал у Екатерининского вельможи. На бале должен был быть дипломатический корпус и государь.
На Английской набережной светился бесчисленными огнями иллюминации известный дом вельможи. У освещенного подъезда с красным сукном стояла полиция, и не одни жандармы, но полицеймейстер на подъезде и десятки офицеров полиции. Экипажи отъезжали, и всё подъезжали новые с красными лакеями и с лакеями в перьях на шляпах. Из карет выходили мужчины в мундирах, звездах и лентах; дамы в атласе и горностаях осторожно сходили по шумно откладываемым подножкам, и торопливо и беззвучно проходили по сукну подъезда.
Почти всякий раз, как подъезжал новый экипаж, в толпе пробегал шопот и снимались шапки.
– Государь?… Нет, министр… принц… посланник… Разве не видишь перья?… – говорилось из толпы. Один из толпы, одетый лучше других, казалось, знал всех, и называл по имени знатнейших вельмож того времени.
Уже одна треть гостей приехала на этот бал, а у Ростовых, долженствующих быть на этом бале, еще шли торопливые приготовления одевания.
Много было толков и приготовлений для этого бала в семействе Ростовых, много страхов, что приглашение не будет получено, платье не будет готово, и не устроится всё так, как было нужно.
Вместе с Ростовыми ехала на бал Марья Игнатьевна Перонская, приятельница и родственница графини, худая и желтая фрейлина старого двора, руководящая провинциальных Ростовых в высшем петербургском свете.
В 10 часов вечера Ростовы должны были заехать за фрейлиной к Таврическому саду; а между тем было уже без пяти минут десять, а еще барышни не были одеты.
Наташа ехала на первый большой бал в своей жизни. Она в этот день встала в 8 часов утра и целый день находилась в лихорадочной тревоге и деятельности. Все силы ее, с самого утра, были устремлены на то, чтобы они все: она, мама, Соня были одеты как нельзя лучше. Соня и графиня поручились вполне ей. На графине должно было быть масака бархатное платье, на них двух белые дымковые платья на розовых, шелковых чехлах с розанами в корсаже. Волоса должны были быть причесаны a la grecque [по гречески].
Все существенное уже было сделано: ноги, руки, шея, уши были уже особенно тщательно, по бальному, вымыты, надушены и напудрены; обуты уже были шелковые, ажурные чулки и белые атласные башмаки с бантиками; прически были почти окончены. Соня кончала одеваться, графиня тоже; но Наташа, хлопотавшая за всех, отстала. Она еще сидела перед зеркалом в накинутом на худенькие плечи пеньюаре. Соня, уже одетая, стояла посреди комнаты и, нажимая до боли маленьким пальцем, прикалывала последнюю визжавшую под булавкой ленту.
– Не так, не так, Соня, – сказала Наташа, поворачивая голову от прически и хватаясь руками за волоса, которые не поспела отпустить державшая их горничная. – Не так бант, поди сюда. – Соня присела. Наташа переколола ленту иначе.
– Позвольте, барышня, нельзя так, – говорила горничная, державшая волоса Наташи.
– Ах, Боже мой, ну после! Вот так, Соня.
– Скоро ли вы? – послышался голос графини, – уж десять сейчас.
– Сейчас, сейчас. – А вы готовы, мама?
– Только току приколоть.
– Не делайте без меня, – крикнула Наташа: – вы не сумеете!
– Да уж десять.
На бале решено было быть в половине одиннадцатого, a надо было еще Наташе одеться и заехать к Таврическому саду.
Окончив прическу, Наташа в коротенькой юбке, из под которой виднелись бальные башмачки, и в материнской кофточке, подбежала к Соне, осмотрела ее и потом побежала к матери. Поворачивая ей голову, она приколола току, и, едва успев поцеловать ее седые волосы, опять побежала к девушкам, подшивавшим ей юбку.
Дело стояло за Наташиной юбкой, которая была слишком длинна; ее подшивали две девушки, обкусывая торопливо нитки. Третья, с булавками в губах и зубах, бегала от графини к Соне; четвертая держала на высоко поднятой руке всё дымковое платье.
– Мавруша, скорее, голубушка!
– Дайте наперсток оттуда, барышня.
– Скоро ли, наконец? – сказал граф, входя из за двери. – Вот вам духи. Перонская уж заждалась.
– Готово, барышня, – говорила горничная, двумя пальцами поднимая подшитое дымковое платье и что то обдувая и потряхивая, высказывая этим жестом сознание воздушности и чистоты того, что она держала.
Наташа стала надевать платье.


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