sass安装使用

1.scss和sass的区别

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。

由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 SCSS。大部分扩展，例如变量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。 例如，以下这段简单的 Sass 代码：

#sidebar
  width: 30%
  background-color: #faa

只需添加花括号和分号就能转换为 SCSS 语法：

#sidebar {
  width: 30%;
  background-color: #faa;
}

另外，SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子：

#sidebar {width: 30%; background-color: #faa}

2.sass和less的区别

LESS和Sass之间的主要区别是他们的实现方式不同，LESS是基于JavaScript运行,所以LESS是在客户端处理。

另一方面，Sass是基于Ruby的，是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理代码。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦开发完成，我就复制粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一种方式是使用LESS APP来编译和压缩你的LESS文件。两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

LESS转译工具除了LESS APP之外，现在目前流行的主要有：SimpLess、WinLess、CodeKit.app、LESS编译辅助脚本-LESS2CSS。

——大漠

更新：在Twitter的评论上，LESS和Sass对比讨论也是相当的热烈。也请考虑Adam Stacoviak回复。现实情况，Sass确实需要在Ruby上运行,然而他不需要在服务器上编译CSS。它也可以在本地编译（正如前面提到的LESS）,编译后的CSS可以运用到你的项目上，Wordpress主题中.引擎模板，或者任何服务器就像你的CSS文件。

原文: http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com

3.ruby和sass的关系

这个是关于ruby(一种面向对象程序设计的脚本语言) 的百度百科

https://baike.baidu.com/item/Ruby/11419?fr=aladdin&fromid=2565160&fromtitle=ruby%E8%AF%AD%E8%A8%80

sass是由ruby语言开发而成,所以安装sass之前, 要先安装ruby

4.安装sass

(1)ruby安装

ruby下载网址:

https://rubyinstaller.org/downloads/

安装的时候注意一点,必须要勾选这2栏

安装好之后, 打开cmd控制面板输入ruby-v

ruby -v
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

出现上面的样子就说明ruby安装成功了

(2)sass安装

ruby已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。如下：

//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内的源
gem sources -a http://gems.ruby-china.org/                                                                           (!!!注意注意:淘宝源('https://ruby.taobao.org/')已经不维护了----->http://www.oschina.net/news/71749/taobao-gems-ruby-china)

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

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

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

在每一个安装过程中，你都会看到如下输出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下sass常用更新、查看版本、sass命令帮助等命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

补充一下compass:

Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。

5.sass在webstorm编辑器下进行自动编译

1.用webstorm打开工程, 然后在左上角file里面点击setting

会出现一个界面,然后点击界面里面tools里面的File Watchers

然后再点击右上角的绿色的加号

点击加号,选择scss

更改Program里面的地址, 改成当初下载的ruby包里面的bin里面的scss.bat

再点击ok就行了.

6.使用scss

1.新建一个a.scss下方就会自动生成a.css.并且上方会出现一个a.css.map(!!!注意注意:文件夹必须不能有中文, 不然可能出现不能自动编译等一系列错误)

文件夹:

scss:

css:

css.map: