less和scss效果不一致 less和sass优缺点

简述

sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理，引入less.js就可以处理，sass是基于ruby所以在服务器处理。

less优点

• 可以在浏览器中运行，实现主题定制功能；

less缺点

• 编程能力弱，不直接支持对象，循环，判断等；只有when判断
• @variable 变量命名和css的@import/media/keyframes等含义容易混淆；
• mixin/extend的语法比较奇怪；
• mixin的参数如果遇到多参数和列表参数值的时候容易混淆；

sass优点: 

• 用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；
• 可编程能力比较强，支持函数，列表，对象，判断，循环等；相比less有更多的功能；
• 丰富的sass库：Compass/Bourbon；

sass缺点:

• 在公司内部安装node-sass会失败，需要使用cnpm或者手工安装

less 和 sass 不同点:

1 基本语法

Less 的基本语法属于「CSS 风格」

Sass、相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符    不过区别在于 Sass、同时也兼容「CSS 风格」代码

 Less：

.box {
  display: block;
}

Sass：

.box
  display: block

 2 嵌套语法 

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同。

区别只是 Sass 可以用没有大括号的方式书写

 less

.a {
  &.b {
    color: red;
  }
}

 3 变量 

变量无疑为 CSS 增加了一种有效的复用方式，减少了原来在 CSS 中无法避免的重复「硬编码」

Less：

@red: #c00;

strong {
  color: @red;
}

Sass：

$red: #c00;

strong {
  color: $red;
}

4 @import

 Less 中可以在字符串中进行插值：

@device: mobile;
@import "styles.@{device}.css";

 Sass 中只能在使用 url() 表达式引入时进行变量插值：

$device: mobile;
@import url(styles.#{$device}.css);

 5 混入

混入（mixin）应该说是预处理器最精髓的功能之一了。

它提供了 CSS 缺失的最关键的东西：样式层面的抽象。

Less 的混入有两种方式：

1.直接在目标位置混入另一个类样式（输出已经确定，无法使用参数）；

2.定义一个不输出的样式片段（可以输入参数），在目标位置输出。

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

 编译后

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sass 

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

less

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  &:extend(.message);
  color: #e2e21e;
}

6 继承

Sass

.active {
   color: red;
}
button.active {
   @extend .active;
}