首个正式版
							parent
							
								
									5b3d80a90a
								
							
						
					
					
						commit
						bc7f1ce030
					
				|  | @ -0,0 +1,4 @@ | ||||||
|  | [ | ||||||
|  |     { "caption": "-", "id": "file" }, | ||||||
|  |     { "command": "compile_scss", "caption": "Compile This Scss..." } | ||||||
|  | ] | ||||||
|  | @ -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" | ||||||
|  |                             } | ||||||
|  |                         ] | ||||||
|  |                     } | ||||||
|  |                 ] | ||||||
|  |             } | ||||||
|  |         ] | ||||||
|  |     } | ||||||
|  | ] | ||||||
|  | @ -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的插件目录,进行安装使用。 | ||||||
|  | 
 | ||||||
|  | @ -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 | ||||||
|  | 
 | ||||||
|  | } | ||||||
|  | @ -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) | ||||||
|  |          | ||||||
		Loading…
	
		Reference in New Issue
	
	 宇天
						宇天