sublime text 3 中 安装sass插件 以及配置和监视

sublime text 3 中 安装sass插件 以及配置和监视

首先得在电脑上安装sass
方法推荐1：https://blog.csdn.net/u014182411/article/details/77319639
方法推荐2：https://www.sass.hk/install/

下面重点说说sublime中安装sass的问题

1. 打开sublime，在preference(首选项)选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件管理，如果已经有了请直接看第三步。

2. 安装Package Control 插件，你就要从菜单 View（视图） - Show Console（显示/隐藏控制台） 或者 ctrl + ` 快捷键，调出 console。将以下 Python代码粘贴进去并 enter 执行，不出意外即完成安装。
   sublime text 3

   import urllib.request,os,hashlib; h =
   ‘6f4c264a24d933ce70df5dedcf1dcaee’ +
   ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package
   Control.sublime-package’; ipp = sublime.installed_packages_path();
   urllib.request.install_opener( urllib.request.build_opener(
   urllib.request.ProxyHandler()) ); by = urllib.request.urlopen(
   ‘http://packagecontrol.io/’ + pf.replace(’ ‘, ‘%20’)).read(); dh =
   hashlib.sha256(by).hexdigest(); print(‘Error validating download (got
   %s instead of %s), please try manual install’ % (dh, h)) if dh != h
   else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

   sublime text 2

   import urllib2,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee’ +
   ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package
   Control.sublime-package’; ipp = sublime.installed_packages_path();
   os.makedirs( ipp ) if not os.path.exists(ipp) else None;
   urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler())
   ); by = urllib2.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ‘,
   ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); open(
   os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else None;
   print(‘Error validating download (got %s instead of %s), please try
   manual install’ % (dh, h) if dh != h else ‘Please restart Sublime Text
   to finish installation’)

   原文链接：https://packagecontrol.io/installation

3. 重新打开sublime,Tools(工具) –>Command Palette(命令面板) 快捷键ctrl+shift+p，并输入install，选择第一个Install Pacage，在命令栏中输入”Sass”然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果

4. 同样的方法，在命令栏中输入”SassBuild”然后回车，然后在弹出的列表中选择SassBuild插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果

5. 查看安装的插件，按ctrl+shift+p，输入package，选择list packages，就看到了我们安装的插件列表。如果你看到了sass和sass bulid就说明插件安装成功了。安装成功后一定要重启sublime，不要在这里被坑。

测试
新建一个后缀为 .scss 的文件，简单内容如下

$temp:red;
.class{
    color:$temp;
}

然后 control + B ，就会在默认的目录生成对应的.css文件和.css.map文件
提示：[Finished in 1.0s]

这样就完了吗？并没有结束。

一个优秀的程序员都会很好的管理和分类这些文件，所以我们并不希望编译的时候文件生成在默认位置，而应该是我们指定的位置。

一个很有效率的程序员也不会每次更改 .scss文件都去生成一次，而是监视文件，让其自动生成。

所以我们需要去设置配置文件….

sass插件的配置
操作步骤：
（1）Tools(工具) –> build system(编译系统) –> new build system(新建编译系统) … 会生成一个文件，把下面的内容复制到文件中覆盖里面的内容

{  
    "cmd": ["sass", "--watch", "G:\\scss:G:\\css","--style","compressed"],
    "selector": "source.sass, source.scss",  
    "line_regex": "Line ([0-9]+):",  

    "osx":  
    {  
        "path": "/usr/local/bin:$PATH"  
    },  

    "windows":  
    {  
        "shell": "true"  
    }
}

G:\scss:G:\css，换成自己指定路径，例如你的scss文件放在D盘scss文件夹下面，css文件放在E盘css文件夹下面，那就改成 D:\scss:E:\css 双斜杠有一个是转义。

关于”cmd”里面的参数设置可以去看看这个https://www.sass.hk/install/
主要修改”cmd”参数里面的内容，其它都不用修改，符合绝大多数场景的需求的。

（2）然后ctrl+s保存到SubLime –> Packages –> MySass 文件夹中，并把文件命名为MySass。 没有文件夹的就新建一个文件夹。

（3）回到sublime，点击Tools(工具) –> Build system(编译系统) –> MySass。

（4）然后你就可以开始愉快的进行sass开发了。打开你想要编译的.scss文件，ctrl+B. 就会开启监视（提示>>> Sass is watching for changes. Press Ctrl-C to stop.）只要你更改了你指定路劲下的.scss文件，都会自动编译到你指定的css文件夹里。当关闭sublime的时候就会关闭监视。