如何安装Sass

Python012

如何安装Sass,第1张

由于sass是基于ruby环境下使用的,所以要先安装ruby , win 7系统直接进入下载你所需要的ruby版本。

下载完,安装程序。

运行cmd.exe命令

输入ruby -v,会显示安装的ruby 版本.

现在我们开始安装sass,在“开始”菜单中打开ruby的控制面板。

输入gem install sass ,按回车键执行命令。如果提示安装成功,这个步骤后面的内容可忽略。但大多数情况下,由于国内网络原因,导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的源,然后添加淘宝的源,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了。具体操作如下:

先移除默认的源,命令为gem sources --remove /,按回车,结果如下:

添加淘宝的源,命令为gem sources -a ,按回车,结果如下:

查看当前使用的源,命令为gem sources -1,按回车,结果如下:

执行gem install sass 命令,安装sass, 结果如下:

执行sass -v命令,就可以看到你安装的sass版本了,结果如下:

到这里,sass就已经安装好了。后话:

更新sass的命令语句为:gem update

如果想要安装sass的某一特定版本,命令语句为: gem install sass --version=3.3.0

如果想要删除sass的某一特定版本,命令语句为: gem uninstall sass --version=3.3.0

查看ruby 安装的所有程序包,命令语句为: gem list

本文前提 是电脑里已经顺利安装了ruby,sass等之后,再进行webstorm中配置sass的watcher,以及改变watcher中的默认选项;如果以上都还没有做,可以自行百度解决,很容易找到的;

本文使用的webstorm为11.0版本

点击左上角的 *File→Settings→File Watchers ***

在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss

然后按照下图进行操作:

其中黄色的地方都要填好,program那里是你安装ruby中响应的scss.bat的路径,如果安装ruby时,你不是按照默认c盘路径按装的话,那么那里是需要需改的;

按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的

1、Arguments:

可以配置编译后的文件的输出路径,我这里写的是:

--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css

注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.

举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.

如图所示:

2、 Output paths to refresh:

改成这样: .css: .css.map

经过以上配置就实现了, webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.

这里需要注意两点:

1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.

2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.

原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561

通常在安装完ruby和sass之后,如果你的sass或scss文件内有中文的话,编译时就会报错,如:Syntax error: Invalid GBK character

解决的方案就是为sass编译添加默认的编码方式为utf-8

步骤:

1、找到下面这个文件 C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.8\lib\sass\engine.rb

2、找到require 'sass/supports'这一行,在下面一行添加Encoding.default_external = Encoding.find('utf-8')