看看sass和less会遇到的问题吧

sass的混合指令 mixin

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。
混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

定义混合指令 @mixin
混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

• html & { height: 1px }
  }
  引用混合样式 @include
  .page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
  }
  也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;

混合样式中也可以包含其他混合样式，比如

@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：
@mixin sexy-border(width) {
border: {
color: width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：

@mixin sexy-border(width: 1in) {
border: {
color: width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

@mixin box-shadow(shadows;
-webkit-box-shadow: shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，所以上面的例子可以写成：

=apply-to-ie6-only

• html
  @content

+apply-to-ie6-only

logo

background-image: url(/logo.gif)

sass控制指令
@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
结果：p {border: 1px solid; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

type == ocean {
color: blue;
} @else if type == monster {
color: green;
} @else {
color: black;
}
}
编译为 p {color: green; }

@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外，i； 和 必须是整数值。

@for i} { width: 2em * $i; }
}
编译为

.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }

@each 指令的格式是 var 可以是任何变量名，比如 name，而 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

@each animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
编译为

.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

i > 0 {
.item-#{i; }
i - 2;
}
.item-6 {
width: 12em; }

.item-4 {
width: 8em; }

.item-2 {
width: 4em; }

一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系?
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

二. Sass/Scss与Less区别
1.编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
默认为nested

nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
举个例子：
//未编译样式.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}

nested 编译排版格式
/命令行内容/sass style.scss:style.css --style nested
/编译过后样式/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }

expanded 编译排版格式
/命令行内容/sass style.scss:style.css --style expanded
/编译过后样式/
.box {
width: 300px;
height: 400px;
}.box-title {
height: 30px;
line-height: 30px;
}

compact 编译排版格式
/命令行内容/sass style.scss:style.css --style compact
/编译过后样式/
.box { width: 300px; height: 400px; }.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式
/命令行内容/sass style.scss:style.css --style compressed
/编译过后样式/.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

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

Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。