summaryrefslogtreecommitdiffhomepage
path: root/zh-cn/less-cn.html.markdown
blob: 365a02874b0e39d3c2f868fc8539dd91c3ea215a (plain)
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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
---
language: less
filename: learnless-cn.less
contributors:
  - ["Saravanan Ganesh", "http://srrvnn.me"]
translators:
   - ["Jiang Haiyun", "http://www.atjiang.com"]
lang: zh-cn
---


Less是一种CSS预处理器,它增加了诸如变量、嵌套、mixin等功能。
Less(以及其它预处理器,如[Sass](http://sass-lang.com/))能帮助开发人员编写易维护,DRY (Don't Repeat Yourself) 的代码。

```css


//单行注释在编译成CSS后会被删除。

/* 多行注释将保留. */



/* 变量
==============================*/


/* 你可以将一个CSS值(如一个颜色值)保存到变量中。
   使用'@'符号来创建一个变量。*/

@primary-color: #a3a4ff;
@secondary-color: #51527f;
@body-font: 'Roboto', sans-serif;

/* 你可以在你的样式文件中使用这些变量。
   现在假如你想修改颜色,你只需修改一次即可。*/

body {
	background-color: @primary-color;
	color: @secondary-color;
	font-family: @body-font;
}

/* 以上将编译成: */

body {
	background-color: #a3a4ff;
	color: #51527F;
	font-family: 'Roboto', sans-serif;
}


/* 相比于在你的样式文件中逐个修改,这种方式维护性更好。 */



/* Mixins
==============================*/


/* 如果你要为多个元素编写同样的代码,
   你可能想实现轻松地重用。*/

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

/* 你只需简单地将选择子作为样式添加进来就能使用mixin了 */

div {
	.center;
	background-color: @primary-color;
}

/* 它将编译成: */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
div {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	background-color: #a3a4ff;
}

/* 通过在选择子后添加括号,可以使这些mixin代码不被编译 */

.center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

div {
  .center;
  background-color: @primary-color;
}

/* 将编译成: */
div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #a3a4ff;
}



/* 嵌套
==============================*/


/* Less允许你在选择子中嵌套选择子 */

ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: #f00;
	}
}

/* '&'将被替换成父选择子。*/
/* 你也可以嵌套伪类。 */
/* 注意过度嵌套将会导致代码难以维护。
   最佳实践推荐在嵌套时不超过3层。
   例如: */

ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: red;

		&:hover {
		  background-color: blue;
		}

		a {
		  color: white;
		}
	}
}

/* 编译成: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* 函数
==============================*/


/* Less提供的函数可以用来完成多种任务。
   考虑以下情况: */

/* 函数可以通过其名称及传入其所需的参数来调用。 */

body {
  width: round(10.25px);
}

.header {
	background-color: lighten(#000, 0.5);
}

.footer {
  background-color: fadeout(#000, 0.25)
}

/* 编译成: */

body {
  width: 10px;
}

.header {
  background-color: #010101;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* 你也可以定义自己的函数。函数非常类似于mixin。
   当你在函数和mixin之间抉择时,
   记住mixin最适合用来创建CSS而函数更适合于
   处理那些可能在你的Less代码中使用的逻辑。
   '数学运算符'部分的例子是转成可重用函数的最佳选择。*/

/* 该函数计算两数的平均值: */

.average(@x, @y) {
  @average-result: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "调用"mixin
  padding: @average-result;    // 使用它的"返回"值
}

/* 编译成: */

div {
  padding: 33px;
}



/* 扩展 (继承)
==============================*/


/* 扩展是在选择子间共享属性的一种方法。 */

.display {
  height: 50px;
}

.display-success {
  &:extend(.display);
	border-color: #22df56;
}

/* 编译成: */
.display,
.display-success {
  height: 50px;
}
.display-success {
  border-color: #22df56;
}

/* 扩展一条CSS语句优于创建一个mixin,
   这是由其组合所有共享相同基样式的类的方式决定的。
   如果使用mixin完成,其属性将会在调用了该mixin的每条语句中重复。
   虽然它不至会影响你的工作流,但它会在由Less编译器
   生成的的文件中添加不必要的代码。*/



/* 片段与导入
==============================*/


/* Less允许你创建片段文件。它有助于你的Less代码保持模块化。
   片段文件习惯上以'_'开头,例如 _reset.css,并被导入到
   一个将会被编译成CSS的主less文件中。*/

/* 考虑以下的CSS,我们将把它们放入一个叫_reset.css的文件中 */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Less提供的@import能用来将片段导入到文件中。
   它与传统的CSS @import语句不同,无需通过
   HTTP请求获取导入文件。Less提取导入文件
   并将它们与编译后的代码结合起来。 */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* 编译成: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* 数学运算符
==============================*/


/* Less提供以下的运算符: +, -, *, /, 和 %。
   相比于使用你事先手工计算好了的数值,它们
   对于直接在你的Less文件中计算数值很有用。
   以下是设置一个两列设计的例子。*/

@content-area: 960px;
@main-content: 600px;
@sidebar-content: 300px;

@main-size: @main-content / @content-area * 100%;
@sidebar-size: @sidebar-content / @content-area * 100%;
@gutter: 100% - (@main-size + @sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: @main-size;
}

.sidebar {
  width: @sidebar-size;
}

.gutter {
  width: @gutter;
}

/* 编译成: */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}


```

## 实践Less

如果你想在你的浏览器中尝试LESS,参阅:
* [Codepen](http://codepen.io/)
* [LESS2CSS](http://lesscss.org/less-preview/)

## 兼容性

Less可以用于任何项目中,只要你有程序能将它编译成CSS即可。你还需要验证你所使用的CSS是否与你的目标浏览器兼容。

[QuirksMode CSS](http://www.quirksmode.org/css/)和[CanIUse](http://caniuse.com) 对于检查兼容性来说都是不错的资源。

## 延伸阅读资料
* [Official Documentation](http://lesscss.org/features/)
* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/)