diff --git a/Context.sublime-menu b/Context.sublime-menu new file mode 100644 index 0000000..fe653f7 --- /dev/null +++ b/Context.sublime-menu @@ -0,0 +1,4 @@ +[ + { "caption": "-", "id": "file" }, + { "command": "compile_scss", "caption": "Compile This Scss..." } +] \ No newline at end of file diff --git a/Main.sublime-menu b/Main.sublime-menu new file mode 100644 index 0000000..f6b3a69 --- /dev/null +++ b/Main.sublime-menu @@ -0,0 +1,34 @@ +[ + { + "caption": "Preferences", + "mnemonic": "n", + "id": "preferences", + "children": + [ + { + "caption": "Package Settings", + "mnemonic": "P", + "id": "package-settings", + "children": + [ + { + "caption": "Scss Compiler", + "children": + [ + { + "command": "open_file", + "args": {"file": "${packages}/scss-compiler/ScssCompiler.sublime-settings"}, + "caption": "Settings – Default" + }, + { + "command": "open_file", + "args": {"file": "${packages}/User/ScssCompiler.sublime-settings"}, + "caption": "Settings – User" + } + ] + } + ] + } + ] + } +] diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..d989ed1 --- /dev/null +++ b/Readme.md @@ -0,0 +1,27 @@ +# scss-compiler +> 可用于对scss文件进行简单的编译/压缩, 而不用安装各种前端工程化工具(webpack等)。 + +## 出现的契机 +> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。 +> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个Sublime的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录)。 + + +## 兼容性 +> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux下测试过, 其他的系统, 请自行测试,有什么问题, 可以提issue。 + +## 依赖 +> 既然是scss编译的, 当然就依赖于scss模块。 +> scss模块, 可以使用js版的, 也可以使用ruby版的。 + +```bash +# 这是js版的, 可以使用npm来安装 +sudo npm i node-sass -g + +# 这是ruby版的, 可以使用 gem来安装 +sudo gem install sass +``` + + +## 插件安装 +> 目前只能通过下载方式, 复制到sublime的插件目录,进行安装使用。 + diff --git a/ScssCompiler.sublime-settings b/ScssCompiler.sublime-settings new file mode 100644 index 0000000..c464a87 --- /dev/null +++ b/ScssCompiler.sublime-settings @@ -0,0 +1,19 @@ +{ + // Auto compile the scss file into css on file save? + // default saving rule: demo.scss -> demo.css + // It will be saved in current dir. + "compile_on_save": true, + + //It will compress css file if it set to be true + "compress_on_compile": true, + + // Only work on compress_on_compile set to false + // value can be one of these three: + // nested/compact/expanded + "compile_style": "expanded", + + + // How to link generated output to the source file. + "sourcemap": false + +} \ No newline at end of file diff --git a/scss-compiler.py b/scss-compiler.py new file mode 100644 index 0000000..23a0171 --- /dev/null +++ b/scss-compiler.py @@ -0,0 +1,98 @@ +import sublime +import sublime_plugin +import subprocess +import re +import os + + +def get_setting(key, default=None): + + settings = sublime.load_settings('ScssCompiler.sublime-settings') + os_specific_settings = {} + + return os_specific_settings.get(key, settings.get(key, default)) + + +def compile_scss(scss_file): + + shoud_compress = get_setting('compress_on_compile') + + compile_style = get_setting('compile_style') + + sourcemap = get_setting('sourcemap') + + + args = ['scss', '-C', '-t'] + + if shoud_compress: + args.append('compressed') + else: + args.append(compile_style) + + if sourcemap: + args.append('--sourcemap=auto') + else: + args.append('--sourcemap=none') + + args.append(scss_file) + + cssfile = scss_file[0:-4] + 'css' + + args.append(cssfile) + + pipe = subprocess.Popen(args, stderr=subprocess.PIPE) + (out, err) = pipe.communicate() + return err.decode('utf-8') + + + +class ScssCompiler(sublime_plugin.EventListener): + def on_post_save(self, view): + + shoud_compile = get_setting('compile_on_save') + scss_file = view.file_name() + + if not shoud_compile: + return + + if not re.search(r'\.scss$', scss_file): + return + + if os.path.basename(scss_file) == 'var.scss': + return + + err_msg = compile_scss(scss_file) + + if err_msg: + view.show_popup(err_msg) + + +class __CompilerCommand(): + def get_path(self, paths): + if paths: + return paths[0] + elif self.window.active_view() and self.window.active_view().file_name(): + return self.window.active_view().file_name() + elif self.window.folders(): + return self.window.folders() + else: + sublime.error_message('No scss file to Compile...') + return False + + +class CompileScssCommand(sublime_plugin.WindowCommand, __CompilerCommand): + + def run(self, paths=[]): + + path = self.get_path(paths) + if not path: + return + + print(path) + + if not re.search(r'\.scss$', path): + sublime.error_message('This is not a scss file ...') + return + + compile_scss(path) + \ No newline at end of file