教程目录

继承

2022年06月14日更新

继承，就是你爸的东西，全都是你的。无论他有几套房，几辆车，只要是和他相关的东西，你全部也都拥有。

使用

<!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="button">
        <a href="#">搜索</a>
    </button>

    <p class="success">成功</p>
    <p class="error">失败</p>
    <p class="warning">警告</p>
</div>
</body>
</html>

.button {
  border: 1px solid pink;
  padding: 10px;
  color: #333;
}

// 虽然继承的是.button，但是与它相关的所有选择器也会被继承
.button a {
  display: block;
}

.success {
  @extend .button;
  border-color: green;
}

.error {
  @extend .button;
  border-color: red;
}

.warning {
  @extend .button;
  border-color: blue;
}

编译为

.button, .warning, .error, .success {
  border: 1px solid pink;
  padding: 10px;
  color: #333;
}

.button a, .warning a, .error a, .success a {
  display: block;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: blue;
}

1.png

%占位符

在继承里面，经常会使用%来定义占位符。但它不是真实的Css选择器，只是单纯的为了让其他地方@extend的时候来使用。

// % 开头的是占位符，并不是真正的CSS选择器
// 它必须通过 @extend 指令调用
%button {
  border: 1px solid pink;
  padding: 10px;
  color: #333;

  a {
    display: block;
  }
}

.success {
  @extend %button;
  border-color: green;
}

.error {
  @extend %button;
  border-color: red;
}

.warning {
  @extend %button;
  border-color: blue;
}

编译后

.warning, .error, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.warning a, .error a, .success a {
  display: block;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: blue;
}

可以看到，我们用 %button 定义了一个占位符，首先这个 %button 的内容，不会出现在最终的 css 输出文件中，但是，我们可以定义新的 css 类，然后使用 @extend 去扩展这个占位符。

上面的 success、error 和 warning，就分别扩展了 %button 的样式。

已添加到喜欢了