Как подключить less к css

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]; > 

This outputs, as expected:

.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.

• Currently v4.1.3
• ·
• Less Language and Compiler Issues
• ·
• Less Docs Issues
• ·
• Changelog

Подключение less

так я туда заходил! у меня что не так как там не могу понять!!

9 апр 2014 в 17:27

у меня что не так. туда я и без Вас заходил перед тем как задать вопрос

9 апр 2014 в 17:31

если кого интересует, проблема біла в том что встроеній компилятор есть только у firefox

9 апр 2014 в 17:39

Чтоб все работало в хроме, его нужно запустить с ключом —allow-file-access-from-files В строке объект в свойствах ярлыка хрома. Через пробел. Т.е. должно быть, например, так «C:\Program Files\Google\Chrome\Application\chrome.exe» —allow-file-access-from-files И, соответственно, запускать через этот ярлык.

LESS

LESS (Leaner Style Sheets — компактные таблицы стилей) — динамический язык стилей, разработанный в 2009 году программистом Алексисом Селье.

Освойте профессию «Frontend-разработчик»

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

LESS — это свободное ПО с открытым исходным кодом, распространяемое по лицензии Apache License 2. Первая версия LESS была реализована на языке Ruby, последующие — на JavaScript. За счет синтаксиса, основанного на CSS, этот язык отличается низким порогом вхождения.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Что такое LESS

Основным языком стилей, используемым в веб-разработке, является CSS. Его популярность обусловлена простотой и универсальностью применения, однако ограничения снижают его удобство в некоторых ситуациях — например, если веб-документ простой и в нем часто используется один и тот же цвет или шрифт. Изменить их значения разом нельзя, придется это делать вручную во многих фрагментах документа. Другой важный недостаток CSS — отсутствие вложенности, из-за чего написанный на этом языке код визуально сложен для восприятия. И если разобраться в небольшом фрагменте разработчику не составит особого труда, то при работе с большими массивами могут возникнуть проблемы.

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

Для преодоления этих ограничений и был разработан LESS, а также его аналоги, такие как SASS или Stylus. Для их определения используются следующие понятия:

• Метаязык — то есть язык, используемый для описания другого языка более низкого уровня (в данном случае CSS);
• Препроцессор — программная надстройка, вырабатывающая данные, которые уже будут использоваться непосредственно самим CSS-обработчиком веб-браузера.

Например, чтобы присвоить фрагменту веб-страницы темно-персиковый цвет с помощью CSS, нужно прописать в соответствующем элементе код #FF9F94. Проблема в том, что если таких фрагментов много, то нужно это делать в каждом из них вручную. В LESS это можно сделать гораздо проще, указав данный код как значение переменной, которая уже автоматически присвоит нужный цвет соответствующим фрагментам веб-страницы.

Иными словами, задача LESS как препроцессора CSS — упростить задачу разработчика, предоставив ему более понятные, функциональные и удобные синтаксические конструкции, чем те, которые имеются в самом CSS. Человек пишет на LESS код так, как удобно ему, затем компилятор языка преобразует его в CSS-код, который уже понятен браузеру. Кроме того, с помощью этого языка решаются следующие задачи:

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

Возможности LESS

Данный язык существенно расширяет и упрощает создание и использование CSS-стилей за счет собственных встроенных возможностей.

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

Вложения. Чистый CSS поддерживает каскадирование, но не вложенность селекторов (выражений, сообщающих браузеру, к каким фрагментам HTML присвоить то или иное свойство CSS). Из-за этого CSS-код большого веб-документа выглядит громоздким, что усложняет как его написание, так и последующее тестирование и обработку. В LESS это ограничение можно обойти, вложив один селектор в другой. Таким образом, наследование между фрагментами CSS становится более понятным, а сам код — более коротким.

Функции и операции. С их помощью в LESS можно свободно сочетать между собой различные свойства для получения более сложных, адаптировать их к использованию в зависимости от контекста, выполнять с ними различные математические действия — сложение, вычитание, умножение и т. д. Операции и функции в LESS делают язык более гибким и динамичным по сравнению с традиционным CSS.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Преимущества LESS

У LESS имеется множество преимуществ как перед самим CSS, так и перед другими CSS-препроцессорами вроде того же SASS:

Быстрая компиляция. Чтобы код, написанный на LESS, был понятен браузеру, он должен быть предварительно превращен в традиционный CSS. Для этого в языке есть встроенный компилятор, при этом он работает значительно быстрее, чем у аналогичных препроцессоров. В отличие от CSS, в котором действуют статичные правила, LESS представляет собой динамический язык стилей. Это значит, что он позволяет определять тип данных и компилировать их непосредственно «на лету», то есть по ходу обработки кода.

Простота. За счет использования вложенности селекторов код, написанный на LESS, воспринимается гораздо проще, чем CSS. Это облегчает как его написание, так и последующую проверку на ошибки. Кроме того, с помощью наследования и повторного использования стилей можно существенно сократить размер кода.

Ускорение разработки. Благодаря переменным в LESS присваивать повторяющиеся значения различным фрагментам кода значительно проще, чем прописывать каждое вручную. Соответственно, и вносить изменения в уже написанный код становится легче.

Низкий порог вхождения. Если разработчик хорошо знаком с традиционным CSS, освоение LESS не вызовет у него больших проблем. Это достигается за счет схожего синтаксиса обоих языков.

Возможность подключения плагинов. Так как LESS является открытым ПО, ведущий и сторонние разработчики постоянно дополняют его основной функционал различными плагинами. Их можно скачать как с официального сайта, так и с независимых репозиториев. Кроме того, открытый характер этого языка делает более доступным его изучение за счет наличия большого числа руководств и форумов, в которых разработчик может получить помощь.

Недостатки LESS

Несмотря на широкую популярность, этот язык разметки стилей имеет и свои недостатки. Причем многие программисты из-за них отказываются от его использования в пользу более раннего препроцессора SASS, который в значительной мере повлиял на сам LESS. К наиболее значимым недостаткам относятся:

• Необходимость хорошо знать CSS, так как на нем основан синтаксис LESS. Впрочем, изучение обоих языков может происходить параллельно, поэтому для опытных программистов это большой проблемы не составляет.
• LESS более чувствителен к ошибкам, поэтому даже опытному разработчику придется тестировать код после его написания. При этом встроенные инструменты отладки и поиска ошибок не всегда работают должным образом.
• LESS уступает некоторым другим препроцессорам CSS (в первую очередь, SASS) по количеству фреймворков, а также по количеству встроенных возможностей, что частично компенсируется подключением плагинов.

Способы подключения LESS

На стороне клиента. Это наиболее простой в плане реализации способ установки LESS, так как он задействует непосредственно браузер пользователя с помощью скрипта JavaScript. Для этого нужно:

• подключить файл *.less к веб-документу с помощью тега ;
• скачать скрипт или получить на официальном сайте LESS ссылку на сеть доставки контента (CDN).

При этом компиляция LESS в CSS будет происходить «на лету» в веб-браузере пользователя. Этот способ наиболее простой, но чаще используется в небольших веб-документах, так как их обработка не занимает много времени. Также он применяется на стадиях разработки и отладки проекта, когда результат компиляции важнее ее скорости.

На стороне сервера. В этом случае для работы с LESS-файлами понадобится установить платформу Node.js, которая расширяет узкоспециализированный JavaScript до языка общего назначения. Также необходимо предварительно скачать less-пакет с помощью менеджера пакетов npm. Далее с помощью Node.js LESS-файл компилируется в CSS, который подключается непосредственно к HTML-документу. Данный способ может показаться более сложным, зато он дает больше возможностей и, кроме того, позволяет не компилировать CSS-файл каждый раз при загрузке страницы, тем самым ускоряя ее.

С помощью сторонних компиляторов. Для разных операционных систем существуют различные платформы-компиляторы, с помощью которых можно создавать и подключать LESS-файлы к веб-документу. Например, для ОС Microsoft Windows это Winless, а для MacOS — LESS.app. Такие приложения не просто компилируют LESS-файл в CSS, но и автоматизируют многие операции при создании самого кода.

Различия между LESS и другими CSS-препроцессорами

Наиболее распространенными аналогами LESS являются два препроцессора — SASS и Stylus. SASS был разработан раньше, в 2007 году, и точно так же, как и первая версия LESS, написан на Ruby. Его преимущество заключается в более широком встроенном функционале, который можно дополнительно расширить с помощью подключаемой библиотеки Compass. Сам SASS бывает двух типов:

• Непосредственно SASS, использующий устаревший синтаксис;
• SCSS, синтаксис которого имеет много сходств с традиционным CSS.

Другой популярный препроцессор Stylus был разработан позже, в 2010 году, сразу на JavaScript (LESS перешел на JS только начиная со второй версии). Хотя на данный момент он менее популярен по сравнению со своими более старшими собратьями, специалисты считают его перспективным благодаря его максимальной простоте и удобству. В частности, в его синтаксисе, в целом похожем на CSS, отсутствуют характерные фигурные скобки и прочие знаки препинания.

Также существуют способы компиляции LESS с помощью различных редакторов и сред разработки, которые могут иметь встроенные инструменты для работы с такими файлами или возможность подключения соответствующих плагинов. Недостаток этого метода в том, что зачастую приходится подключать несколько дополнительных библиотек. Зато среды разработки существенно расширяют возможности разработчика за счет более разнообразных функций.

LESS — удобный язык для работы со стилями, пользующийся заслуженной популярностью среди разработчиков за счет своей простоты и низкого порога вхождения, достаточно широкого арсенала средств создания, отладки и компиляции кода. Поэтому он часто рекомендуется как эффективный инструмент верстки веб-документов, пригодный для работы как с небольшими, так и с крупными проектами. Кроме того, совместимость его синтаксиса с традиционным CSS существенно упрощает освоение LESS. Тем не менее, при реализации некоторых крупных проектов его функционала может не хватить, но всегда есть возможность подключить дополнительные расширения.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Как подключить less к css

Как подключить CSS (каскадные таблицы стилей) к HTML?

Очень важно отметить, что HTML – это не язык программирования, как считает большинство неопытных пользователей, а лишь средство для верстки веб-страниц и никак иначе! Запомните это. Очень много вижу нелепых сообщений, где люди говорят о том, что они программисты и пишут свои «программы» на HTML. Наверное, я вас огорчу, но это не так.

HTML – лишь инструмент для верстки страницы, и если вы занимаетесь этим – вы верстальщик. А вот если вы дополнительно пишите какие-нибудь скрипты или модули, на том же JavaScript или PHP – тут можно поговорить о таком понятии, как программист. Но речь сейчас пойдет не об этом, и когда мы точно узнали, является ли HTML языком программирования или нет, перейдем к главному этой статье.

Помимо того, что HTML выступает в качестве верстки ваших веб-страниц, существует такое понятие, как CSS (нет, это не игра Counter-Strike: Source, как могло подумать множество юных вебмастеров), это каскадные таблицы стилей. Суть их – это формирование общего стиля страницы или отдельного ее элемента. Простыми словами – отступы, цвет, шрифт, ширина, высота и прочие другие параметры настраиваются именно через эти стили.

Самих свойств существует большое множество, некоторые из них универсальны, а некоторые – персональны для того или иного элемента. Описывать их мы сейчас не будем, а остановимся на том, как же подключить ваши стили к HTML-документу.

Подключение внешней таблицы стилей

Внешний файл стилей имеет расширение .css (это обязательное условие) и название файла на английском языке. Пример – main.css или style.css. После того, как вы создали такой файл и заполнили его соответствующими стилями – загрузите его на свой сайт в удобную для вас папку и осуществите подключение к HTML-документу.

Самый распространенный способ подключения внешнего файла стилей – это:

Или сокращенный вариант для HTML5:

На что тут стоит обратить внимание?

1. Файл подключается в секцию HEAD на все страницы вашего сайта. Там, где этого файла нет, будет отсутствовать ваше оформление.
2. В части href пишется полная или относительная ссылка к CSS-файлу.
3. Необязателен, но желателен последний закрывающий слеш. Так код получается «по фэн-шую».
4. Подключать на страницу можно сколько угодное число файлов стилей. Главное – без фанатизма.

Помимо этого, стили могут быть встроены еще несколькими способами.

Подключение внутренней таблицы стилей

Под внутренней таблицей стилей подразумевается отсутствие файла стилей. Свойства таблицы в таком случае вставляются на страницу следующим образом:

Или краткий вид для HTML5:

Здесь особых нюансов нет – вставлять конструкцию можете как в секцию HEAD, так и в BODY. Причем на странице, в разных ее частях может быть несколько таких конструкций.

Подключение встроенной таблицы стилей

Если вы исследовали различные сайты, смотрели, как устроена их верстка, то могли заметить, как стили прописываются непосредственно следующим образом:

Такой вариант и называется «встроенными стилями», применим ко всем элементам веб-страницы, будь то простой блок, изображение или встроенное видео.

Единственным нюансом здесь является то, что если во внешних или внутренних стилях не используется свойство «!important» – встроенное свойство является приоритетным по исполнению. Что это значит? Приведу простой пример:

Несмотря на то, что во внутренних стилях мы задали цвет фразы красный – она будет черной, так как это указано во встроенных стилях.

Похожие публикации:

1. Как подключить less к html
2. Как можно подключить один css файл в другой css файл
3. Как подключить css к css
4. Как подключить один css файл в другой css файл