Подключение 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. — Парень подключает less-1.7.3.js в свой html, создает файл .less и уже там начинает редактировать стиль; параллельно работает браузер — всё работает на лету — при сохранении данных в .less содержимое меняется.
У меня так не получается — получается — предварительно надо скомпилировать .less и получившийся .сss подключать к html. — Но это ладно, терпимо.
Проблема в другом у меня не работают функции .less’a. —
@darkRed: #B20000; @LdarkRed: lighten (@maincolor, %30);Где функция lighten — там стабильно ошибка. Компилятор — SimpLESS. В чем может быть проблема? В .css я ничего не подключала.
Еще я не понимаю — зачем надо подключать less-1.7.3.js в html, когда этот файл вообще не используется.
Всем спасибо за ответы
- Вопрос задан более трёх лет назад
- 6787 просмотров
3 комментария
Оценить 3 комментария
Импорт стилей
Если вы хоть раз подключали таблицы стилей через директиву @import в CSS, то эта часть главы полностью изменит ваше представление о ней, так как в Less все куда интереснее и гибче. Если же вы никогда ранее не делали импорт стилей в CSS, то добро пожаловать в этот удивительный мир, позволяющий разбивать таблицы стилей на несколько частей.
Импорт стилей в CSS
В CSS директива @import позволяет импортировать стили из других таблиц. Проще говоря, можно разбить одну большую таблицу стилей на несколько маленьких. Делается это следующим образом:
@import url("имя файла"); @import "имя файла"; Самым важным минусом выступает тот факт, что такие подключения должны предшествовать другим стилям в таблице, где подключается дополнительный файл. То есть сделать так, как написано в коде ниже нельзя:
.class < background-color: #fff; > @import "имя файла"; Разрешено делать только так:
@import "имя файла"; .class < background-color: #fff; > Причём имя файла должно быть с расширением .css .
Я не буду вдаваться в подробности и обойду стороной возможность указывать типы носителей, тем более они сейчас нас не интересуют, да и на практике такое подключение дополнительных таблиц стилей не приветствуется.
Импорт стилей в Less
В Less импорт стилей происходит с помощью всё той же директивы, но с расширенным функционалом. Перед именем файла можно указывать (необязательно) ключевое слово, которое указывает компилятору, как ему поступать с файлом.
@import (keyword) "имя файла"; Тем более, вы можете комбинировать ключевые слова для достижения определённых целей. Например, если нужно использовать css-файл как less-файл, но при этом не выводить его содержимого.
Во-первых, в Less не регламентируется то, где возможно подключение других таблиц стилей. Вы можете использовать директиву @import до объявления селекторов, после или даже между ними:
.one < background-color: #000; > @import "имя файла"; .two < background-color: #fff; > Во вторых, расширение файла может быть любым, главное — чтобы в нём содержался валидный CSS- или Less-синтаксис. Но здесь начинают действовать специфичные для Less правила:
Файлы с расширением .css :
Если при подключении файла с помощью директивы @import будет указано расширение .css , то такой файл подключается как обычный css-файл и не обрабатывается компилятором.
Файлы без расширения:
Если при подключении файла с помощью директивы @import у него не будет указано расширение, то такой файл подключается как less-файл и обрабатывается компилятором.
Файлы с другими расширениями:
Если при подключении файла с помощью директивы @import у него будет указано расширение, но оно не соответствует ни .css ни .less , то такой файл подключается как less-файл и будет обрабатываться компилятором.
Все это вкупе с доступными опциями для директивы @import , которые будут рассматриваться позднее, даёт вам возможность построения гибкой и хорошо поддерживаемой структуры проекта. Про структуру проекта я буду рассказывать намного позднее, так как без полного понимания доступных возможностей Less она вам не пригодится.
Пример 2.6.1
Рассмотрим пример, который отображает всю суть импорта стилей в Less. Для этого создадим в директории import/ следующие файлы: _duckduckgo.less , _mail.css , _yandex.less и _yahoo.less . В этих файлах объявим одноимённые с названиями файлов классы и укажем с помощью свойства color официальный цвет сервиса. Кроме них нам понадобится файл _styles.less , к которому будут подключаться эти файлы.
Для наглядности я предлагаю посмотреть на карту директории этого примера:
2.6.1/ ├── import/ │ ├── _duckduckgo.less │ ├── _mail.css │ ├── _yahoo.less │ └── _yandex.less └── _styles.less Теперь я предлагаю взглянуть на содержимое файла _styles.less и то, что получилось после его компиляции.
Содержимое файла _styles.less :
@import "import/_mail.css"; @import "import/_duckduckgo"; .canonium < color: #53599a; > @import "import/_yahoo"; @import "import/_yandex"; Как не сложно заметить, подключение таблиц стилей происходит до и после содержимого файла, что не допускается в CSS, но разрешено в Less.
Содержимое файла styles.css , полученное после компиляции:
@import "import/_mail.css"; .duckduckgo < color: #de5833; > .canonium < color: #53599a; > .yahoo < color: #400191; > .yandex < color: #ffcc00; > Во время компиляции происходит конкатенация содержимого файлов. А файлы с расширением .css подключаются стандартным для CSS способом.
Опции импорта
С помощью ключевых слов (опций) можно управлять тем, как компилятор будет обрабатывать файлы. Например, с помощью таких опций можно заставить компилятор конкатенировать содержимое CSS-файла, а не подключать его с помощью директивы.
Я предлагаю подробнее остановиться на каждом ключевом слове и посмотреть примеры их работы. Все примеры будут основываться на структуре, представленной в примере 2.6.1.
Опция (less)
С помощью этого ключевого слова можно попросить компилятор рассматривать подключаемый файл как less-файл, то есть производить его компиляцию, а также конкатенацию с тем файлом, где происходит его подключение.
Может пригодиться при использовании файлов, которые имеют не стандартное расширение, например, .variables или .mixin .
Пример 2.6.2
Необходимо подключить файл _mail.css :
.mail < color: #168de2; > .mail .orange < color: #ffa930; > Если подключить этот файл как раньше, с помощью импорта без ключевых слов ( @import «import/_mail.css»; ), то файл будет подключён как обычный CSS-файл в файле styles.css .
@import "import/_mail.css"; .canonium < color: #53599a; > Но нам необходимо провести конкатенацию этих двух файлов. Для этого требуется указать ключевое слово less . Тогда файл styles.css приобретает необходимый нам вид:
.canonium < color: #53599a; > .mail < color: #168de2; > .mail .orange < color: #ffa930; > Опция (css)
Полная противоположность опции (less) . На этот раз мы можем заставить любой файл подключаться стандартным для CSS способом.
Пример 2.6.3
На этот раз стоит задача подключения файла стандартным для CSS способом. Без лишних слов. Просто посмотрите на код:
@import (css) "import/_duckduckgo.less"; .canonium < color: #53599a; > @import "import/_duckduckgo.less"; .canonium < color: #53599a; > Опция (reference)
Замечательная опция, позволяющая использовать less-файлы, но не выводить их содержимое до тех пор, пока оно не будет явно вызвано. Пригодится в тех случаях, когда нужно использовать определённый селектор, а остальное содержимое файла не нужно. Такое поведение положительно сказывается на работе с библиотеками, которые имеют избыточный функционал в виде множества селекторов, а вам необходимы лишь некоторые из них.
Пример 2.6.4
Для демонстрации работы этого ключевого слова используем группировку селекторов. Помимо этого, можно использовать примеси, но мы их пока затрагивать не будем.
Немного изменим файл _yandex.less , чтобы можно было продемонстрировать работу более наглядно:
.yandex < color: #ffcc00; > .yandex-topbar < background-color: #e4491b; > В файле _styles.less добавим ключевое слово (reference) :
.canonium < color: #53599a; > @import (reference) "import/_yandex"; Если сейчас скомпилировать этот файл, то кроме селектора canonium в нём ничего не будет. Необходимо добавить явный вызов селектора.
Добавим явный вызов в файл _styles.less , в виде псевдокласса :extend() . Делается это следующим образом:
.canonium < color: #53599a; > @import (reference) "import/_yandex"; .topbar < &:extend(.yandex-topbar); > Теперь, после компиляции в получившемся CSS-файле у класса .topbar появятся все свойства класса .yandex-topbar , объявленного в импортируемом файле. При этом класс .yandex в этот файл добавлен не будет.
.canonium < color: #53599a; > .topbar < background-color: #e4491b; > Опция (inline)
Задача этой опции сказать компилятору, что разработчик ожидает на выходе подключённый файл, но без обработки компилятором. Такая опция может пригодиться при подключении CSS-файла, в котором присутствуют конструкции, которые в Less необходимо преобразовывать. Например, используемое в IE свойство filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); , требующее экранирования в Less.
Пример 2.6.5
Представим, что перед нами стоит задача разработки проекта, использующего фильтры. Пусть к такому проекту подключается какая-нибудь библиотека, которая существует в виде CSS-файла. Тогда у нас могут возникнуть некоторые проблемы.
Добавим в файл _mail.css класс, содержащий свойство filter :
.mail < color: #168de2; filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); > Помимо этого, добавим ключевое слово (less) в файле _styles.less , чтобы CSS-файл склеивался с less-файлом:
@import (less) "import/_mail.css"; .canonium < color: #53599a; > Производим компиляцию стандартным способом. Но не тут-то было, вместо счастливого финала наш компилятор как-то приуныл и выдал ошибку. В ней говорится, что он не понимает предоставленный синтаксис и ему хочется, чтобы мы его исправили.
Именно сейчас и пригодится рассматриваемая опция (inline) . Дописываем её в директиву @import через запятую:
@import (less, inline) "import/_mail.css"; Повторяем процесс компиляции, и на этот раз все будет хорошо. Компилятор после сложного трудового дня немного отдохнёт, а мы насладимся его работой:
.mail < color: #168de2; filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); > .canonium < color: #53599a; > Опция (once) и (multiple)
Я не зря объединил эти две опции. Они представляют собой абсолютную дуальную пару, то есть они полностью противоположны по значению.
Ключевое слово (once) запрещает многократное подключение файла с таким именем. Эта опция включена в Less изначально, и прописывать её в директиве @import не нужно.
Ключевое слово (multiple) разрешает многократное подключение файла с таким именем.
Пример 2.6.6
Попробуем провести эксперимент. Сначала объявим директиву @import без опций, потом запретим многократное подключение с помощью (once) , а затем разрешим, используя (multiple) . После этого обговорим полученные результаты. Приступаем.
Объявим директиву @import без опций:
@import "import/_yahoo"; .canonium < color: #53599a; > @import "import/_yahoo"; В полученном результате файл подключился ровно один раз, так как все директивы импорта файлов содержат опцию (once) по умолчанию.
.yahoo < color: #400191; > .canonium < color: #53599a; > Объявим директиву @import с опцией (once):
@import (once) "import/_yandex"; .canonium < color: #53599a; > @import (once) "import/_yandex"; И снова тот же результат. Очевидно, что опция (once) все таки установлена по умолчанию, а её повторное применение ничего не меняет.
.yandex < color: #ffcc00; > .canonium < color: #53599a; > Объявим директиву @import с опцией (multiple):
@import (multiple) "import/_duckduckgo"; .canonium < color: #53599a; > @import (multiple) "import/_duckduckgo"; На этот раз скомпилированный CSS-код содержит селектор .duckduckgo дважды, а это значит, что опция (multiple) сработала.
.duckduckgo < color: #de5833; > .canonium < color: #53599a; > .duckduckgo < color: #de5833; > Опция (optional)
Эта опция позволяет продолжать компиляцию, если подключаемый файл не найден. Если не использовать это ключевое слово, то при отсутствии файла компилятор будет бросаться в вас ошибкой FileError . Скорее всего, такой функционал пригодится тем, кто строит фреймворк, основанный на ограниченном количестве модулей и компонентов, которые можно подключать и отключать.
Пример 2.6.7
В этом примере есть обязательный для компиляции файл _duckduckgo.less , а также два необязательных: _yahoo.less и _yandex.less . Один из этих файлов будет удалён.
@import "import/_duckduckgo"; @import (optional) "import/_yahoo"; @import (optional) "import/_yandex"; .canonium < color: #53599a; > Пусть будет отсутствовать файл _yahoo.less . Тогда после компиляции получится следующий CSS-код:
.duckduckgo < color: #de5833; > .yandex < color: #ffcc00; > .canonium < color: #53599a; > Мысли и советы
Несколько советов, которые позволят сделать ваш код лучше на этом этапе:
- Не указывайте расширение файлов без явной на то нужды, это делает структуру более приятной для чтения.
- Создайте один файл, в котором будут объявлены все директивы импорта файлов в проекте.
results matching » «
No results matching » «
Введение в LESS
LESS — это динамический метаязык на основе каскадных таблиц стилей (англ. Cascading Style Sheets — CSS), предназначенный для упрощения, масштабирования и поддержки большого объёма CSS кода.
LESS был создан Alexis Sellier под влиянием более раннего метаязыка стилей SASS (Syntactically Awesome Stylesheets). Одной из особенностью LESS является то, что он может работать как на клиентской стороне, так и на стороне сервера. Язык стилей LESS это продукт с открытым исходным кодом, который строится на языке программирования JavaScript.
LESS, как, например, и язык стилей SASS — это CSS препроцессор, он позволяет расширить язык CSS, добавляя в него переменные, функции, миксины (примеси), которые позволяют повторно использовать код в таблицах стилей и прочие методы, которые сделают ваш CSS код более настраиваемым, расширяемым и масштабируемым. Возможно Вас удивит тот факт, что вы можете начать использовать LESS уже прямо сейчас, так как валидный CSS будет валидным и в LESS.
Подключение LESS
В этой статье мы с Вами рассмотрим два варианта работы с LESS, если быть точнее, то с файлами *.less . Первый вариант предусматривает использование файлов *.less напрямую в браузере пользователя с подключением необходимого скрипта JavaScript для компиляции на «лету».
Второй вариант предусматривает использование специального препроцессора, который будет компилировать файлы *.less в файлы каскадных таблиц стилей — *.css .
Начнем с первого варианта:
По аналогии с каскадными таблицами стилей вам необходимо подключить файл *.less к Вашему HTML документу с использованием тега :
rel = "stylesheet/less" href = "styles.less"> // подключаем less файл к документу
После этого вам необходимо скачать файл со скриптом, или, как вариант, получить ссылку на сеть доставки контента (CDN) на официальном сайте метаязыка LESS. Давайте остановимся на первом варианте и подключим скачанный файл:
rel = "stylesheet/less" href = "styles.less"> // подключаем less файл к документу // подключаем скрипт JavaScript для преобразования метаязыка LESS в CSS
Обратите внимание, что необходимо подключать файл со скриптом уже после того как вы подключили файл *.less . Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом как вы понимаете компиляция из LESS в CSS будет происходить на стороне браузера (на «лету»).
Давайте перейдем к рассмотрению примера в котором начнем использовать LESS:
Знакомство с LESS rel = "stylesheet/less" href = "2.less"> Заголовок первого уровня. И один абзац для примера.
В этом примере мы создали отдельный файл 2.less в котором указали следующие стили:
h1 color: rgb(29,55,93); // устанавливаем цвет текста > p background: rgb(29,55,93); // устанавливаем цвет заднего фона color: #fff; // устанавливаем цвет текста белый >
Кроме того, мы подключили к документу скрипт JavaScript, который выступает в роли компилятора и преобразует метаязык LESS в каскадные таблицы стилей CSS.
Результат преобразования будет следующий:
h1 color: #1d375d; // значение в HEX > p background: #1d375d; // значение в HEX color: #fff; >
Как вы можете заметить результат компиляции (преобразования) практически идентичен первоначальным стилям, за исключением того, что RGB значение цвета было конвертировано в шестнадцатеричную систему HEX, что не влияет на внешний вид, но незначительно сокращает количество символов для описания этого стиля.
Результат нашего примера * :
* — Если вы решили повторить этот пример локально на своем компьютере и не увидели результат примера, показанный на изображении выше, то скорее всего вы сможете найти в консоли браузера подобную ошибку: «Failed to load file:///***/2.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https . Мы с Вами не будем вникать в локальные политики разных браузеров, отключать их и запускать браузеры с определенными ключами, просто попробуйте воспользоваться браузером Firefox для этого примера, или переходите к дальнейшему чтению.
Хочу сразу обратить ваше внимание на то, что этот пример не отражает возможностей метаязыка LESS, которые будут рассмотрены в следующих статьях этого учебника, а служит для понимания того как происходит компиляция, что нам необходимо для дальнейшего изучения.
Рассмотренный выше метод работы с файлами less имеет право на существование, но не является рекомендованым к использованию, по той причине, что производительность и скорость отображения стилей документа при этом подходе снижается. В настоящее время существует большое количество инструментов для компилиции LESS в CSS, начиная от компиляции на стороне сервера, заканчивая отдельными программными продуктами, один из которых мы сейчас с Вами рассмотрим.
Препроцессор Koala
Задача этого учебника заключается в быстром освоении метаязыка LESS, именно по этой причине, на начальном этапе, я предлагаю Вам для компиляции использовать программный продукт Koala.
Этот программный продукт позволит нам не тратить время на настройку среды, которая будет отслеживать изменение *.less файлов и компиляцию их в *.css файлы, что идеально для первичного знакомства с метаязыком LESS не отвлекаясь на технические особенности по настройке той, или иной среды.
Для начала нам необходимо перейти на официальный сайт продукта и скачать его последнюю версию и установить на свой компьютер.
После этого необходимо создать файл *.less и подключить в программе Koala папку в которой находится этот файл (нажмите на +), например, в моем случае папка less:
Вы должны увидеть в окне программы файл, который вы создали заранее. Кликните под название файла, как показано на изображение ниже, это позволит Вам выбрать путь куда будут компилироваться CSS файлы.
Я выбрал ту же папку в которой находится less файл, в результате у вас должно получиться следующее:
Теперь программа Koala будет отслеживать все изменения в less файле и при их изменении сразу будет проводить их компиляцию в css . После первой компиляции вы увидите в главном окне файл css , кликнув под который, при необходимости вы сможете по аналогии настроить путь в который будут сохраняться файлы css , но уже минифицированные (стили без пробелов в одну строку). Как правило, такие стили используются на «боевых» (готовых) проектах.
Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов «на лету».
Комментарии в LESS
По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:
// это однострочный комментарий /* это многострочный комментарий */ /* это многострочный комментарий в одной строке */
Будьте готовы к тому, что в зависимости от настроек компилятора, комментарии могут не сохраняться при компиляции из файлов *.less в *.css . Например, вышерассмотренный компилятор Koala удаляет однострочные комментарии при компиляции, это поведение по умолчанию доступно изменить в его настройках.
Приступая к изучению
Правила вложенности
© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.