sass与less变量、插值、作用域的差异

变量

less是以@开头的，而sass是以$开头的。

sass：

$num :100px;

.box {
    width: $num;
}

结果：

.box {
  width: 100px;
}

less:

@num :100px;

.box {
    width: @num;
}

结果：

.box {
  width: 100px;
}

插值

less和sass 可以通过插值的方法命名一个属性。变量名需要加一个大括号。

less:

@key: margin;


.box {
    @{key}: auto;
}

sass的写法同理

作用域

sass只会识别属性之前的变量，没有的话，再继承全局变量。
sass:

$number: 100px;

.box {
    width: $number;
    @number: 123px;
    width: $number;
}

结果：

.box {
  width: 100px;
  @number : 123px;
}

如果作用域中，变量值写在属性之后，属性值不再读取作用域的值。
例如：

$number: 100px;

.box {
    width: $number;
    @number: 123px;

}

结果：

.box {
  width: 100px;
  @number : 123px;
}

less的作用域，不区分变量值写在属性前还是后。
例如：

@key: margin;
@num: 100px;

.box {
    width: @num;
    @num: 120px;
    height: @num;
}

结果：

.box {
  width: 120px;
  height: 120px;
}