CSS 预编译

Sass

1、变量使用

定义一个变量，多处可以重复使用。

$color: #fff;
$left: left;

.index {
  border: 1px solid $color;
  background-color: $color;

  border-#{$left}-top-radius: 10px;
}

2、嵌套

使用&代替父选择器，用来处理一些伪类或者 active 样式。

$color: #fff;

.index {
  .index-header {
    border: 1px solid $color;
  }
  // hover
  &:hover {
    background-color: blue;
  }
  // 切换类名，和index同级别，不用写在外面
  &.index-active {
    background-color: red;
  }
}

3、继承

使用占位符%定义一个代码块，然后使用@extend 在另一个类中继承。也可以直接继承另一个类的属性。

$color: #fff;
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
. .index {
  @extend %message-shared;
}
.main {
  @extend .index;
}

4、混入

使用@mixin 定义一个代码块，然后使用@include 来引入，就可以把这个代码块引入重复使用。它的方便之处在于可以指定参数和缺省值。

定义一个混入

$color: #fff;
@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.index {
  @include center;
  border: 1px solid $color;
}

传参

$color: #fff;
// 定义一个默认值为1px的参数
@mixin border($width: 1px) {
  border: $width solid #ccc;
}
.index {
  @include border; // => border: 1px solid #ccc;
  &-header {
    @include border(10px); // => border: 10px solid #ccc;
  }
}

5、高级用法

数据类型、加减乘除运算、函数、循环、条件判断。https://www.sass.hk/docs/ (opens new window)

6、其他常见处理样式

1、&父选择器用法

// list-item元素之间添加一个边距，第一个不加，只加后面的元素。
.list {
  .list-item {
    display: block;
    & + .list-item {
      margin-left: 10px;
    }
  }
}

// 代替父类，只能替换父级的名
.index {
  .index-header {
  }
  .index-banner {
  }
}
.index {
  &-header {
  }
  &-banner {
  }
}

Less

1、变量使用

定义一个变量，多处可以重复使用。

@color: #fff;
@left: left;

.index {
  border: 1px solid @$color;
  background-color: @color;
}

2、嵌套

使用&代替父选择器，用来处理一些伪类或者 active 样式。

@color: #fff;

.index {
  .index-header {
    border: 1px solid @color;
  }
  // hover
  &:hover {
    background-color: blue;
  }
  // 切换类名，和index同级别，不用写在外面
  &.index-active {
    background-color: red;
  }
}

3、混入

直接定义一个类，然后引入，less 没有传参。

@color: #fff;
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.index {
  .center();
  border: 1px solid @color;
}