注释

less和sass注释一样

// 单行注释 (不会被编译)
/*
多行注释 (会被编译)
*/

1. 定义变量

less变量定义格式： @变量名：取值；

// 全局变量
@w:  200px;
@h: 200px;
.box{
  @w: 300px;   // 局部变量
  width: @w;
  height: @h;
  color: @c;   // 不会报错，可以先使用后定义
}
@c：red;

sass变量定义格式：$变量名：取值；

// 全局变量
$w: 200px;
$h: 200px;
.box{
  $w: 300px;   // 局部变量
  width: $w;
  height: $h;
  // color: $c;  // 会报错，不能先使用后定义
}
// $c: red;

less定义变量使用的@，sass定义变量使用的$
less变量可以先使用后定义，sass变量不是延迟加载，不可以先使用后定义
less和sass都区分全局变量和局部变量

2. 变量插值（了解即可，基本不会用到）

less变量插值

@w: width;
.box{
  @{w}: 200px;
  height: 200px;
}

sass变量插值

$w: width;
.box{
  #{$w}: 200px;
  height: 200px;
}

less变量插值使用方式：@{变量名}，sass变量插值使用方式：#{$变量名}

3. 运算

less和sass运算是一样，可以使用+ - * /运算

.box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: (-200px * 0.5);
}

4. 混合

4.1.1 less混合定义：.混合名称{} 或者 .混合名称(){}；less混合使用：.混合名称 或者 .混合名称()

// .center{
.center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box{
  width: 200px;
  height: 200px;
  // .center;
  .center();
}

如果混合名称后面没有带()，预处理的时候，会保留混合代码
如果混合名称后面有带()，预处理的时候，不会保留混合代码

4.1.2 sass混合定义：@mixin 混合名称{} 或者 @mixin 混合名称(){}；sass混合使用：@include 混合名称 或者 @include 混合名称()

// @mixin center{
@mixin center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box{
  width: 200px;
  height: 200px;
  // @include center;
  @include center();
}

sass中不管混合名称后面有没有带()，预处理的时候，都不会保留混合代码

4.2 less和sass混合都可以带形参/指定默认值形参/给指定形参赋值

less不带默认值形参

.model(@w, @h, @c){
  width: @w;
  height: @h;
  color: @c;
}
.box{
  .model(200px, 200px, red);
}

less带指定默认值形参

.model(@w: 200px, @h: 200px, @c: red){
  width: @w;
  height: @h;
  color: @c;
}
.box{
  .model();  // 不传值，使用默认值
}

less给指定形参赋值

.model(@w: 200px, @h: 200px, @c: red){
  width: @w;
  height: @h;
  color: @c;
}
.box{
  .model(@h: 100px);   // height会使用传递的值
}

sass不带默认值形参

@mixin model($w, $h, $c){
  width: $w;
  height: $h;
  color: $c;
}
.box{
  @include model(200px, 200px, red);
}

sass带指定默认值形参

@mixin model($w: 200px, $h: 200px, $c: red){
  width: $w;
  height: $h;
  color: $c;
}
.box{
  @include model();
}

sass带指定默认值形参

@mixin model($w: 200px, $h: 100px, $c: red){
  width: $w;
  height: $h;
  color: $c;
}
.box{
  @include model($h: 200px);
}

4.3 可变参数

less

// .animation(...){    // ...: 可变参数，可以传递0个或多个参数
// 至少传递 @name 和 @time 值
.animation(@name, @time...){
  transition: @arguments;
}

sass

// .animation($args...){    // $args...: 可变参数，可以传递0个或多个参数
.animation($name, $time, $args...){    // 至少传递 $name 和 $time 两个参数
  transition: $name $time $args;
}

less是通过JS实现的，可以使用@arguments来获取到所有传递进来的参数
sass不是通过JS实现的，需要先定义一个可变参数args来获取到所有传递进来的参数

5. less 和 sass 导入其他 .less 文件或 .scss 文件

两者都是通过 @import 导入

// less 导入其他 .less 文件
@import "model.less";
// sass 导入其他 .scss 文件
@import "model.scss";

其实原生的 CSS 也支持通过 @import 来导入其他的 CSS 文件，只不过不常用。因为原生 CSS 通过 @import 导入其他的 CSS 文件，只有执行到 @import 时，浏览器才会去下载对应的 .css 文件，这导致请求次数变多，页面加载起来特别慢。
而 less 和 sass 中的 @import 是直接将导入的文件拷贝到当前文件中生成一份 css，所以只会请求一次，页面加载起来速度快。

6. 内置函数

less 和 sass 中都提供了内置函数方便我们使用

sass 可以自定义函数

@function sum($num){
  @return $num + $num;
}

7. 继承

less 继承

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box:extend(.center){
   width: 200px;
  height: 200px;
}

sass 继承

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box{
  @extend .center;
  width: 200px;
  height: 200px;
}

混合和继承区别
混合：直接拷贝，有多少个地方使用就拷贝多少份
继承：并集选择器，不会拷贝，只会保留一份

8. 条件判断

less 通过when给混合添加执行限定条件，只有条件满足才会执行混合中代码

// .model(@w, @h) when (@w = 100px){  // 只有宽度等于100px，才会执行
//.model(@w, @h) when (@w = 100px), (@h = 100px){  // 当宽度等于100px，或者高度等于100px，才会执行
.model(@w, @h) when (@w = 100px) and (@h = 100px){  // 当宽度等于100px，并且高度也等于100px，才会执行
  width: @w;
  height: @h;
}
.box{
  // .model(200px, 100px);   // 宽度不等于100px，所以不会执行混合中代码 
  // .model(200px, 100px);   // 高度等于100px， 所以会执行混合中代码，并且宽度的值是传递的200px
  .model(100px, 100px);   // 宽度高度都等于100px，所以会执行混合中代码
}

sass 可以通过 @if(条件语句){} @else if(条件语句){} ... @else(条件语句){} 来判断

9. 循环

sass 支持两种循环：for循环和while循环

for循环

// @for $i from 起始整数 through 结束整数 {}
// @for $i from 起始整数 to 结束整数 {}
// 两者书写一样，区别在于 to 不包尾
ul{
  li{
    @for $i 3 through 6 {  // 第3到第6个li元素背景颜色变为红色
      &:nth-child(#{$i}){
        background-color: red;
      }
    }
  }
}

while循环

ul{
  li{
    $i: 3;
    @while($i <= 6) {
      &:nth-child(#{$i}){
        background-color: red;
      }
      $i: $i + 1;
    }
  }
}