windows环境下安装 sass 和在 webstorm 中配置及测试使用

修改优化六年前的文章，时光荏苒啊。

新内容补充

换了新的工作电脑，所以一些开发配置要重新安装。

这篇几年前的文章，竟然还能帮点忙。

只不过有些内容过时了，所以重新补充内容来更新一下。

正文

sass中文网

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

Ruby下载

Downloads

网站有时候会打不开。

Ruby就选红色加粗的版本来安装。

十分详尽的sass安装攻略

安装Sass | Sass中文网

ruby安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v

这次下载ruby的过程中，遇到了未知主机的错误，系统自动频繁尝试安装，错误没有来得及截图，系统反复尝试多次后安装成功，自动关闭了命令行窗口。

SSL 证书错误

正常情况下，你是不会遇到 SSL 证书错误的，除非你的 Ruby 安装方式不正确。

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

两条命令分开执行，不要一起输入。

注意要进入ruby的系统文件根目录中去安装 sass 和 compass。 

gem install compass

安装有延迟（这次等了好几分钟呢），耐心等待。

compass安装完成

在用户根目录下测试

sass -v

compass -v

查看本地安装文件

以下为旧内容

标题层级不知道怎么改最优，索性保持原样吧。

windows环境下安装 sass

安装参考：

安装Sass | Sass中文网

官网下载：

Downloads

使用了网页翻译，选择了推荐的安装程序。

一路默认安装。

安装中重要的勾选

还有一个选择是否使用UTF-8作为默认编码的选项，我也选了。 

安装完成后自动启动命令行，不知道选择安装哪个版本，就使用推荐的全部安装，总大小四百多兆。

因为国内网络的问题导致 gem 源间歇性中断？我没有遇到这个问题。但在安装的过程中，让选择输入 [ ] 时，没反应，再点击enter 就意外退出了命令行。

检查了下，所幸也安装成功了。

检查C盘也有相应的文件 ，这样就可以配置webstorm了。

备注：还有个node版本的sass

安装 node-sass

使用 NPM 安装 node-sass

npm install node-sass -g

安装及配置参考：

https://blog.youkuaiyun.com/simplehouse/article/details/79160131

警示： LibSass 和 Node Sass 已经废弃。 尽管它们将继续提供无限期的维护版本，但没有计划添加额外的功能或支持新的 CSS 或 Sass 特性。 仍在使用这些项目的用户应该转向 Dart Sass。 

在 webstorm 中配置scss

配置参考：

webstorm下设置sass - prince.shi - 博客园

在 webstorm 中测试使用scss

新建个SCSS文件，输入内容，直接在源文件下生成了一个css文件和一个map文件。

注意 .css 文件是在 .scss文件下面，开始没看到 .css文件，还以为程序没安装好。

SCSS 与 Sass 异同

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。

浏览器原生不支持SCSS语法，只能解析标准CSS。因此，直接在HTML的<style>标签中编写SCSS代码（如变量、嵌套、混合等）会导致浏览器报错或样式不生效。

http://sass.bootcss.com/docs/scss-for-sass-users/