深度了解bootstrap源码之sass篇（三）

发表于

前言

这一章主要学习组件alert。目的了解写法，通透其用意。提升建模能力。

研究对象

alert组件（警告框）。分_alert.scss(即mixins)和alert.scss

_alert.scss

源文：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  // 声明一个混合名为名为alert-variant，并传递三个固定参数(背景色，边框色，字体色)。
 @mixin alert-variant($background, $border, $text-color) {
  background-color: $background;
  border-color: $border;
  color: $text-color;
  // 初始换行线，使换行线的上边线颜色加深5%，颜色基于参数（边框色）
  hr {
    border-top-color: darken($border, 5%);
  }
  // 初始样式，用于链接样式，指定文本颜色加深10%，颜色基于参数（字体色）。
  .alert-link {
    color: darken($text-color, 10%);
  }
}

alert.scss

源文：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 初始样式
.alert {
  padding: $alert-padding;
  margin-bottom: $line-height-computed;
  border: 1px solid transparent;
  border-radius: $alert-border-radius;
  // 用于头部的或大号的警告框
  h4 {
    margin-top: 0;
    // 指定h4继承$headings-color，h1~h4和a标签一样没有默认的color属性，所以要设置inherit。
    color: inherit;
  }
  // 指定有链接类的样式
  .alert-link {
    font-weight: $alert-link-font-weight;
  }
  // 指定文本标签的间距使其内容对齐
  > p,
  > ul {
    margin-bottom: 0;
  }
  > p + p {
    margin-top: 5px;
  }
}
// 右上角关闭按钮样式
//
// 固定在右上角的关闭按钮样式
.alert-dismissable, // 3.2.0之前版本样式名
.alert-dismissible {
  padding-right: ($alert-padding + 20);
  // 定位
  .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }
}
// 场景
//
// 警告框场景类样式，调用混合alert-variant。分别设置背景色，线条色，文本色。
.alert-success {
  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

知识点

@mixin与 @mixin ：声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

darken：sass函数，表示颜色加深。调用方法为darken($color,$amount)，第一个参数为颜色值，第二个参数为百分比。