Overview
Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.
- For detailed documentation on Less language features, see Features
- For a list of Less Built-in functions, see Functions
- For detailed usage instructions, see Using Less.js
- For third-party tools for Less, see Tools
What does Less add to CSS? Here’s a quick overview of features.
Variables
These are pretty self-explanatory:
@width: 10px; @height: @width + 10px; #header < width: @width; height: @height; > #header < width: 10px; height: 20px; > Mixins
Mixins are a way of including («mixing in») a bunch of properties from one rule-set into another rule-set. So say we have the following class:
.bordered < border-top: dotted 1px black; border-bottom: solid 2px black; > And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:
#menu a < color: #111; .bordered(); > .post a < color: red; .bordered(); > The properties of the .bordered class will now appear in both #menu a and .post a . (Note that you can also use #ids as mixins.)
Nesting
Less gives you the ability to use nesting instead of, or in combination with cascading. Let’s say we have the following CSS:
#header < color: black; > #header .navigation < font-size: 12px; > #header .logo < width: 300px; > In Less, we can also write it this way:
#header < color: black; .navigation < font-size: 12px; > .logo < width: 300px; > > The resulting code is more concise, and mimics the structure of your HTML.
You can also bundle pseudo-selectors with your mixins using this method. Here’s the classic clearfix hack, rewritten as a mixin ( & represents the current selector parent):
.clearfix < display: block; zoom: 1; &:after < content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; > > Nested At-Rules and Bubbling
At-rules such as @media or @supports can be nested in the same way as selectors. The at-rule is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.
.component < width: 300px; @media (min-width: 768px) < width: 600px; @media (min-resolution: 192dpi) < background-image: url(/img/retina2x.png); > > @media (min-width: 1280px) < width: 800px; > > .component < width: 300px; > @media (min-width: 768px) < .component < width: 600px; > > @media (min-width: 768px) and (min-resolution: 192dpi) < .component < background-image: url(/img/retina2x.png); > > @media (min-width: 1280px) < .component < width: 800px; > > Operations
Arithmetical operations + , — , * , / can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.
// numbers are converted into the same units @conversion-1: 5cm + 10mm; // result is 6cm @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // result is 4px // example with variables @base: 5%; @filler: @base * 2; // result is 10% @other: @base + @filler; // result is 15% Multiplication and division do not convert numbers. It would not be meaningful in most cases — a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.
@base: 2cm * 3mm; // result is 6cm You can also do arithmetic on colors:
@color: (#224488 / 2); // result is #112244 background-color: #112244 + #111; // result is #223355 However, you may find Less’s Color Functions more useful.
From 4.0, No division is performed outside of parens using / operator.
@color: #222 / 2; // results in `#222 / 2`, not #111 background-color: (#FFFFFF / 16); //results is #101010 You can change Math setting, if you want to make it always work, but not recommended.
calc() exception
For CSS compatibility, calc() does not evaluate math expressions, but will evaluate variables and math in nested functions.
@var: 50vh/2; width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px)) Escaping
Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~»anything» or ~’anything’ is used as is with no changes except interpolation.
@min768: ~"(min-width: 768px)"; .element < @media @min768 < font-size: 1.2rem; > > @media (min-width: 768px) < .element < font-size: 1.2rem; > > Note, as of Less 3.5, you can simply write:
@min768: (min-width: 768px); .element < @media @min768 < font-size: 1.2rem; > > In 3.5+, many cases previously requiring «quote-escaping» are not needed.
Functions
Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.
Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:
@base: #f04615; @width: 0.5; .class < width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); > Namespaces and Accessors
Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle , for later reuse or distributing:
#bundle() < .button < display: block; border: 1px solid black; background-color: grey; &:hover < background-color: white; > > .tab < . >.citation < . >> Now if we want to mixin the .button class in our #header a , we can do:
#header a < color: orange; #bundle.button(); // can also be written as #bundle > .button > Note: append () to your namespace (e.g. #bundle() ) if you don’t want it to appear in your CSS output i.e. #bundle .tab .
Maps
As of Less 3.5, you can also use mixins and rulesets as maps of values.
#colors() < primary: blue; secondary: green; > .button < color: #colors[primary]; border: 1px solid #colors[secondary]; > .button < color: blue; border: 1px solid green; > Scope
Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren’t found, it’s inherited from the «parent» scope.
@var: red; #page < @var: white; #header < color: @var; // white > > Like CSS custom properties, mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Less code is identical to the previous example:
@var: red; #page < #header < color: @var; // white > @var: white; > Comments
Both block-style and inline comments may be used:
/* One heck of a block * style comment! */ @var: red; // Get in line! @var: white; Importing
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.
@import "library"; // library.less @import "typo.css"; Less and these docs are maintained by the core Less team.
Documentation source code released under the MIT License, documentation under CC BY 3.0.
Что такое LESS?
Всем привет! Сегодня мы поговорим о том, что такое less.js и как его использовать.
Возможно, вы слышали такое выражение: «Препроцессоры CSS»? Вот сегодня мы разберём один из них — LESS.
Зачем нужен LESS?
LESS помогает добавить новые возможности, сделать ваш код более красивым и гибким. Препроцессоры немного похожи на языки программирования: там есть переменные, функции, операции и т.д. Представим, что у вас есть много всяких блоков, у которых свой цвет, и со временем вы решили сменить цвет сайта. На чистом CSS это может быть очень затруднительным, когда на LESS вы можете поместить цвета в переменные, которые затем использовать в блоках, и, если вы захотите сменить цвет, то вам нужно будет его поменять лишь в одной переменной. После того, как ваш код на LESS будет написан, вы сможете скомпилировать его в CSS и вставить себе на сайт.
Начало работы
Для начала скачайте библиотеку less.js с сайта http://lesscss.org/
Структура простая: нумерованный список, который будет нашим меню. Но заметьте, что в теге head мы подключаем скачанный с сайта less.js, а все стили для него мы будем писать в файле style.less, который также подключаем.
Пишем стили. Файл style.less
@mainColor: #233A59;
@mainColor2: lighten(@mainColor, 30%);
@textColor: #f7f7f7;
div#nav ul li list-style: none;
a text-decoration: none;
font-family: verdana;
font-size: 14px;
color: @textColor;
float: left;
padding: 15px 30px;
border-right: 1px solid fadeout(@textColor, 60%);
.gradient(@col, @col2) background-color: @col;
background-image: gradient(linear, left top, left bottom, from(@col), to(@col2));
background-image: linear-gradient(top, @col, @col2);
>
Итак, давайте разбираться, что же мы тут написали.
Во-первых, с помощью такого синтаксиса: @name создаются переменные в less. Мы можем записать туда, что хотим. В нашем случае у нас есть переменные mainColor и textColor, которые хранят цвет для нашего меню и текста и переменная mainColor2, где, заметьте, мы используем функцию lighten, которая помогает осветлить наш цвет. В нашем случае осветление будет 30%
Следующее отличие — вложенность. Заметили, что мы не пишем div#nav, затем #div#nav ul и так далее, а вкладываем наш список, ссылку и прочее внутрь. Удобно, правда?
Чтобы сделать градиент, мы создали свою собственную функцию, которая выглядит как класс и называется .gradient. Она принимает 2 параметра и использует их для того, чтобы создать градиент. Вызываем мы её в нашей ссылке, куда передаём переменные @mainColor и @mainColor2. Ещё одна функция, которую мы используем в ссылке — fadeout. Она позволяет снизить прозрачность. Мы выбрали значение 60%
Компиляция в CSS
Сейчас у нас всё прекрасно работает, но заливать файлы на сервер в таком виде не стоит. Почему? Потому, что у человека в браузере может быть отключён JavaScript, и тогда наши стили уже не сработают. Поэтому less лучше всего использовать при разработке, а когда всё уже готов, скомпилировать в css и уже его заливать на сервер. Для этого есть, например, онлайн компиляторы. Один из них — http://leafo.net/lessphp/ Вставьте слева less код, а затем нажмите compile. Справа вы увидете готовый css код.
Итак, сегодня мы разобрались, что такое less и как его использовать. Увидимся в следующей статье.
Создано 16.05.2014 20:58:44
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 1 ):
javascript виключає мало хто, але процес компіляції дуже важкий — тому краще скомпілювати і викласти. Бо навіть на нормальних комп’ютерах любить тормозити, а ,що казати про різні Пентіуми. Я рекомендую для компіляції simpless
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.