less与sass

1.变量：

Less:

@my-color: #ff0000;

.container {
  background-color: @my-color;
}

Sass:

$my-color: #ff0000;

.container {
  background-color: $my-color;
}

在这点上，Less和Sass的变量概念基本相同，都是以声明的方式存储值，然后在样式中引用。

2.混合(Mixins)：

Less:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
          border-radius: @radius;
}

.box {
  .border-radius(4px);
}

Sass:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(4px);
}

在这点上，两者都支持定义可重用的样式块，这些块可以在样式表中重复使用，并且可以接受参数。

3.嵌套:

Less:

.container {
  padding: 20px;
  .header {
    background-color: #f0f0f0;
  }
}

Sass:

.container {
  padding: 20px;
  & .header {
    background-color: #f0f0f0;
  }
}

在这个例子中，两者都支持选择器的嵌套，这可以减少代码的重复并且提高代码的可读性。注意在Sass中，需要使用&符号来表示父选择器。

4.运算

Less:

@width: 200px;
@margin: @width / 2; // @margin为100px

Sass:

$width: 200px;
$margin: $width / 2; // $margin为100px

在这个例子中，两者都支持基本的数学运算，包括除法。这些运算可以用于任何数字的计算。