Sass与Less的区别

Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，Less 仅对 CSS 语言增加了少许方便的扩展，学习很容易。
使用方法：

// Node.js 环境中使用 Less
npm install -g less
// 编译： 
lessc styles.less styles.css
// 在浏览器环境中使用 Less：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>

主要亮点语法：

Mixins 混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}
//等价于
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Nesting 嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
//等价于
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

&一般用于串联选择器，较多用于伪类选择器，典型应用如下

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

Scope 作用域

变量为局部作用域，且不必出现在使用之前，如：

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

注释

/* 一个块注释
 * style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;

导入

@import "library"; // library.less
@import "typo.css";

Sass

sass，作为”世界上最成熟、最稳定、最强大的专业级CSS扩展语言”。兼容所有版本的css，且有无数框架使用sass构建，如Compass，Bourbon，和Susy。

存在两种格式：

1. scss后缀的文件。所有 CSS3 语法在 SCSS 中都是通用的，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。
2. sass后缀的文件，是一种简化格式，也是最早的 Sass 语法格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。
3. 任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式.

Sass的使用

基于ruby，windows系统需先安装ruby环境，mac由于自带ruby，因此无需安装。

//安装sass
gem install sass
//在命令行中运行 Sass
sass input.scss output.css
//监视单个 Sass 文件，每次修改并保存时自动编译
sass --watch input.scss:output.css
// 监视整个文件夹
sass --watch app/sass:public/stylesheets

嵌套

同less

 #main p {
    color: #00ff00;
    width: 97%;
    .redbox {
      background-color: #ff0000;
      color: #000000;
    }
 }

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

注释

除与less相同的功能外，还支持：
1. Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会
2. 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中
3. 插值语句 (interpolation) 也可写进多行注释中输出变量值

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

变量

支持块级作用域，将局部变量转换为全局变量可以添加 !global 声明

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
//编译后
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
//编译后
#main {
  content: "First content";
  new-content: "First time reference"; 
}

import

一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中，相当于有一定作用范围的引用。

@media

与@media 指令与 CSS 中用法一样，同时允许其在 CSS 规则中嵌套。
如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。

@extend

将一个选择器下的所有样式继承给另一个选择器。作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError）

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//编译后
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError {
  border-width: 3px; 
}

• 支持同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器。
• 支持当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个

控制指令

   @if  
   @elseif  
   @else

   @for $var  from  through <end> //包括start,包括end
   //或者 
   @for $var from  to <end>   //包括start不包括end

   @each $var in 

   @while  {}

两者异同

类别	Sass	Less
安装	sass的安装需要安装Ruby环境	Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中
使用	复杂	简单
功能	复杂	简单
处理机制	通过服务端处理	通过客户端处理的，解析会比sass慢一点
变量	以$开始	以@开始
文件后缀	.sass 或 .scss	.less

参考资料

1. less官网
2. less.js中文文档
3. sass官网
4. sass中文网
5. 为什么选择使用Sass而不是Less?