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

发表于

前言

这篇文章主要研究_scaffolding.scss，该样式在框架构建中起到细节的支撑作用，作为部分组件的前提依赖，它重置了目前和未来可能会有的浏览器自带属性，重置了响应式.sr-only样式激活(focus)状态的样式。

研究对象

_scaffolding.scss，它是bootstrap框架中7个核心样式之一。7个核心样式分别是scaffolding、type、code、gird、tables、forms、bottons。

scaffolding.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
 //
// 支架(作用：是其它组件样式的依赖)
// --------------------------------------------------
// 初始化 box-sizing
//
// Heads up! 此初始化可能会导致与一些第三方控件的样式冲突。
// 对于解决此类冲突的建议，参见
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
  @include box-sizing(border-box);  // 该方法为box-sizing属性添加了各浏览器内核前缀。
}
*:before,
*:after {
  @include box-sizing(border-box);
}
// body部分的初始化
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 注① 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
}
body { // body初始化五元素。字体，尺寸，行高，颜色，背景。
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color;
  background-color: $body-bg;
}
// 初始化字体相关标签元素
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
// 初始化链接(a标签)
a {
  color: $link-color;
  text-decoration: none;
  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }
  &:focus {
    @include tab-focus; // 在sass篇(四) - botton组件中已经了解到。该方法重置WebKit内核浏览器的focus样式。
  }
}
// Figures
//
//重置这里，因为以前的规范中没有'figure'边距。
//
figure { // figure现在在浏览器中被赋有默认margin值。
  margin: 0;
}
// Images
img {
  vertical-align: middle;
}
// 响应图像（确保图像不超出他们的父类）
.img-responsive {
  @include img-responsive; // 在sass篇(十) - carousel 轮播组件中已经了解到。该方法是用于处理图片自适应。
}
// 图片圆角
.img-rounded {
  border-radius: $border-radius-large;
}
// 略缩图
//
// 这个混合了thumbnails.less，针对thumbnail组件。
.img-thumbnail {
  padding: $thumbnail-padding;
  line-height: $line-height-base;
  background-color: $thumbnail-bg;
  border: 1px solid $thumbnail-border;
  border-radius: $thumbnail-border-radius;
  @include transition(all .2s ease-in-out);
  // 保持最大宽度为100%
  @include img-responsive(inline-block);
}
// 圆形图片样式
.img-circle {
  border-radius: 50%; // 设置半径百分比会使盒子呈圆形，这是一个常见的技巧了。
}
// 水平线规则
hr {
  margin-top:    $line-height-computed; // ~20px
  margin-bottom: $line-height-computed;
  border: 0;
  border-top: 1px solid $hr-border;
}
// 用于小屏响应式下的样式
//
// 详情: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
// 当.sr-only被激活focus时，展示只显示内容的样式处理。
// 用于 "跳转到主要内容" 链接; 详情 http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// 案例: HTML5 Boilerplate
.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

相关说明