【less和sass的异同】

Less

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

Sass

是一种动态样式语言，Sass语法属于缩排语法，

比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

less和sass的相同之处

项目	Value
混入(Mixins)	class中的class
参数混入	可以传递参数的class，就像函数一样
嵌套规则	Class中嵌套class，从而减少重复的代码
运算	CSS中用上数学
颜色功能	可以编辑颜色
名字空间(namespace)	分组样式，从而可以被调用；
作用域	局部修改样式；
JavaScript 赋值	在CSS中使用JavaScript表达式赋值。

区别

• Less环境较Sass简单
• Less使用较Sass简单
• 从功能出发，Sass较Less略强大一些
• Less和Sass的主要不同就是他们的实现方式。 Less是基于JavaScript，是在客户端处理的。 Sass是基于Ruby的，是在服务器端处理的。相比较之下前者解析会比后者慢一点
• 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。.

//less
@import url('./1_1.less');
@bgColor: red;
@size: 30px;

header {
   background-color: @bgColor;
   font-size: @size;
}
//sass
$colorFont: red;
$fontStyle: italic;

header {
   color: $colorFont;
   font-style: $fontStyle;
}

• 在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。
• 嵌套上
  less上

// less
#header {
    color: black;

    // &  相当于父元素
    &:hover {
        background-color: red;
    }

    // 子代
    >.navigation {
        font-size: 12px;
    }

    // 后代
    .logo {
        width: 300px;

        .fs {
            font-size: 40px;
        }
    }

    .head {
        font-size: 30px;
    }
}

sass上

// 选择器嵌套
ul {
  li {
    color: $colorFont;
  }
  p {
    color: $color;
  }
  aside {
    span {
      color: #dddddd;
    }
  }
}
// 属性嵌套
#box {
    font: {
        family: '楷体';
        size: 50px;
        weight: 'bold';
    }
}