SASS компилятор для Sublime Text (Windows)?

Question

[automatik]

Есть ли подобный плагин для виндового Саблайма? Или как компилируете scss>css вы? Хороша ли для этого koala-app.com?

Answer 1

[Евгений Вольф]

Или как компилируете scss>css вы?

Думаю, оптимальный способ при соло-разработке - это NodeJS+Gulp+модули. Он умеет и SASS и много ещё чего, и не смотря на ряд его недостатков - работает он довольно таки быстро. В т.ч. Вы сможете перезагружать изменившееся страницы автоматически, автоматически собирать изменившееся SASS-файлы и т.д.

Плагин, например вот. Мануалов по настройке Gulp'а, его установке и т.д. - в интернете - как грязи.

Answer 2

[iBird Rose]

плагин же есть для саблайма
https://packagecontrol.io/packages/SASS%20Build
и чтобы он работал по сейву https://github.com/alexnj/SublimeOnSaveBuild

Answer 3

[Кирилл]

Установи Node.js (если ещё не установлен) с официального сайта.
Как писали выше если хочешь чтобы всё работало под ctrl+s установи ещё SublimeOnSaveBuild
Установи sass глобально:
npm install -g sass
После установки проверь:
sass --version
Установи minify глобально:
npm install -g minify
После установки проверь:
minify --version

Настройка Sublime Text: Открой Sublime Text. Перейди в Tools → Build System → New Build System. Вставь следующий код:

{
    "cmd": [
        "sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css",
        "&&", "minify", "${file_path}/${file_base_name}.css", ">", "${file_path}/${file_base_name}.min.css"
    ],
    "selector": "source.scss",
    "windows": {
        "shell": "true"
    }
}

Если что то не работает, возможно установлен ruby, который нужно удалить со старыми версия sass(могут находиться C:\Users\ПОЛЬЗОВАТЕЛЬ\AppData\Local\Microsoft\WindowsApps\ - удалить файлы sass т.е. sass.bat и пр...) в помощь
PowerShell: where sass
Если minify даёт ошибки, можешь использовать альтернативу — cleancss: и настроить под него
npm install -g clean-css-cli

Если необходимо чтобы файлы с расширениями .css и .min.css так же отправлялись на сервер с использованием SFTP то у меня есть некая наработка, сохраняем файл с названием old-sftp-auto-upload-scss.py или через консоль Build: New Build System, или Вы можете использовать через SFTP: Monitor File

import sublime
import sublime_plugin
import os
import re
import time

class OldSftpAutoUploadScss(sublime_plugin.EventListener):
	def is_remote_file(self, file_name):
		"""Проверяет, является ли файл удалённым (с наличием конфигурации SFTP)."""
		while file_name != os.path.abspath(os.sep):
			file_name = os.path.dirname(file_name)
			sftp_config = file_name + '/sftp-config.json'
			if os.path.exists(sftp_config):
				return True
		return False

	def wait_for_file(self, file_path, timeout=5):
		"""Ожидает появления файла в течение заданного времени (в секундах)."""
		elapsed_time = 0
		while elapsed_time < timeout:
			if os.path.exists(file_path):
				return True
			time.sleep(0.5)  # Пауза в 0.5 секунды перед проверкой снова
			elapsed_time += 0.5
		return False

	def on_post_save_async(self, view):
		"""После сохранения файла компилируем и загружаем файлы на сервер."""
		file_name = view.file_name()
		window = view.window()

		# Проверяем, если это .scss файл
		if self.is_remote_file(file_name) and file_name.endswith('.scss'):
			# Путь к компилированному файлу .css
			css_file = file_name.replace('.scss', '.css')
			# Путь к скомпилированному и минифицированному файлу .min.css
			min_css_file = file_name.replace('.scss', '.min.css')

			# Ожидаем появления .css и .min.css файлов
			if self.wait_for_file(css_file) and self.wait_for_file(min_css_file):
				# Загружаем .css файл, если он существует
				if os.path.exists(css_file):
					new_view = window.open_file(css_file)
					window.run_command("sftp_upload_file")
					new_view.close()

				# Загружаем .min.css файл, если он существует
				if os.path.exists(min_css_file):
					min_view = window.open_file(min_css_file)
					window.run_command("sftp_upload_file")
					min_view.close()