增加 Less 编译内容
此投稿已在 4年前 合并。
内容修改:
Old | New | Differences |
---|---|---|
1 | # 编译 Less 样式 | |
2 | ||
3 | ## Less 简介 | |
4 | ||
5 | [Less](http://lesscss.org/) 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使得 CSS 更易于维护和扩展。 | |
6 | ||
7 | 但是对于浏览器来说是无法识别这种语言书写的代码的,因此我们需要通过编译将 Less 语言书写的样式表代码转化成 CSS 样式表代码。 | |
8 | ||
9 | Less 输入: | |
10 | ||
11 | ```LESS | |
12 | @base: #f938ab; | |
13 | ||
14 | .box-shadow(@style, @c) when (iscolor(@c)) { | |
15 | -webkit-box-shadow: @style @c; | |
16 | box-shadow: @style @c; | |
17 | } | |
18 | .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { | |
19 | .box-shadow(@style, rgba(0, 0, 0, @alpha)); | |
20 | } | |
21 | .box { | |
22 | color: saturate(@base, 5%); | |
23 | border-color: lighten(@base, 30%); | |
24 | div { .box-shadow(0 0 5px, 30%) } | |
25 | } | |
26 | ``` | |
27 | ||
28 | 编译后输出 CSS: | |
29 | ||
30 | ```CSS | |
31 | .box { | |
32 | color: #fe33ac; | |
33 | border-color: #fdcdea; | |
34 | } | |
35 | .box div { | |
36 | -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); | |
37 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); | |
38 | } | |
39 | ``` | |
40 | ||
41 | ## 编译方法 | |
42 | ||
43 | 在 `webpack.mix.js` 文件中写入编译代码,如我们需要将 `resources/less/app.less` 目录中的 `app.less` 编译成 CSS: | |
44 | ||
45 | ``` | |
46 | mix.less('resources/less/app.less', 'public/css'); | |
47 | ``` | |
48 | ||
49 | 如果需要编译多个文件,那么我们就需要多次调用,可以通过流式调用实现: | |
50 | ||
51 | ``` | |
52 | mix.less('resources/less/app.less', 'public/css') | |
53 | .less('resources/less/admin.less', 'public/css'); | |
54 | ``` | |
55 | ||
56 | 如果你希望编译后的 CSS 文件名可以自定义,第二个参数就需要传递一个带有文件名的完全路径,之前的示例中我们传递的是目录作为参数: | |
57 | ||
58 | ``` | |
59 | mix.less('resources/less/app.less', 'public/stylesheets/styles.css'); | |
60 | ``` | |
61 | ||
62 | ## [覆盖隐含的 Less 插件选项](https://github.com/webpack-contrib/less-loader#options) | |
63 | ||
64 | 如果需要覆盖隐含的 Less 插件选项,可以传递第三个可选参数给 `mix.less()` 方法,这个参数接收一个JS 对象: | |
65 | ||
66 | ``` | |
67 | mix.less('resources/less/app.less', 'public/css', { | |
68 | strictMath: true | |
69 | }); | |
70 | ``` | |
71 | ||
1 | 72 |