sass和less

1)SASS是一种CSS的开发工具，提供了很多便利的写法,节省了我们的时间，使得CSS的开发，变得简单和可维护。默认情况下，sass会自动缓存编译后的模板，这样能够显著提升编译后的速度

2)sass 有两种语法格式：

它有两种语法格式，我们使用的是.scss作为拓展名的那一种语法格式

1》SCSS ，这种语法格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法，以及早期的 IE 滤镜写法。以 .scss 作为拓展名。

2》另一种也是最早的 Sass 语法格式，被称为缩进格式。通常简称 "Sass"，是一种简化格式。比如它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。这种格式以 .sass 作为拓展名。

3》相互转换

$ sass-convert  style.sass  style.scss->将 Sass 转换为 SCSS

$ sass-convert  style.scss  style.sass->将 SCSS 转换为 Sass

2）安装 Sass

gem install sass

sass input.scss output.css   //在命令行中运行sass

sass --watch input.scss:output.css   // 命令 Sass 监视文件的改动并更新 CSS

sass --watch app/sass:public/stylesheets   //监视文件改动

5)SASS提供四个编译风格的选项：

* nested：嵌套缩进的css代码，它是默认值。

* expanded：没有缩进的、扩展的css代码。

* compact：简洁格式的css代码。

* compressed：压缩后的css代码。

6)增加功能

1>变量

SASS允许使用变量，所有变量以$开头。

$color_main:#ff4e0b;

2>计算功能

SASS允许在代码中使用算式：

3>嵌套规则

div {
hi {
color:red;
}
}

4>注释

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

5>继承

SASS允许一个选择器，继承另一个选择器。

class2要继承class1，就要使用@extend命令：

.class2 {
@extend .class1;
font-size:120%;
}

6>Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

@mixin firefox-message($selector) {

      firefox #{$selector}:before {

    content: "Hi, Firefox users!";

  }}

@include firefox-message(".header");

编译后：

firefox .header:before {

  content: "Hi, Firefox users!"; }

7>颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

8>插入文件

@import命令，用来插入外部文件。扩展了css3的@规则，允许其导入sass或者scss文件

9>条件语句

@if可以用来判断，配套的还有@else命令

10>循环语句

SASS支持for循环，也支持while循环

11>自定义函数

SASS允许用户编写自己的函数。

7)less和sass的区别：

1.编译环境不一样

在于实现方式 less是基于JavaScript的在客户端处理 ,sass是基于ruby所以在服务器处理。

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5. 引用外部CSS文件

scss引用的外部文件命名必须以_开头,文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.Less引用外部文件和css中的@import没什么差异。

8)为什么选用sass？

不选择LESS是因为less是基于JavaScript的在客户端处理，JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。