1.sass的安装，编译，还有风格

1.安装sass

1.安装ruby

因为sass是用ruby语言写的，所以需要安装ruby环境

打开安装包去安装ruby，记住要勾选 下面选项来配置环境路径

• [x] Add Ruby executables to your PATH

安装完成之后继续下一步操作

---

2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具，类似于nodejs 的npm

gem install sass

这个时候如果不翻墙的话是会出问题的，因为：

由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】

$ gem sources -l

*** CURRENT SOURCES ***

https://ruby.taobao.org

# 请确保只有 ruby.taobao.org

$ gem install sass

安装好之后执行sass -v就可以看到sass的版本了

实在实在不行，就安装离线文件吧,但是失败率也很高

gem install ./.../sass-3.4.22.gem

2.编译sass文件的方式

1.命令行编译

可以通过cmd命令行执行sass方法来编译

例如：

sass scss/a.scss:css/a.css

sass 后面写要编译的sass文件的路径，‘：’后面写的是

要输出的目录及名字

• 需要注意的是：必须有这个文件夹才能在里面生成css

这样的话写一句执行一次编译一次有些太麻烦

可以开启一个watch来监听文件变化来进行编译

sass --watch scss:css

--watch表示要监听 ：前后的两个都是文件夹，表示scss文件夹的文件改变就编译到css文件夹

---

2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译，但是ruby和sass是必须要安装的

考拉的方式就不多做介绍了，大家i自己去看一下

gulp的话呢是需要gulp-sass的模块来编译，使用方式类似于gulp-less

这里是网址，点击查看

3.sass四种风格

sass编译的格式

sass编译输出的css有四种格式

• nested 嵌套
• compact 紧凑
• expanded 扩展
• compressed 压缩

这些样式会影响输出的css的格式

简单介绍一下：

css默认输出的嵌套

ul{

	font-size:15px;

	li{

		list-style:none;

	}

}

---》

ul {

  font-size: 15px; }

  ul li {

    list-style: none; }

紧凑compact

在编译的时候需要执行

sass --watch scss:css --style compact

这个时候输出的代码就是

ul { font-size: 15px; }

ul li { list-style: none; padding: 5px; }

compressed 压缩

在编译的时候需要执行

sass --watch scss:css --style compressed

--->

ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}

expanded 扩展

更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style expanded

--->

ul {

  font-size: 15px;

}

ul li {

  list-style: none;

  animation: all 0.3s;

}

compressed 压缩

更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style compressed

--->

.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}

4.sass与scss

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式

采用这种格式文件的后缀名是.sass

在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法

两个版本的区别

• 后缀名不同 .sass和.scss
• 语法不同，请看下面

新版：

/*新版本

多行文本注释*/

//新版本

//单行文本注释

@import "base";

@mixin alert{

	color:red;

	background:blue;

}

.alert-warning{

	@include alert;

}

ul{

	font-size:15px;

	li{

		list-style:none;

	}

}

老版本：

/*新版本

多行文本注释

//新版本

  单行文本注释*/

@import "base"

=alert

	color:red

	background:blue

.alert-warning

	+alert

ul

	font-size:15px

	li

		list-style:none