Как установить меньше в возвышенном тексте 3

Обновлено: 04.07.2024

Конечный эффект заключается в том, чтобы писать меньше в sublimeText3 с подсветкой синтаксиса,
и nodejs будет автоматически компилировать меньше для создания файлов css каждый раз, когда вы нажимаете crtl+s для сохранения

1. Установите плагин Sublime

(1) Установите подключаемый модуль LESS:
Поскольку Sublime не поддерживает подсветку синтаксиса Less,
сначала установите этот подключаемый модуль,

(2) Установка плагина LESS2CSS:
less2css произносится на самом деле меньше, чем css
этот плагин эффекта
автоматически генерируется с файлами css с тем же именем при сохранении меньшего количества файлов;
При сохранении меньшего количества файлов появляется сообщение об ошибке компиляции;
следующая партия скомпилирует каталог вашего проекта. Все файлы меньшего размера являются файлами css.

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

2. Установите Node.js

3. Установить меньше

Выполнить -cmd:
ввести командную строку:

-g означает менее глобальную установку

Позже при создании меньшего файла в Sublime будет ошибка
LESS: невозможно интерпретировать аргумент clean-css

Это необходимо, потому что плагин
для установки плагина less-plugin-clean-css
командная строка:

Затем перезапустите возвышенное, и все готово!

советы1:

Если это не решит проблему, используйте метод 2. Загрузите его вручную
, вы можете выполнить поиск непосредственно на github, загрузить два подключаемых модуля или Baidu
выбрать «Настройки» в меню «sublimeText» — открыть подключаемый модуль браузера. -в папке плагинов
после разархивирования скаченных плагинов кинул в стадо все нормально

советы2:

После компиляции less css сжимается в одну строку

Когда мы напишем меньше после нажатия ctrl + s, чтобы сохранить возвышенный текст в
снова, чтобы увидеть, что наш css обнаружит, что он сжат в одну строку, вот так:

На этот раз, как это сделать, очень просто, изменить настройки плагина less2css сможет
выбрать меню sublimeText:

Китайская версия: Настройки→Настройки плагина→Less2Css→Настройки по умолчанию
Английская версия: Настройки → Настройки пакета → Less2Css → Настройки по умолчанию

Откройте настройки по умолчанию:

[Примечание для версии для Mac]

Настройки по умолчанию в версии для Mac нельзя изменить напрямую. Вам необходимо вставить содержимое в Настройки-По умолчанию в соответствующий Настройки-Пользователь, а затем изменить его.

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

Это руководство должно работать на всех версиях Windows и всех версиях Sublime Text.

Откройте командную строку от имени администратора и введите: npm install -g less

После этого, если вам нужна поддержка минимизации CSS, введите: npm install -g less-plugin-clean-css

Откройте SublimeText и перейдите в Инструменты -> Система сборки -> Новая система сборки

Измените систему сборки в соответствии с вашими потребностями. Вот три разных варианта. Просто вставьте текст и сохраните файл как «LESS.sublime-build» в предложенном месте по умолчанию.

Создание файлов .css и .min.css

Создать только файл .min.css

Создать только файл .css

После этого выберите Tools -> Build System -> LESS. Теперь вы можете создавать файлы .less в Sublime, нажав CTRL+B. Это создаст файлы CSS по вашему выбору в той же папке, что и ваш файл .less. Он перезапишет все предыдущие файлы с таким же именем.

Если вы когда-нибудь захотите отредактировать настройки системы сборки, вы можете найти файл по адресу \Sublime Text 3\Data\Packages\User\LESS.sublime-build

Бонус!

Если вы также хотите подсветку синтаксиса МЕНЬШЕ, сделайте следующее:

Откройте SublimeText и перейдите в «Настройки» -> «Управление пакетами»

Выберите "Управление пакетами: Установить пакет"

Введите "LESS" и найдите пакет с надписью "LESS подсветка синтаксиса"

После того, как вы установили пакет, перейдите в Вид -> Синтаксис -> МЕНЬШЕ

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

EDIT: этот метод не предназначен для замены средств выполнения задач. Вы должны использовать средство запуска задач, такое как Grunt, если вы работаете с более крупными проектами. Я просто написал это, потому что был заинтригован и не смог найти работающий плагин для этого. Его легко настроить, и он может сэкономить время, когда вам нужно скомпилировать файл всего пару раз. Я не хотел обидеть вас или то, как вы привыкли работать.

LESS уже давно является популярным способом упростить написание CSS, но внедрить его в рабочий процесс не всегда просто.Некоторые дизайнеры используют автономные приложения, такие как CodeKit или SimpLESS, для компиляции своих файлов LESS в готовый для браузера CSS, но я предпочитаю более комплексный подход. К счастью, у Sublime Text — моего любимого текстового редактора — есть несколько доступных расширений для поддержки LESS.

Я предполагаю, что у вас уже установлен Sublime Package Control, так как он в значительной степени является данностью для пользователей Sublime Text.

Шаг 1. Добавление подсветки синтаксиса

Я не могу представить, почему кто-то не хочет, чтобы их файлы LESS имели правильную подсветку синтаксиса, поэтому вы, вероятно, захотите установить пакет LESS-sublime, который вы можете найти в Sublime Package. Управление в разделе «МЕНЬШЕ».

Шаг 2. Установка LESSC

Теперь вам нужно установить компилятор LESS, но сначала вам нужно получить пару зависимостей.

Сначала загрузите и установите Node.js. NPM (Node Package Manager) также должен быть установлен автоматически, так что теперь вы должны быть готовы к установке LESSC. Просто выполните следующую команду:

Шаг 3. Установка системы сборки LESS

Чтобы файлы LESS были скомпилированы в CSS, вам необходимо установить пакет LESS-build. После правильной настройки добавляется система сборки для LESS, позволяющая обрабатывать файлы нажатием клавиш Control+B (Command+B для пользователей Mac).

После того, как вы установили пакет, вам нужно выполнить небольшую настройку.

Откройте каталог пакетов, введя «обзор пакетов» в палитре команд и выбрав папку LESS-build.
Запустите файл changeLESSBuildType.bat (Windows) или changeLESSBuildType.sh (Mac/Linux), чтобы установить режим сборки. При появлении запроса выберите вариант номер два ("перезапись каталога").
В своем проекте выберите «МЕНЬШЕ» в меню «Инструменты» > «Создать систему».

Шаг 4. Использование новой настройки

Чтобы продемонстрировать, как работает готовая установка, я создал небольшой проект в Sublime Text. Мой простой index.html ссылается на css/mysite.css как на таблицу стилей. Это скомпилированный вывод многих файлов LESS, которые находятся в каталоге less.

Файл less/mysite.less, который компилируется в css/mysite.css, когда я переключаюсь на него и нажимаю Command+B, выглядит так:

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

Подключаемый модуль Sublime Text 2 и 3 для компиляции меньшего количества файлов в CSS при сохранении

Подключаемый модуль Sublime Text 2 и 3 для компиляции меньшего количества файлов в CSS при сохранении. Требуется установка lessc по пути PATH.

Автоматическая компиляция less -> css при сохранении при редактировании файла .less в возвышенном
Сообщает об ошибках компиляции
Скомпилировать все файлы меньшего размера в каталоге в файлы css

Примечание. Этот плагин требует, чтобы lessc был в вашем пути выполнения

Установите плагин

Требования к установке

Less2Css требует, чтобы lessc компилировал less в css.

Mac OS X / Linux (Ubuntu/Debian…)

Необязательно: для использования минификации вам понадобится минификатор. Установите less-plugin-clean-css или аналогичный.

Окна

Клонировать less.js-windows
Добавьте путь к своим окнам less.js в переменную среды PATH (как это сделать?).

less2css можно настроить на двух уровнях. Есть пользовательские настройки, к которым вы можете получить доступ через Preferences\Package Settings\less2css. Это ваши глобальные настройки. Ниже вы найдете описание всех различных настроек. Второй уровень, на котором вы можете настроить less2css, находится на уровне проекта. Если у вас есть файл проекта Sublime Text с расширением .sublime-project, вы можете переопределить свои пользовательские настройки только для этого проекта. Это будет описано в конце этой главы.

автокомпиляция

Допустимые значения: true и false . Если для этого параметра установлено значение true, плагин будет компилировать ваш LESS-файл каждый раз, когда вы его сохраняете (в противном случае вы можете скомпилировать его из пункта меню Sublime «Инструменты» > «Less > Css» > «Скомпилировать этот файл в css»).

создатьCssSourceMaps

При значении true будет создана исходная карта css.

отключитьПодробный

Этот параметр позволяет отключить параметр подробного описания, который используется по умолчанию.Единственный раз, когда вы можете захотеть / нужно отключить это, — это использовать ruby gem less (который не поддерживает --verbose).

lessBaseDir

Эта папка используется только при одновременной компиляции всех LESS-файлов с помощью Инструменты\Less>Css\Компилировать все less в базовом каталоге less в css. Это может быть абсолютный путь или относительный путь. Относительный путь удобен, когда ваши проекты всегда используют одну и ту же структуру, например, папка с именем less для хранения всех ваших LESS-файлов. При компиляции всех файлов одновременно обрабатываются все подпапки в базовой папке.

lesscCommand

Этот параметр можно использовать для указания другого компилятора. Если оставить его пустым, будет использоваться компилятор по умолчанию с именем lessc.

игнорировать префиксные файлы

Допустимые значения: true и false . Если для этого параметра установлено значение true, подключаемый модуль не будет компилировать файлы, имена которых начинаются с символа подчеркивания ( _ ), когда:

сохранение и автокомпиляция установлены на true
сборка всех LESS-файлов с помощью Инструменты\Less>Css\Скомпилируйте все less в базовом каталоге less в css.

Вы по-прежнему можете скомпилировать файл через Инструменты\Less>Css\Компилировать этот файл меньшего размера в css или соответствующий ярлык.

основной_файл

Когда вы указываете основной файл, только этот файл будет скомпилирован при сохранении любого LESS-файла. Это особенно полезно, если у вас есть один LESS-файл, который импортирует все остальные LESS-файлы. Обратите внимание, что этот параметр используется только при компиляции одного LESS-файла, а не при компиляции всех LESS-файлов в базовой папке LESS с помощью Инструменты\Less>Css\Компилировать все less в меньшем базовом каталоге в css. Примечание. Если ваш основной файл импортирует другие файлы, другие файлы должны находиться в той же папке, чтобы less2css автоматически компилировал ваш основной файл при редактировании импортированного файла.

уменьшить

По умолчанию: True Допустимые значения: true/false или строка, которая передает опцию минимизации в lessc (например, --clean-css). Когда для этого параметра установлено значение true, компилятору LESS будет дано указание создать уменьшенный файл CSS. Рекомендуемый минимизатор less — это npm install -g less-plugin-clean-css, который является обязательной зависимостью, когда minify=true .

minName

Если для параметра minify задано значение true, компилятор LESS добавит .min к созданной уменьшенной версии файлов css: default.less будет скомпилирован в уменьшенный default.min.css .

ВыходнойКаталог

Используйте этот параметр, чтобы указать папку, в которую будут помещены файлы CSS. Поддерживаются следующие значения:

Пустая строка или ./ Используйте пустую строку или ./, чтобы файл CSS хранился в той же папке, что и файл LESS.

Абсолютный путь Укажите абсолютный путь к каталогу, в котором должен храниться файл CSS, например. /home/user/projects/site/assets/css

Относительный путь Укажите частичный путь к каталогу, в котором должен храниться CSS, например. ./CSS. Это сохранит файлы CSS в папке CSS в корне проекта.

автоматическая настройка

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

Когда ваши файлы LESS хранятся непосредственно в папке с именем css\less (а не в каких-либо подпапках), скомпилированные файлы CSS будут помещены в папку css.

После компиляции получится следующее:

Когда ваши LESS-файлы хранятся в папке с именем less и в ее родительской папке есть подпапка с именем css, скомпилированные файлы CSS будут помещены в папку css.

После компиляции получится следующее:

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

настройка тени

Он сгенерирует ту же структуру, только с css в качестве корневой папки, например:

выходной файл

Когда вы указываете выходной файл, это имя файла будет использоваться для компиляции всех файлов LESS. Содержимое файла будет перезаписано после каждой компиляции. Когда вы создаете все LESS-файлы в базовой папке LESS с помощью Инструменты \ Less>Css \ Компилируете все less в меньшем базовом каталоге в css, у вас будет только CSS последнего скомпилированного файла! Назначьте пустую строку, чтобы каждый файл LESS был скомпилирован в его аналог CSS, т. е. site.less станет site.css.

showErrorWithWindow

Установите значение true, чтобы ошибки синтаксического анализа отображались во всплывающем окне

автопрефикс

Установите значение true, чтобы добавить префиксы в css после преобразования из less

тихо

Установите значение true, чтобы запретить отображение предупреждений.

Вы можете использовать параметры конфигурации, описанные выше, и применить их только к проекту, над которым вы работаете. Для этого вам нужно вручную изменить файл .sublime-project. Файл проекта по умолчанию выглядит следующим образом:

Вы можете добавить настройки less2css следующим образом:

Теперь пользовательские настройки autoCompile и minify будут переопределены настройками проекта.

Краткий список последних обнаруженных проблем

проблемы при загрузке и установке less2css и node

Я полагаю, что загрузил все необходимое программное обеспечение, но путь к файлу узла указан правильно, возможно, это код x?

Читайте также: