Sass Day-01

什么是css预处理器?
定义：

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增长了一些编程的特性，将 CSS 做为目标生成文件，而后开发者就只要使用这种语言进行编码工做。

通俗的说，

“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，而后再编译成正常的 CSS 文件，以供项目使用。
  CSS 预处理器为 CSS 增长一些编程的特性，无需考虑浏览器的兼容性问题”，例如你能够在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

其它 CSS 预处理器语言：

Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS
     (Sass（SCSS）、LESS、Stylus) 相对用的比较多,语言比较优秀

$color: red;
.test {
    color: $color;
}
//编译之后
.test{
   color:red;
}

---

什么是Sass?

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更增强大的功能。
    Sass 可以提供更简洁、更优雅的语法，同时提供多种功能来建立可维护和管理的样式表。

Sass 前世此生：

Sass 是最先的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法）并不能被大众接受，不过因为其强大的功能和 Ruby on Rails 的大力推进，仍是有不少开发者选择了 Sass。
   Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，所以有着和 HTML 同样的缩进式风格。

为何早期不如 LESS 普及？

虽然缩进式风格能够有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受，另外一方面没法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最先，但远不如 LESS 普及的缘由。

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

Sass 和 SCSS 实际上是同一种东西，咱们平时都称之为 Sass，二者之间不一样之处有如下两点：

1.文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
   2.语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。

//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;
}

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

SCSS 和 CSS 写法无差异：

SCSS 和 CSS 写法无差异，这也是 Sass 后来愈来愈受大众喜欢缘由之一。
   简单点说，把你现有的“.css”文件直接修改为“.scss”便可使用。