подключение Less
Опции темы
Доброго времени суток.
Решил поближе познакомиться с less. Но сразу же возникла проблема с подключением
Вот как выглядит мой html
в корне html файла находятся файл styles.less и less.js ( в который я запихнул код с офф сайта https://raw.github.com/less/less.js/. s-1.4.1.min.js )
Открываю файл styles.less, прописываю там 1 свойство для проверки
И ничего не происходит.
Что я делаю не так ?
- 0
Dikucher
проверьте ещё разочек расположение файлов. Посмотрите через FireBug или оперу пути к файлам, какой файл не открывается и т.д.
| |
Спасибо сказали:
| |
|
|
|
Ну вообщем вопрос по прежнему открыт, почему же webkit не видит less ?
|
| |
Спасибо сказали:
| |
|
|
Проблема с web-kit остается открытой
|
Источник Не удается подключить LESS к проектуДелаю всё по науке — качаю less.min.js отсюда lesscss.ru, кладу в папку проекта, подключаю к страничке следующим образом: В styles.less у меня лежат стили в less, в less.min.js, соответственно, сам скрипт, но почему-то ничего не подключается. Браузер пишет следующую ошибку:
Вопрос — в чем же тут дело? less в файле валидный, проверено Winless.
1 ответ 1Большое спасибо за наводку, совершенно забыла про политику безопасности.:) Пока решала проблему локальным сервером, выяснила, что данный способ подключения стилей к проекту вообще не является оптимальным с точки зрения лишней работы, выполняемой клиентом, и лучше использовать альтернативный — собирать всё (и стили в том числе) в бандл, и подключать уже готовый файл js. На всякий случай, рецепт — для сборки я использовала Webpack. Для того, чтобы он прочитал стили в less, помимо Webpack, нужно установить загрузчики less-loader, сss-loader, style-loader, и настроить файл webpack.config.js следующим образом: В entry указывается файл, который надо собрать, а в output — файл, получаемый на выходе. В loader перечисляем загрузчики для обработки less и css, а в test пишем регулярку, по которой загрузчики находят, какой файл следует обработать. В файле app.js должен быть подключен файл со стилями: Теперь после запуска Webpack получаем файл bundle.js, содержащий всю js-логику, стили и зависимости, который и подключаем в index.html: Спасибо за ваш ответ на Stack Overflow на русском!
Также, обратите внимание на заметку в справочном центре о том, как писать ответы. Источник Не могу заставить работать less.jsЯ не могу заставить работать less.js и понятия не имею, почему. Вот HTML, который я пробовал: Файл less-1.0.18.min.js загружается с http: / /lesscss.googlecode.com/files/less-1.0.18.min.js. Все файлы находятся в одной папке. Понятия не имею, почему это не работает . Протестировано в Chrome 12.0.742.100 Изменить Пробовал последний файл less.js (less-1.1.3.min.js). Тот тоже не работал. Хорошо . Но только как обычный css, не менее специфичная разметка. Это не работает вообще: Кроме того, это не работает: Что за черт? Как мне заставить работать меньше? Обнаружил ошибку
4 ответа
Но что мы могли сделать, так это настроить локальную среду тестирования с помощью wamp (pc) или mamap (mac). Тогда все будет хорошо. К вашей ссылке css. Несмотря на то, что это было опубликовано некоторое время назад, я подумал, что добавлю кое-что для других людей, застрявших на этом. Источник LESS: программируемый язык стилейЧто такое LESS?LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию. Как использовать LESSЕсть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто. Используем LESS и Javascript файлДля начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт. Затем создадим файл с расширением .less и привяжем его с помощью такого кода: Удостоверьтесь, что вы прикрепили LESS файл перед JS. Компилируем LESS файлХотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака. Укрощаем мощь LESSНаконец давайте немного развлечемся – попишем LESS код. Как вы увидите код очень легко читать и понимать, так как используется сходный с CSS синтаксис. ПеременныеПеременные в LESS работают так же как в PHP, JS и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно. В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной. Нет ничего плохого в том, чтобы документировать ваши цвета также как здесь, это хорошая практика, проблема заключается в том, что документация не имеет ничего общего с функциональностью ваших стилей. Если вы решили изменить цвета после 2000 строки кода, а затем передумали на 3567 строчке, то будет чрезвычайно сложно исправить все цвета и документацию. Область видимости переменныхОбласть видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после. В этом примере LESS не будет сконвертирован из-за ошибки, color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально. Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон. Переменные в переменныхЕсли вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной. Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого. Константы и ПеременныеВажно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз. ОперацииВы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста: Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два. Управление цветомМоя любимая особе6нность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом. Цветовые операцииЕсли вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета. Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”. Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.
Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:
Цветовые функцииЕсть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.
Извлечение информации о цветеКаждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую. Это может показаться слишком мелочным – зачем нам нужна эта информация, когда мы можем просто ввести HEX значение? Если вы нормальный человек, то вы не сможете с ходу расшифровать HEX цвет. HEX значения отображают RGB спектр: первые два символа контролируют количество красного, следующие два — количество зеленого и последние два – количество синего. Новый цвет будет иметь тот же тон, но другие насыщенность и яркость. Результатом будет #c480bf, к которому гораздо труднее перейти от #e147d4 используя лишь HEX. Совмещение функцийLESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так: ВложенностьВо время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код: Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение. Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены. Примеси (mixins)Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны? И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис. В вышеприведенном коде мы определили элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите .tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси. Стили у элемента .submit — это скругленные углы наверху, белый цвет и красный фон (значение #333 переопределено). Примеси с параметрамиПримеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами! В вышеприведенном коде радиус у .tab равен 6px, а .submit элемент получит значение 3px. Стандартные значенияЕсли вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение. В этом примере .tab получит стандартное значение в 6px, а .submit – 3px. Множественные параметрыВы также можете использовать множественные параметры, чтобы определить более сложные примеси. В этом примере класс .read_more отформатирован с отступом 4px, фоновым цветом #e7ba64 и с border-radius рывным 0px. Используем все аргументы за разЕще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим. Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию: @arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет: Параметрические примеси без параметровТакже можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется. CSS вышеприведенного кода будет таким: Чтобы скрыть класс .alert нужно установить пустой параметр. Готовый CSS будет следующим: В основном это используется для уменьшения размера CSS файла. Пространство имёнПространство имён в языках программирования обычно используется для группировки сходных по функциональности элементов. Мы можем добиться подобного в LESS, объединяя наш код с помощью примесей. Начиная работу над новым сайтом, основанным на вашем фреймворке, вы можете добавить связку #my_framework и использовать ее не засоряя пространство имён. Также это отличный способ сделать возможным быструю смену и доработку тем. Если вы разрабатываете несколько тем для вашей компании, то для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки. Строковая интерполяцияСтроковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства. Это может быть полезно при создании централизованного фреймворка. ЭкранированиеИногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer. Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его. Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута. ИмпортКак и в обычном CSS вы можете импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис: Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером. КомметарииЕстественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша. Чего не хватает?Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят. Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл. ЗаключениеКак и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры? Источник |
Есть прекрасный метод выявления ошибок «Ловля одного льва в пыстыне» (может ошибся с названием). Делиш пополом ВЕСЬ код и проверяеш в какой части ошибка, и так далее PS. Подключи modernizr.js
