sublime Text3下sass环境配置（windows）

た入场券 2022-05-24 04:50 321阅读 0赞

## 一、安装Ruby环境 ##

1.  **Sass**依赖于ruby环境，所以装sass之前先确认装了ruby。可以到 Ruby 的[官网][Link 1]下载对应需要的 Ruby 版本。
2.  此处根据我的电脑配置，我下载的是![70][]
3.  安装注意： 安装过程中，请注意，勾选 **Add Ruby executables to your PATH **选项，可以保证在系统中添加好环境变量，防止之后在编译软件中发生找不到ruby环境的错误。另，安装地址无特殊要求。  
    ![70 1][]
4.  安装成功，输入`ruby -v`，可以看到：

![70 2][]

## 二、安装Sass ##

1.  通过终端命令安装 Sass。

*  打开电脑的ruby命令终端，输入下面的命令: `gem install sass`
 *  提醒一下，在使用 Mac 的同学，可能需要在上面的命令前加上”sudo”，才能正常安装：`sudo gem install sass`
 *  上面的方法一般是能安装成功的，但是墙的厉害，我为了简单使用的上面的方法
 *  淘宝镜像安装法：（ruby终端下输入命令） 
    
    > $ gem sources –remove  [https://rubygems.org/][https_rubygems.org]   
    > $ gem sources -a  [https://ruby.taobao.org/][https_ruby.taobao.org] 【如果你系统不支持https，请将淘宝源更换成：gem sources -a  [http://gems.ruby-china.org][http_gems.ruby-china.org]】   
    > gemsources−lgemsources−l gem install sass
 *  成功后如图： 
 *  ![70 3][]

## 三、SASS文件转换为CSS文件的方法： ##

如：在D盘建立一个demo文件夹，文件夹下有一个demo.scss文件（scss，sass都行。sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。scss对代码的要求没那么高。）用下面的方法可以将sass或者scss转换为css文件。

(1)首先找到d盘下的demo文件夹，打开cmd通过d:能够定位到d盘目录下，然后通过cd ..能够定位到d盘根目录下，再通过cd demo定位到demo文件夹下

C:\Users\mayn>d:
    D:\Ruby25-x64\bin>cd ..
    D:\Ruby25-x64>cd ..
    D:>cd demo

(2)然后将sass或者scss转换为css文件

# #

D:\demo>sass --watch demo.scss:style.css

![70 4][]

sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。

实际运用

首先新建一个demo文件夹，包括index.html和一个demo.scss

![70 5][]

![70 6][]

## 然后将sass或者scss转换为css文件 ##

**D:\\demo>sass --watch demo.scss:style.css**

注意：修改demo.scss文件时，必须处于被watch监听状态下，否则不会将样式改变同步到style.css中

可以看到，原先的目录下，多出了几个文件

![70 7][]

再查看index.html效果图，可以看到

![70 8][]

## 四、常用sublime插件 ##

*  package control
 *  emmet
 *  autofilename
 *  autoprefixer

## 五、相关资料 ##

*  [w3cplus][]
 *  [前端网ruby安装][ruby]
 *  [Sass教程][Sass]

# 六、Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件 #

###  原文:[http://www.w3ci.com//soft/716.html][http_www.w3ci.com_soft_716.html] ###

### [LESS][]       [https://packagecontrol.io/packages/LESS][https_packagecontrol.io_packages_LESS] ###

功能：LESS高亮插件   [下载][Link 2]

简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们

使用：打开.less文件或者设置为less格式

[![less][]][less]

# [为sublime text 添加SASS语法高亮][sublime text _SASS] #

以前写CSS时，都是直接写样式，没有任何的第三方工具，后面发现越是面向大网站，越难管理，上次参加完携程UED大会后，发现SASS对于前端团队多人协作和站点代码维护上很有帮助，很多同学都开始用了，我还是在原地踏步，我也不能OUT呀，于是开始学习，平时比较喜欢sublime编辑器，而sublime默认是不带sass语法高亮的，今天记录一下，sublime下如何安装sass语法高亮。  
1.下载 sublime SCSS语法高亮包   “[点击下载][Link 3]”  
2.将下载下来的文件包解压。  
3.打开sublime安装目录下的Data → Packages目录  
4.将包放入打开的目录，重启sublime，搞定。

![1-15021515193LR.jpg][]![1-150215151952336.jpg][]![1-15021515200DC.jpg][]![1-15021515202NY.jpg][]![1-150215152043M1.jpg][]![1-1502151521012N.jpg][]

**D:\\demo>sass --watch demo.css:style.css**

[Link 1]: http://rubyinstaller.org/
[70]: /images/20220524/79afd1023cb44b1b95abd6f56aa90f3c.png
[70 1]: /images/20220524/74eb484aceee4f1d8b15688e5dc5a6b1.png
[70 2]: /images/20220524/2fc79bec830d423a8495000648065883.png
[https_rubygems.org]: https://rubygems.org/
[https_ruby.taobao.org]: https://ruby.taobao.org/
[http_gems.ruby-china.org]: http://gems.ruby-china.org/
[70 3]: /images/20220524/2626501c18a341d485d2f0b81c0d956f.png
[70 4]: /images/20220524/957cfe307c144d659700ae8d98b3d3d9.png
[70 5]: /images/20220524/da6a1851c68c41fb8e8494d7aa16773b.png
[70 6]: /images/20220524/fe786c6e5c5a48c59725bd76fca32555.png
[70 7]: /images/20220524/45756114eb76433593575a99c5c61e08.png
[70 8]: /images/20220524/cd39a7ba52d64a9d8b4c126d330a619d.png
[w3cplus]: http://www.w3cplus.com/sassguide/install.html
[ruby]: http://www.qdfuns.com/notes.php?mod=view&u=23274&id=69c0e9124f28fad3af21ec0a3c259af0
[Sass]: http://www.ruanyifeng.com/blog/2012/06/sass.html
[http_www.w3ci.com_soft_716.html]: http://www.w3ci.com//soft/716.html
[LESS]: https://sublime.wbond.net/packages/LESS
[https_packagecontrol.io_packages_LESS]: https://packagecontrol.io/packages/LESS
[Link 2]: https://github.com/danro/LESS-sublime/zipball/master
[less]: /images/20220524/c1007d7406e846faa7cf40e3f01872a7.png
[sublime text _SASS]: http://www.cnblogs.com/xupeiyu/p/3825651.html
[Link 3]: https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2
[1-15021515193LR.jpg]: http://www.w3ci.com/uploads/150215/1-15021515193LR.jpg
[1-150215151952336.jpg]: http://www.w3ci.com/uploads/150215/1-150215151952336.jpg
[1-15021515200DC.jpg]: http://www.w3ci.com/uploads/150215/1-15021515200DC.jpg
[1-15021515202NY.jpg]: http://www.w3ci.com/uploads/150215/1-15021515202NY.jpg
[1-150215152043M1.jpg]: http://www.w3ci.com/uploads/150215/1-150215152043M1.jpg
[1-1502151521012N.jpg]: /images/20220524/0ab43bbebed04ab0bc281448407b73f3.png