Frontend►Sass

002-@mixin与函数

Sass 高级特性详解

@mixin 定义与 @include 使用

@mixin 允许你定义可重用的样式块，@include 用于引入这些 mixin。

基本用法

1
2
3
4
5
6
7
8
9
10
11
// 定义 mixin
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

// 使用 mixin
ul {
  @include reset-list;
}

带样式的 mixin

1
2
3
4
5
6
7
8
9
10
@mixin rounded-corners {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.button {
  @include rounded-corners;
  background: blue;
}

参数传递与默认参数

带参数的 mixin

1
2
3
4
5
6
7
8
@mixin box($width, $height) {
  width: $width;
  height: $height;
}

.card {
  @include box(300px, 200px);
}

默认参数

1
2
3
4
5
6
7
8
9
10
11
12
@mixin box($width: 100px, $height: 100px) {
  width: $width;
  height: $height;
}

.small-box {
  @include box; // 使用默认值 100px × 100px
}

.large-box {
  @include box(500px, 300px);
}

关键字参数

1
2
3
4
5
6
7
8
9
10
@mixin position($top: null, $right: null, $bottom: null, $left: null) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

.absolute-box {
  @include position($top: 10px, $left: 20px);
}

可变参数

1
2
3
4
5
6
7
@mixin shadows($shadows...) {
  box-shadow: $shadows;
}

.box {
  @include shadows(0 1px 2px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.1));
}

@function 自定义函数

Sass 允许你定义自己的函数来处理值和计算。

基本函数

1
2
3
4
5
6
7
@function double($n) {
  @return $n * 2;
}

.sidebar {
  width: double(100px); // 200px
}

更复杂的函数

1
2
3
4
5
6
7
8
9
10
11
@function em($pixels, $context: 16px) {
  @return ($pixels / $context) * 1em;
}

h1 {
  font-size: em(32px); // 2em (32/16)
}

h2 {
  font-size: em(24px, 18px); // 1.333em (24/18)
}

内置函数

Sass 提供了丰富的内置函数来处理颜色、列表、映射等。

颜色函数

1
2
3
4
5
6
7
8
9
10
11
$primary: #3498db;

.button {
  background: $primary;
  border: 1px solid darken($primary, 10%);
  color: lighten($primary, 40%);
  
  &:hover {
    background: adjust-hue($primary, 15deg);
  }
}

常用颜色函数：

  • lighten($color, $amount)
  • darken($color, $amount)
  • opacify($color, $amount)
  • transparentize($color, $amount)
  • mix($color1, $color2, $weight)
  • complement($color)

列表函数

1
2
3
4
5
6
7
8
9
10
11
12
$colors: red, green, blue;

.item {
  color: nth($colors, 2); // green
  border: 1px solid list-nth($colors, -1); // blue
}

@each $color in append($colors, yellow) {
  .color-#{$color} {
    background: $color;
  }
}

常用列表函数：

  • length($list)
  • nth($list, $n)
  • append($list, $val)
  • join($list1, $list2)
  • index($list, $value)

映射(Map)函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$theme-colors: (
  "primary": #3498db,
  "secondary": #2ecc71,
  "danger": #e74c3c
);

.button-primary {
  background: map-get($theme-colors, "primary");
}

@each $name, $color in $theme-colors {
  .bg-#{$name} {
    background-color: $color;
  }
}

常用映射函数：

  • map-get($map, $key)
  • map-merge($map1, $map2)
  • map-remove($map, $keys...)
  • map-keys($map)
  • map-values($map)

数学函数

1
2
3
4
5
6
.container {
  width: percentage(2/3); // 66.66667%
  padding: ceil(4.2px); // 5px
  margin: floor(4.8px); // 4px
  line-height: round(1.4); // 1
}

常用数学函数：

  • abs($number)
  • ceil($number)
  • floor($number)
  • percentage($number)
  • random()
  • min($numbers...)
  • max($numbers...)

这些高级特性使 Sass 成为极其强大的样式表语言，能够处理复杂的样式逻辑和计算，大大提高开发效率和代码可维护性。