教程目录

混合 Mixins

2022年06月14日更新

利用Mixin，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式封装成Mixin。

你可以将Mixin理解成JavaScript开发中的function，可以随意封装，传参，甚至还可以定义参数默认值。

使用

跨浏览器的圆角边框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/common.css">
</head>
<body>
<div class="wrap">
    <button class="notice">搜索</button>
    <img src="https://images.clwy.cn/user/3/avatar/9daff5.jpg!avatar" alt="" class="avatar">
</div>
</body>
</html>


@mixin rounded-corners {
  -moz-border-radius: 5px; // 兼容火狐浏览器
  -webkit-border-radius: 5px; // 兼容 chrome 或 safari
  border-radius: 5px;
}

.notice {
  @include rounded-corners;
}

.avatar {
  @include rounded-corners;
}

编译后

.notice {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.avatar {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

传参

@mixin rounded-corners($size) {
  -moz-border-radius: $size;
  -webkit-border-radius: $size;
  border-radius: $size;
}

.notice {
  @include rounded-corners(10px);
}

.avatar {
  @include rounded-corners(5px);
}

编译后

.notice {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.avatar {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

默认参数

@mixin rounded-corners($size: 5px) {
  -moz-border-radius: $size;
  -webkit-border-radius: $size;
  border-radius: $size;
}

.notice {
  @include rounded-corners(10px);
}

.avatar {
  @include rounded-corners;
}

编译后

.notice {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.avatar {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

已添加到喜欢了