Установка less: Установка препроцессора LESS | Liblessons

Содержание

UIkit 3 на русском. Уроки, примеры, разметка.

Как переопределять стили UIkit и создавать собственные темы с Less.

UIkit основан на Less. После установки UIkit в вашем распоряжении будут все исходники. Вы можете компилировать их и создавать собственные темы, а затем включать их в сборки Документация по Less на английском или на русском.

Чтобы начать использовать UIkit и Less, вам нужно скомпилировать исходники Less в CSS. Есть два подхода: настроить собственный процесс сборки или использовать готовые сценарии сборки, включенные в UIkit.

Использование пользовательской сборки

Для начала работы импортируйте основные стили фреймворка (uikit.less) и тему по умолчанию (uikit.theme.less) в свой проект. Затем скомпилируйте файлы любым удобным для вас способом. Если вы не знакомы с Less, прочтите официальную документацию Less на английском или на русском.

// Импорт UIkit стандартной темы (или файла uikit. less только со стилями ядра)
@import "node_modules/uikit/src/less/uikit.theme.less";

// Разместите здесь ваш пользовательский код, например, примеси и переменные.
// Раздел с информацией о создании тем будет ниже на этой странице.

Использование готовых сценариев сборки

Для переопределения стилей UIkit можно использовать встроенную сборку для создания кастомизированной версии CSS. Затем все изменения вы сможете добавить в свой проект и больше к этому не возвращаться.

Для включения своей темы на Less в сборку, создайте директорию /custom и разместите в ней пользовательские файлы.

Внимание Директория /custom будет добавлена в .gitignore, чтобы не попасть в репозиторий UIkit. Но вы можете добавить свои наработки из папки /custom в собственный Git репозиторий. В этом случае ваши темы будут иметь версионность и не мешать основным файлам UIkit.

Создайте файл с именем вида /custom/my-theme. less (назовите как хочется) и импортируйте файлы ядра (uikit.less) с применением встроенной темы (uikit.theme.less) или без нее.

// Импорт UIkit стандартной темы UIkit (или только файл ядра uikit.less с базовыми стилями)
@import "../src/less/uikit.theme.less";

// Разместите здесь ваш пользовательский код, например, примеси и переменные.
// Раздел с информацией о создании тем будет ниже на этой странице.

Для компиляции проекта UIkit и созданной вами темы в CSS, запустите встроенный таск compile .

# Запустите один раз для установки зависимостей
yarn install

# Компиляция всех исходников, включая пользовательскую тему
yarn compile

# Привычный таск Watch следит за изменениями файлов и компилирует на лету при каждом изменении файла
yarn watch

Сгенерированные файлы размещаются в папке /dist/css.

Внимание Кастомная тема также доступна в тестовых файлах, просто введите в вашем браузере адрес / test и выберите свою тему в раскрывающемся меню.

Мы успешно создали, настроили и умеем компилировать пользовательский код Less. Приступаем к созданию тем. Если вам ранее не приходилось пользоваться Less, документация в помощь. Но прежде ознакомьтесь с нашими рекомендациями.

Использование переменных Less

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

/src/less/components/variables.less:

// Значение по умолчанию
@global-link-color: #4091D2;

Нашли значение, а теперь перезаписываем его в своей теме по адресу /custom/my-theme.less:

// Новое значение
@global-link-color: #DA7D02;

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

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

Чтобы избежать оверхеда, мы используем примеси(миксины) из Less, которые подключаем к предопределенным селекторам из исходников UIkit и применяем дополнительные свойства. Селекторы не должны дублироваться во всех файлах. К тому же, глобальные изменения можно сделать проще.

Найдите правило, которое вы хотите дополнить, например, ознакомьтесь с Less файлом какого-либо компонента, например /src/less/components/card.less изменим стили компонента Card:

// CSS правила
.uk-card {
    position: relative;
    box-sizing: border-box;

    // разрешаем добавление новых свойств
    .hook-card;
}

Теперь перейдите в свою тему по адресу

/custom/my-theme.less и добавьте новые стили:

// добавляем новый стиль
.hook-card() { color: #000; }

Расширенные хуки

Если не нашлось нужной переменной или хука, вы также можете создать свой собственный селектор. Для этого используйте .hook-card-misc hook и создайте свой собственный селектор. Это позволит вам сортировать ваши новые селекторы в нужных местах скомпилированного файла CSS. Просто добавьте новые строки в файл своей темы в /custom/my-theme.less:

// Дополнительная примесь
.hook-card-misc() {

    // новое правило
    .uk-card a { color: #f00; }
}

Выключить компонент Inverse

Компонент Inverse добавляет стили для инверсии стилей. Если вы не планируете использовать инверсию стилей в своем проекте, просто отключите ее в Less. Для отключение найдите переменную Less color-mode (например, @card-primary-color-mode), и задайте ей значение none.

Пример отключения инверсии:

@inverse-global-color-mode: none;

Еще можно отключить режим инверсии для отдельных компонентов:

// Card
@card-primary-color-mode: none;
@card-secondary-color-mode: none;

// Navbar
@navbar-color-mode: none;

// Off-canvas
@offcanvas-bar-color-mode: none;

// Overlay
@overlay-primary-color-mode: none;

// Section
@section-primary-color-mode: none;
@section-secondary-color-mode: none;

// Tile
@tile-primary-color-mode: none;
@tile-secondary-color-mode: none;

В приведенных выше примерах мы добавляли все пользовательские стили в файл /custom/my-theme. less. Такой подход имеет место быть лишь в случае небольших изменений. Если стилей много, рекомендуем использовать этот файл в качестве точки входа (entry) для компилятора Less. Создайте отдельные файлы и папки для каждого компонента и переопределите стили там. Если у вас нет опыта проектирования архитектуры, используйте в качестве примера структуру проекта UIkit здесь

/src/less/uikit.theme.less.

Внимание В примере мы предполагаем, что вы создаете тему в каталоге /custom, но это может быть не так. Вы можете использовать собственные пути и настроить кастомный процесс сборки проекта.

custom/

    <!-- вставляем входной файл для компилятора Less -->
    my-theme.less

    <!-- директория для хранения файлов Less -->
    my-theme/

        <!-- Файл импорта всех компонентов директории -->
        _import.less

        <!-- отдельный файл кастомизированного компонента -->
        accordion.  less
        alert.less
        ...

Точки входа для компилятора Less, /custom/my-theme.less:

// Ядро фреймворка
@import "../../src/less/uikit.less";

// Тема
@import "my-theme/_import.less";

В папке вашей темы лежит один файл, который импортирует элементы дочерних папок custom/my-theme/_import.less:

@import "accordion.less";
@import "alert.less";
// ...

Внимание С помощью этой настройки вы можете удалить операторы импорта компонентов, которые вы использовать не планируете. Это уменьшит выходной CSS файл. Убедитесь в правильности порядка импорта, как указано в src/less/components/_import.less.

css — Подключение less — Stack Overflow на русском

Вопрос задан 8 лет 11 месяцев назад

Изменён 5 лет 6 месяцев назад

Просмотрен 8k раз

<!DOCTYPE html>
<html>
<head>
<title>site</title>
<meta charset="cn-1251" />
<link rel="stylesheet/less" type="text/css" href="styles.  less">
<script src="less.js" type="text/javascript"></script>        
</head>
<body >
</body>
</html>

хочу подключить less

@color: #ccc;
body{
background: @color;
}

не могу запустить на google chrome

css
less

LESS просто так не подключаеться как стандартный CSS

Качаем скрипт — LESSCSS.ORG

Подключаем его к HTML — две строчки кода:

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

(можем писать на less, только не в Хром)
Качаем Winless — WINLESS.ORG
Устанавливаем и конвертируем наш style.less > style.css (В папке проекта должно получиться 2 файла .less и .css)

В код добавляем +1 строчку:

<link rel="stylesheet" type="text/css" href="style. css">

Результат:

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

И работает в Chrome! (если туго объяснил: гуглим, хабрим, тостим и т.д)

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

А вообще, попробуйте какой-нибудь компилятор локальный. Типа проги WinLess. Тут вот на обожаемом вебрефе есть о ней статья — https://webref.ru/layout/less/compile/winless

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как установить и запустить lessc поверх node.

js и Windows?

Задавать вопрос

спросил 9 лет, 10 месяцев назад

Изменено 3 года, 9 месяцев назад

Просмотрено 39 тысяч раз

Привет, я изучаю LESS и хочу установить lessc на свою Windows 7.

Следуя этому руководству http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive

Первый шаг — я загрузил и установил node.js (node-v0.10.5- x64.msi).

Затем в консоли я запустил

 npm install less -g

Я получил следующее:

 npm http GET https://registry.npmjs.org/less
нпм http 304 https://registry.npmjs.org/less
npm http ПОЛУЧИТЬ https://registry.npmjs.org/ycssmin
нпм http 304 https://registry.npmjs.org/ycssmin
C:\Users\Me\AppData\Roaming\npm\lessc -> C:\Users\Me\AppData\Roaming\npm\node_modules\less\bin\lessc
less@1. 3.3 C:\Users\Me\AppData\Roaming\npm\node_modules\less
+-- [email protected]

Затем я запустил в той же консоли следующее:

 lessc style.less > style.css

Но у меня есть

‘lessc’ не распознается как внутренняя или внешняя команда, исполняемая программа или пакетный файл.

Не знаю, где я ошибся. Я гуглил, но кажется, что там слишком много всего, не уверен, какой из них правильный. Сделал много тестов, безрезультатно.

Может ли кто-нибудь сказать мне, как это сделать, или дать мне ссылку на какое-то место с подробной и последней информацией об установке для Windows?

windows
node.js
меньше

В консоли выполните следующее:

 node C:\Users\Me\AppData\Roaming\npm\node_modules\less\bin\lessc style.less > style.css

style.less должен находиться в каталоге консоли.

шаг 1: npm установить меньше -g

шаг 2: нпм меньше --save-dev

, чтобы заставить lessc работать, вы должны добавить

C:\Users\Me\AppData\Roaming\npm

на путь

Я думаю, вы могли бы добавить папку bin в системные свойства -> дополнительные -> переменные среды и добавить весь путь к папке bin, отредактировав переменную Path.

Если вы только что установили node.js, переменная Windows PATH не будет обновляться ни в одном из запущенных окон CMD. Попробуйте закрыть CMD и снова открыть его!

Я исправил эту проблему с помощью Node Version Manager (nvm) для установки и использования последней версии Node. js

nvm install last
nvm use 12.4.0

После этого я перешел к своему проекту папку и набрал:
npm install less -g и затем
npm i less --save-dev

Наконец, я набрал lessc less/index.less css/index.css , чтобы скомпилировать свой less.

Если вы используете Windows, не забудьте открыть консоль командной строки от имени администратора.

Потратив несколько часов на поиски компиляции меньшего количества файлов, я получил очень простой ответ:

загрузить node-v0.10.26-x64.msi для пользователей Windows -> установить его -> затем
перейдите в любую папку (в командной строке), где находятся файлы *.less, и выполните команду «lessc styles.lsss > styles.css». (Пример: в командной строке less — это моя папка less, в которой существуют файлы *.less) D:\less>lessc styles.less > styles.css
теперь вы получите файлы styles.css, созданные автоматически. Откройте и посмотрите файл styles.css

Ну, на вашем компьютере должен быть установлен NodeJS, используйте эту ссылку, чтобы загрузить и установить его.

После установки обязательно перезагрузите компьютер. Затем проверьте, правильно ли он установлен, запустив «node -v» и «npm -v» в CMD.

Как только это будет сделано, запустите «npm install less -g», и вы готовы скомпилировать файлы less.

Просто зайдите в каталог, где находятся ваши файлы, и запустите «lessc style.less style.css»

Больше можно найти по этой ссылке.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

ruby - Как установить компилятор командной строки less css?

спросил 11 лет, 2 месяца назад

Изменено 8 лет, 10 месяцев назад

Просмотрено 40 тысяч раз

Насколько я понимаю и поправьте меня, если я ошибаюсь, мне нужно установить ruby или NPM, чтобы заставить работать компилятор less css.

У меня не установлен Ruby, и я не совсем уверен, как довести мой компьютер до этого состояния. Я также хочу минимизировать свой след; установка минимального количества библиотек ruby, если это возможно (потому что я никогда не буду использовать ruby, за исключением случаев, когда я запускаю меньше).

Какие шаги нужно предпринять, чтобы меньше работать и работать?

Прежде чем вы проголосуете против, я знаю, что была эта предыдущая тема (Меньше установки компилятора CCS).

У этого человека уже установлены некоторые другие пакеты. Я пытаюсь выяснить все пакеты, необходимые для достижения этой цели.

Или, если бы кто-нибудь мог указать мне нужную документацию, я был бы в восторге!

рубиновый
css
нпм

Я не совсем уверен, хотите ли вы с помощью компилятора что-то, что будет автоматически компилировать файлы less на лету или на сервере. Потому что в противном случае вы можете

 $ sudo apt-get установить yui-compressor без узлов

(В Ubuntu 12.04 пакет без узлов называется без узлов .)

а затем

 $ lessc example.less > compile_example.css
$ yui-compressor -o small_and_compiled_example.css скомпилированный_example.css

Самый простой способ — установить nodejs с его менеджером пакетов npm. Nodejs находится в репозиториях, но он немного устарел, вместо этого вы можете использовать этот ppa:

 sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-получить обновление
sudo apt-get установить nodejs

(https://github.com/joyent/node/wiki/Installing-Node.js-через-package-manager) Особенно, если вы занимаетесь JavaScript/веб-разработкой, nodejs сегодня очень важен.

На данный момент это просто (как указано на http://lesscss.org)

 npm install -g less

Вероятно, поскольку вы устанавливаете глобально (для команды), вам нужно добавить к этому комментарию sudo .

Прежде всего, нужно сказать несколько вещей:

Ruby в Debian (и, соответственно, в Ubuntu) имеет ужасную настройку с ruby.
Таким образом, «рекомендуемым» решением является компиляция и установка вашей собственной версии ruby — это делается довольно безболезненно с помощью railsready .

wget —no-check-certificate https://raw.github.com/joshfng/railsready/master/railsready.sh && bash railsready.sh

Что этот скрипт сделает для вас, так это загрузит ruby, скомпилирует его и затем установит для вас. После этого нужно запустить exec $SHELL , а потом можно установить less с gem install less (sudo не нужен)

В Ubuntu 12.04 версия LessCSS в репозитории — 1.2.2. Чтобы получить LessCSS 1.3.3, вы можете использовать диспетчер пакетов Node:

 sudo apt-get install npm

, а затем

 npm установить меньше

После этого вам придется изменить PATH или использовать полный путь к компилятору less:

 ~/node_modules/less/bin/lessc

Существует также компилятор python-lesscpy , но он не работает, по крайней мере, для Bootstrap 3.

Установка less: Установка препроцессора LESS | Liblessons

UIkit 3 на русском. Уроки, примеры, разметка.

Использование пользовательской сборки

Использование готовых сценариев сборки

Использование переменных Less

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

Расширенные хуки

Выключить компонент Inverse

css — Подключение less — Stack Overflow на русском

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Как установить и запустить lessc поверх node.

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

ruby - Как установить компилятор командной строки less css?

Добавить комментарий Отменить ответ

Рубрики

Рубрики

Установка less: Установка препроцессора LESS | Liblessons

UIkit 3 на русском. Уроки, примеры, разметка.

Использование пользовательской сборки

Использование готовых сценариев сборки

Использование переменных Less

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

Расширенные хуки

Выключить компонент Inverse

css — Подключение less — Stack Overflow на русском

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Как установить и запустить lessc поверх node.

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

ruby ​​- Как установить компилятор командной строки less css?

Добавить комментарий Отменить ответ

Рубрики

Рубрики

ruby - Как установить компилятор командной строки less css?