scss语法格式：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我们使用 SCSS 语法格式将按下面这样来书写：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

gem uninstall sass

sass -v

gem update sass

一、安装Ruby

1.http://rubyinstaller.org/downloads下载对应需要的 Ruby 版本

2.建议安装在C盘下，选中添加ruby到环境变量path（不选中就会出现编译找不到Ruby环境的情况）。

3.Ruby安装完成后，开始菜单找到新安装的Ruby，并启动Ruby的 Command 控制面板

二、安装Sass

1. 打开电脑命令终端：gem install sass

2. Compass安装Sass：Commpass是基于 Sass 开发的一个框架，即安装了Compass，也就同时安装好了Sass。终端：sudo gem install sass【Compass是成熟的、基于Sass开发的一个框架，继承了很多写好的mixins和Sass函数】

3. 本地安装Sass：下载http://rubygems.org/gems/sass安装包

4. 淘宝镜像

   第一步：移动默认的源

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

   第二步：指定淘宝的源

6. gem sources -a https://ruby.taobao.org/

   第三步：查看指定的源是不是淘宝源

7. gem sources -l

   返回结果如下：

8. *** CURRENT SOURCES ***
   https://ruby.taobao.org

   请确保只有 ruby.taobao.org。如果无误之后，执行下面的命令：

9. gem install sass

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

改淘宝镜像为：gem sources --add https://gems.ruby-china.com/

gem sources -l

gem install sass

sass -v:返回Ruby Sass 3.7.4

重新观看，劳资的笔记就没了！！！

SCSS 和 CSS 写法无差别：

SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;}

-----------------------------------------------------

编写第一个".scss"文件，在编辑器的第一行和第二行定义一个变量，并在body中调用对应变量来设置body大小尺寸？

body {

   width: 200px;

  height: 300px;

}

Sass 是最早的 CSS 预处理语言，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。

因此有着和 HTML 一样的缩进式风格。

虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受，另一方面无法兼容已有的 CSS 代码。

$side : left;

.rounded {

    border-#{$side}-radius: 5px;

}

CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

Sass、LESS 和 Stylus 最优秀

$color: red;

.test {

    color: $color;

}

1. 嵌套输出方式 nested

2. 展开输出方式 expanded  

3. 紧凑输出方式 compact 

4. 压缩输出方式 compressed

sass -v查看版本号

gem update sass更新sass

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

Sass 中的混合宏使用编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

继承和占位符可以用取值方式调用，混合宏不可以

当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：