-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsass.html
259 lines (234 loc) · 40 KB
/
sass.html
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SASS规范 | 前端代码规范</title>
<meta name="description" content="为了增强团队开发协作、提高代码质量和提升编码速度的规范。">
<link rel="icon" href="/icons/favicon-32x32.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3eaf7c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3eaf7c">
<meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
<link rel="preload" href="/assets/css/0.styles.8123aa68.css" as="style"><link rel="preload" href="/assets/js/app.a742bda2.js" as="script"><link rel="preload" href="/assets/js/12.f3a88e84.js" as="script"><link rel="prefetch" href="/assets/js/13.81b8172a.js"><link rel="prefetch" href="/assets/js/2.4ce87602.js"><link rel="prefetch" href="/assets/js/3.b518ad7b.js"><link rel="prefetch" href="/assets/js/4.048c795e.js"><link rel="prefetch" href="/assets/js/5.60a20531.js"><link rel="prefetch" href="/assets/js/6.85e30da8.js"><link rel="prefetch" href="/assets/js/7.bf72ac98.js"><link rel="prefetch" href="/assets/js/8.c760dc1f.js"><link rel="prefetch" href="/assets/js/9.bc2f6831.js"><link rel="prefetch" href="/assets/js/10.28a81ff7.js"><link rel="prefetch" href="/assets/js/11.72b8f5e5.js"><link rel="prefetch" href="/assets/js/14.e781ae1d.js"><link rel="prefetch" href="/assets/js/15.020b10df.js"><link rel="prefetch" href="/assets/js/16.90709359.js"><link rel="prefetch" href="/assets/js/17.3df06e95.js"><link rel="prefetch" href="/assets/js/18.3731559d.js"><link rel="prefetch" href="/assets/js/19.4a84e198.js"><link rel="prefetch" href="/assets/js/20.79b8b31e.js"><link rel="prefetch" href="/assets/js/21.5ead28b6.js"><link rel="prefetch" href="/assets/js/22.be8fb46f.js"><link rel="prefetch" href="/assets/js/23.4bd3b1ba.js"><link rel="prefetch" href="/assets/js/24.6bb14c7f.js"><link rel="prefetch" href="/assets/js/25.5d6686b8.js"><link rel="prefetch" href="/assets/js/26.2fafad9e.js"><link rel="prefetch" href="/assets/js/27.42e9c46f.js"><link rel="prefetch" href="/assets/js/28.6e7fc3b6.js"><link rel="prefetch" href="/assets/js/29.2c08bc76.js"><link rel="prefetch" href="/assets/js/30.447cf794.js">
<link rel="stylesheet" href="/assets/css/0.styles.8123aa68.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/icons/apple-touch-icon-152x152.png" alt="前端代码规范" class="logo"> <span class="site-name can-hide">前端代码规范</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">代码规范</a></div><div class="nav-item"><a href="/markdown/" class="nav-link">markdown手册</a></div><div class="nav-item"><a href="https://github.com/yiibryan/front-end-docs/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
更新日志
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">代码规范</a></div><div class="nav-item"><a href="/markdown/" class="nav-link">markdown手册</a></div><div class="nav-item"><a href="https://github.com/yiibryan/front-end-docs/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
更新日志
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>开始使用</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/" class="sidebar-link">概述</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>HTML 规范</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/html/code.html" class="sidebar-link">代码规范</a></li><li><a href="/guide/html/note.html" class="sidebar-link">注释规范</a></li><li><a href="/guide/html/template.html" class="sidebar-link">文件模版</a></li><li><a href="/guide/html/webapp.html" class="sidebar-link">WebApp Meta</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>CSS 规范</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/css/code.html" class="sidebar-link">代码规范</a></li><li><a href="/guide/css/note.html" class="sidebar-link">注释规范</a></li><li><a href="/guide/css/sass.html" class="active sidebar-link">SASS规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/css/sass.html#语法选用" class="sidebar-link">语法选用</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#编码格式" class="sidebar-link">编码格式</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#sass注释规范" class="sidebar-link">SASS注释规范</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#嵌套规范" class="sidebar-link">嵌套规范</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#变量" class="sidebar-link">变量</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#混合-mixin" class="sidebar-link">混合(mixin)</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#占位选择器" class="sidebar-link">占位选择器 %</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#extend-继承" class="sidebar-link">extend 继承</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#for-循环" class="sidebar-link">for 循环</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#each-循环" class="sidebar-link">each 循环</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#function-函数" class="sidebar-link">function 函数</a></li><li class="sidebar-sub-header"><a href="/guide/css/sass.html#运算规范" class="sidebar-link">运算规范</a></li></ul></li><li><a href="/guide/css/reset.html" class="sidebar-link">重置样式</a></li><li><a href="/guide/css/query.html" class="sidebar-link">媒体查询</a></li><li><a href="/guide/css/webkit.html" class="sidebar-link">移动端常用私有属性</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>javascript 规范</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/javascript/code.html" class="sidebar-link">代码规范</a></li><li><a href="/guide/javascript/language.html" class="sidebar-link">语言规范</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>图片规范</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/image/format.html" class="sidebar-link">图片格式</a></li><li><a href="/guide/image/import.html" class="sidebar-link">图片引入</a></li><li><a href="/guide/image/quality.html" class="sidebar-link">图片质量</a></li><li><a href="/guide/image/size.html" class="sidebar-link">图片大小</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>命名规范</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/guide/name/dir.html" class="sidebar-link">命名规范</a></li><li><a href="/guide/name/image.html" class="sidebar-link">图片命名</a></li><li><a href="/guide/name/htmlcss.html" class="sidebar-link">HTML/CSS文件命名</a></li><li><a href="/guide/name/classname.html" class="sidebar-link">ClassName命名</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="sass规范"><a href="#sass规范" aria-hidden="true" class="header-anchor">#</a> SASS规范</h1> <h2 id="语法选用"><a href="#语法选用" aria-hidden="true" class="header-anchor">#</a> 语法选用</h2> <p>SASS有两种语法格式，一种是 SCSS (Sassy CSS)，另一种是缩进格式（Indented Syntax），有时称之为 Sass。</p> <h3 id="scss"><a href="#scss" aria-hidden="true" class="header-anchor">#</a> SCSS</h3> <p>SCSS语法基于 CSS 语法扩展，每一个有效的 CSS 文件都是一个有效的具有相同含义的 SCSS 文件，换种说法就是 SCSS 能识别大多数的 CSS hacks 写法和浏览器前缀写法以及早期的 IE 滤镜写法，这种格式以 .scss 作为扩展名。</p> <h3 id="sass"><a href="#sass" aria-hidden="true" class="header-anchor">#</a> Sass</h3> <p>Sass 使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 <a href="http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html" target="_blank" rel="noopener noreferrer">the indented syntax reference<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。这种格式以 .sass 作为拓展名。</p> <p>更详细的用法请阅读 SASS 官网文档：<a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html" target="_blank" rel="noopener noreferrer">DOCUMENTATION<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h3 id="团队约定"><a href="#团队约定" aria-hidden="true" class="header-anchor">#</a> 团队约定</h3> <p>考虑到 SCSS 语法对 CSS 语法友好的兼容性和扩展性，我们在使用 SASS 编写样式的时候，统一使用 SCSS 语法</p> <h2 id="编码格式"><a href="#编码格式" aria-hidden="true" class="header-anchor">#</a> 编码格式</h2> <blockquote><p>When running on Ruby 1.9 and later, Sass is aware of the character encoding of documents. Sass follows the CSS spec to determine the encoding of a stylesheet, and falls back to the Ruby string encoding. This means that it first checks the Unicode byte order mark, then the @charset declaration, then the Ruby string encoding. If none of these are set, it will assume the document is in UTF-8.</p></blockquote> <p>当在 Ruby1.9或更新的版本运行的时候，SASS 能识辨文档的字符编码。SASS 遵循 CSS 规范去确定样式文件的编码，进而转回 Ruby 字符串编码。这意味着SASS编译的时候会首先检测 BOM，然后到 @charset 声明，再到 Ruby 字符串编码，如果以上都没有设置，SASS 会认为文档的编码为 UTF-8</p> <h3 id="团队约定-2"><a href="#团队约定-2" aria-hidden="true" class="header-anchor">#</a> 团队约定</h3> <p>严格遵守上面 “CSS规范” 中的 <a href="/guide/css/code.html">“编码规范”</a></p> <p>更多关于 SASS 编码：<a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html" target="_blank" rel="noopener noreferrer">SASS Encodings<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="sass注释规范"><a href="#sass注释规范" aria-hidden="true" class="header-anchor">#</a> SASS注释规范</h2> <p>SASS支持 CSS 标准的多行注释 <code>/* */</code>，同时也支持单行注释 <code>//</code>。</p> <ul><li>多行注释在使用非 Compressed 模式进行编译后的输出文件中会保留下来，单行注释 <code>//</code> 侧会被移除</li> <li>多行注释和单行注释在 SASS 编译后输出的压缩 CSS 文件都会被移除</li> <li>当多行注释内容第一个字符是感叹号 “!” 的时候，即 <code>/*! */</code>，SASS 无论用哪一种编译方式编译注释都会保留</li> <li>注释内容可以加入 SASS 变量</li></ul> <h3 id="团队约定-3"><a href="#团队约定-3" aria-hidden="true" class="header-anchor">#</a> 团队约定</h3> <p>SCSS 文件内</p> <ul><li>全部遵循 CSS 注释规范</li> <li>不使用 <code>/*! */</code> 注释方式</li> <li>注释内不放 SASS 变量</li></ul> <p>标准的注释规范如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@charset</span> <span class="token string">"UTF-8"</span><span class="token punctuation">;</span></span>
<span class="token comment">/**
* @desc File Info
* @author liqinuo
* @date 2015-10-10
*/</span>
<span class="token comment">/* Module A
----------------------------------------------------------------*/</span>
<span class="token selector">.mod_a</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* module A logo */</span>
<span class="token selector">.mod_a_logo</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* module A nav */</span>
<span class="token selector">.mod_a_nav</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* Module B
----------------------------------------------------------------*/</span>
<span class="token selector">.mod_b</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* module B logo */</span>
<span class="token selector">.mod_b_logo</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* module B nav */</span>
<span class="token selector">.mod_b_nav</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><h2 id="嵌套规范"><a href="#嵌套规范" aria-hidden="true" class="header-anchor">#</a> 嵌套规范</h2> <h3 id="选择器嵌套"><a href="#选择器嵌套" aria-hidden="true" class="header-anchor">#</a> 选择器嵌套</h3> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">/* CSS */</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">body .jdc </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* SCSS */</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token selector">body <span class="token parent important">&</span> </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">/* CSS */</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.jdc_cover </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.jdc_info </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">.jdc_info_name </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">/* SCSS */</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token selector"><span class="token parent important">&</span>_cover </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector"><span class="token parent important">&</span>_info </span><span class="token punctuation">{</span>
<span class="token selector"><span class="token parent important">&</span>_name </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="属性嵌套"><a href="#属性嵌套" aria-hidden="true" class="header-anchor">#</a> 属性嵌套</h3> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">/* CSS */</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/icon.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* SCSS */</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token selector">background: </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
<span class="token property">image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/icon.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="变量"><a href="#变量" aria-hidden="true" class="header-anchor">#</a> 变量</h2> <p>可复用属性尽量抽离为页面变量，易于统一维护</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// CSS</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token property"><span class="token variable">$color</span></span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="混合-mixin"><a href="#混合-mixin" aria-hidden="true" class="header-anchor">#</a> 混合(mixin)</h2> <p>根据功能定义模块，然后在需要使用的地方通过 <code>@include</code> 调用，避免编码时重复输入代码段</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// CSS</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token keyword">@mixin</span> <span class="token function">radius</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$radius</span></span><span class="token punctuation">:</span>5px<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token variable">$radius</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token keyword">@include</span> radius<span class="token punctuation">;</span> <span class="token comment">//参数使用默认值</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token keyword">@include</span> <span class="token function">radius</span><span class="token punctuation">(</span>10px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// CSS</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/icon.png<span class="token punctuation">)</span> no-repeat -10px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/icon.png<span class="token punctuation">)</span> no-repeat -20px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token keyword">@mixin</span> <span class="token function">icon</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$x</span></span><span class="token punctuation">:</span>0, <span class="token property"><span class="token variable">$y</span></span><span class="token punctuation">:</span>0<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/icon.png<span class="token punctuation">)</span> no-repeat <span class="token variable">$x</span>, <span class="token variable">$y</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token keyword">@include</span> <span class="token function">icon</span><span class="token punctuation">(</span>-10px, 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token keyword">@include</span> <span class="token function">icon</span><span class="token punctuation">(</span>-20px, 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="占位选择器"><a href="#占位选择器" aria-hidden="true" class="header-anchor">#</a> 占位选择器 %</h2> <p>如果不调用则不会有任何多余的 css 文件，占位选择器以 <code>%</code> 标识定义，通过 <code>@extend</code> 调用</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">//scss</span>
<span class="token selector"><span class="token placeholder">%borderbox</span> </span><span class="token punctuation">{</span>
<span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token keyword">@extend</span> <span class="token placeholder selector">%borderbox</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="extend-继承"><a href="#extend-继承" aria-hidden="true" class="header-anchor">#</a> extend 继承</h2> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// CSS</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token keyword">@extend</span> .jdc_1<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 或者</span>
<span class="token selector"><span class="token placeholder">%font_red</span> </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span>
<span class="token keyword">@extend</span> <span class="token placeholder selector">%font_red</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span>
<span class="token keyword">@extend</span> <span class="token placeholder selector">%font_red</span><span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="for-循环"><a href="#for-循环" aria-hidden="true" class="header-anchor">#</a> for 循环</h2> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// CSS</span>
<span class="token selector">.jdc_1 </span><span class="token punctuation">{</span><span class="token property">background-position</span><span class="token punctuation">:</span> 0 -20px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.jdc_2 </span><span class="token punctuation">{</span><span class="token property">background-position</span><span class="token punctuation">:</span> 0 -40px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.jdc_3 </span><span class="token punctuation">{</span><span class="token property">background-position</span><span class="token punctuation">:</span> 0 -60px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token keyword">@for</span> <span class="token variable">$i</span> <span class="token keyword">from</span> 1 <span class="token keyword">through</span> <span class="token selector">3 </span><span class="token punctuation">{</span>
<span class="token selector">.jdc_<span class="token variable">#{$i}</span> </span><span class="token punctuation">{</span>
<span class="token property">background-position</span><span class="token punctuation">:</span> 0 <span class="token punctuation">(</span>-20px<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token variable">$i</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>注意：<code>#{}</code> 是连接符，变量连接使用时需要依赖</p> <h2 id="each-循环"><a href="#each-循环" aria-hidden="true" class="header-anchor">#</a> each 循环</h2> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// CSS</span>
<span class="token selector">.jdc_list </span><span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/jdc_list.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_detail </span><span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/jdc_detail.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$name</span> in list, detail </span><span class="token punctuation">{</span>
<span class="token selector">.jdc_<span class="token variable">#{$name}</span> </span><span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/jdc_<span class="token variable">#{$name}</span>.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// CSS</span>
<span class="token selector">.jdc_list </span><span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/jdc_list.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc_detail </span><span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/jdc_detail.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// SCSS</span>
<span class="token keyword">@each</span> <span class="token variable">$name</span>, <span class="token variable">$color</span> in <span class="token punctuation">(</span>list, red<span class="token punctuation">)</span>, <span class="token punctuation">(</span>detail, blue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token selector">.jdc_<span class="token variable">#{$name}</span> </span><span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url</span><span class="token punctuation">(</span>/img/jdc_<span class="token variable">#{$name}</span>.png<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="function-函数"><a href="#function-函数" aria-hidden="true" class="header-anchor">#</a> function 函数</h2> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token keyword">@function</span> <span class="token function">pxToRem</span><span class="token punctuation">(</span><span class="token variable">$px</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">@return</span> <span class="token variable">$px</span> <span class="token operator">/</span> 10px <span class="token operator">*</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">pxToRem</span><span class="token punctuation">(</span>12px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="运算规范"><a href="#运算规范" aria-hidden="true" class="header-anchor">#</a> 运算规范</h2> <p>运算符之间空出一个空格</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px <span class="token operator">-</span> 50px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 30px <span class="token operator">/</span> 5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>注意运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// 正确的运算格式</span>
<span class="token selector">.jdc </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px <span class="token operator">-</span> 50px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px <span class="token operator">+</span> 50px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px <span class="token operator">*</span> 2<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px <span class="token operator">/</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">8/25/2018, 6:18:20 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/guide/css/note.html" class="prev">
注释规范
</a></span> <span class="next"><a href="/guide/css/reset.html">
重置样式
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/assets/js/12.f3a88e84.js" defer></script><script src="/assets/js/app.a742bda2.js" defer></script>
</body>
</html>