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

发表于

前言

这一章主要学习button。目的了解写法，通透其用意，提升抽象能力。

研究对象

button组件（按钮）。分_button.scss、_tab-focus.scss(即mixins)和button.scss。

_buttons.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
  // variant意思为多样的，易变的不定的。
  // 声明一个混合函数，接受三个变量分别表示字体颜色、背景色、线条色。并定义按钮状态改变后该三个参数的值。
  @mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  // 拥有下拉功能标识的按钮样式
  .open > &.dropdown-toggle {
    color: $color;
    background-color: darken($background, 10%);
        border-color: darken($border, 12%);
  }
  // 这里重复active是为了覆盖拥有下拉功能标识的按钮样式，并且避免背景色冲突。
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: $background;
          border-color: $border;
    }
  }
  // 有勋章功能标识的按钮样式，
  .badge {
    color: $background;
    background-color: $color;
  }
}
// 第一章讲过vertical和horizontal，xy轴线上一个类似Y轴表示垂直距离，一个类似X轴表示平行距离。
// 定义一个按钮尺寸的混合，接受5个参数，分别表示垂直内边距、平行内边距、字体尺寸、行高、边角弧度。
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
}

_tab-focus.scss

原文：

1
2
3
4
5
6
7
8
9
10
  // 重置WebKit内核focus样式
@mixin tab-focus() {
  // 默认值，目前还不知道thin是什么意思，应该是一个组合属性。
  outline: thin dotted;
  // WebKit下，outline属性，设置了auto后5px是个摆设。令注③
  outline: 5px auto -webkit-focus-ring-color;
  // 不明白5px已是鸡肋，为啥还用outline-offset，有可能为了兼容其它浏览器，但是官方又说这是重置webkit的样式……一定是我哪里理解有问题？
  outline-offset: -2px;
}

buttons.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
 //
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
.btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: $btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation; //注①，理解触控事件。
  cursor: pointer;
  background-image: none; // 注②，重置异常Firefox中Android的默认样式；
  border: 1px solid transparent;
  white-space: nowrap;
  //调用button-size方法、并传入默认值。
  @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
  //调用user-select实现兼容前缀，IE10+
  @include user-select(none);
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
    // 调用tab-focus方法，重置浏览器默认outline样式，定义新的outline样式。outline兼容IE8及以上
      @include tab-focus;
    }
  }
  &:hover,
  &:focus,
  &.focus {
    color: $btn-default-color;
    text-decoration: none;
  }
  // 这里调用的box-shadow和opacity方法就不赘述了，后面会详细说明。
  &:active,
  &.active {
    outline: 0;
    background-image: none;
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;
    pointer-events: none; // 禁用点击事件
    @include opacity(.65);
    @include box-shadow(none);
  }
}
// button-variant方法实例，实现主题多种状态样式，实际使用过程中通常要继承.btn，例(.btn.btn-info{})，但这里没有嵌套在.btn内，方便灵活使用。
// --------------------------------------------------
// 默认
.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
// 备选颜色
.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// 成功的绿色
.btn-success {
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// 信息提示 蓝色
.btn-info {
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// 红色预警
.btn-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// 危险和错误
.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}
// 链接按钮
// -------------------------
// 让人看起来像是用于链接的链接按钮样式
.btn-link {
  color: $link-color;
  font-weight: normal;
  border-radius: 0;
  &,
  &:active,
  &.active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    @include box-shadow(none);
  }
  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: underline;
    background-color: transparent;
  }
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: $btn-link-disabled-color;
      text-decoration: none;
    }
  }
}
// 按钮尺寸 实例button-size方法、前面已经说过
// --------------------------------------------------
.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
}
.btn-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
}
.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small);
}
// 块状的按钮、将display设置为block，会占据父元素宽度的100%。
// --------------------------------------------------
.btn-block {
  display: block;
  width: 100%;
}
// 垂直之间多个按钮的样式处理
.btn-block + .btn-block {
  margin-top: 5px;
}
// 覆盖input的display属性为blobk时的一些特异性。
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

相关说明

  • 注①：MDN之touch-action
    • 表示触控动作，指定用户触控时的滚动行为（例如，值为pan-x时表示触摸操作可以触发水平滚动；但垂直滚动被禁止；值为none时表示阻止页面滚动），且必须给定区域。
    • 适用于所有元素，包括：非替换的内联元素、表行、行组、表列和列组。
    • 浏览器也会处理触控动作，应用程序在监听触屏动作时应将意图告知浏览器。(英文水平有限，后面翻译不出来了)
    • 延伸知识之实现自定义手势
    • 延伸知识之移动端手势图解,在页面底部
  • 注②： git参考链接
  • 有时候官方文档看的很头疼，理解很费脑的啊，别人一会会就明白了我不仅看不懂值的意思还看不懂语法，显得我智商很低下QAQ。偶然发现 → 理解CSS属性值语法
  • 注③：-webkit-focus-ring-color是webkit内置属性，检索：-webkit-css-lib。不过这里面查不到该属性，可以随便逛逛，另外stackoverflow有对该属性的讨论 → What is -webkit-focus-ring-color