标签：style io ar color os 使用 sp strong 文件
今天在慕课网上完成了LESS的基础学习，下面是我的学习笔记。
总共有三个文件：index.html、main.less、mian.css，其中 mian.css 是 main.less 经过Koala编译之后自动生成的。
下面是代码：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Less</title> <link rel="stylesheet" href="main.css"></head><body> <div class="div1"></div> <div class="box1"></div> <div class="box2"></div> <div class="box3_1"></div> <div class="box3_2"></div> <div class="radius_test1"></div> <div class="radius_test2"></div> <div class="clear"></div> <div class="sanjiao_demo"></div> <div class="sanjiao_t1"></div> <div class="sanjiao_t2"></div> <hr> <div class="box4"></div> <ul class="list"> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> </ul></body></html> |
|
01
02
03
04
05
06
07
08
09
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
|
@charset "utf-8";body{ margin: 0px; padding: 0px; background-color: #DFDFDF;}div{margin: 5px;}.clear{ clear: both;}/*一、注释 *注释有2中 *//*第一种注释，会显示在编译后的CSS文件中*///第二种注释，不会显示在编译后的CSS文件中/*二、变量 *先定义后使用，格式为 @name:value *注意name应遵循基本的变量名规则，value要带上单位 *///定义@width_200:200px;@height_300:100px;//使用.div1{ width: @width_200; height: @height_300; background-color: #53616D;}/*三、混合 *1.直接引用某个类的所有属性 *2.引用带参数无默认值的类属性 *3.引用带参数有默认值的类属性 */ //混合 1.box{ width: 200px;height: 50px; float: left;}.border{ border: solid 5px #3ECAAF;}.box1{ .border;//直接类名即可 .box;}//混合 2 带参数无默认值.border2(@border_width){ border: solid @border_width #3ECAAF;}.box2{ .box; .border2(10px);//因为无默认值，调用时必须带()且传入参数}//混合 3 带参数有默认值.border3(@border_width:7px,@bstyle:solid){ border: @bstyle @border_width #3ECAAF;}.box3_1{ .box; .border3();//有默认值，可不传参数}.box3_2{ .box; .border3(9px,dotted);//有默认值，传参可以覆盖默认值}//Demo 圆角.border_radius(@radius:5px){ -wekit-border-radius: @radius; -max-border-radius: @radius; border-radius: @radius;}.radius_test1{ .box; .border(); .border_radius();}.radius_test2{ .box; .border(); .border_radius(20px);}/*四、匹配模式*///应用背景：三角.sanjiao_demo{ width: 0px; height: 0px; overflow: hidden; border-width: 10px; border-color: transparent transparent red transparent; border-style: dashed dashed solid dashed;//解决IE6黑边问题}//4.1 匹配模式下写三角.sanjiao(top,@w:5px,@c:#f00){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed;}.sanjiao(bottom,@w:5px,@c:#f00){ border-width: @w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed;}.sanjiao(@_,@w:5px,@c:#f00){ width: 0px; height: 0px; overflow: hidden;}.sanjiao_t1{ .sanjiao(top,20px);}.sanjiao_t2{ .sanjiao(bottom,15px,blue);}//4.2 匹配模式 - 定位.pos(r){position: relative;}.pos(a){ position: absolute;}.pos(f){ position: fixed;}.pipei{ .box; background-color: green; .pos(r);}/*五、运算！！！【加减】运算符与前一个变量之间有空格，否则出错*/@abase:300px;.box4{ width: (@abase - 20)*2;//变量和运算符之间有空格 height: @abase + 3; height: @abase/2; color: #000+100; .border;}/*六、嵌套规则*//*一般的写ul li a 的方式.list{}.list li {}.list a {}.list a:hover {}.list span{}*/.list{ width: 800px; margin: 30px auto; padding: 0; list-style: none; li{ height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px; } a{ display: block; float: left; //&符号代表上一层选择器 &:hover{ color: red; } } span{ display: block; float: right; }}/*七、@arguments变量 @arguments代表形参中的所有参数*/.border_arg(@w:30px,@c:red,@sty:solid){ border:@arguments;//等价于border:@w @c @sty;}/*八、避免编译和important在使用Less中，可能用到一些非正规或者不需要计算的内容时，前面加~符号*///8.1 避免编译.test_no1{ width: ~‘calc(300px - 30px)‘;//特殊方法，需要浏览器去计算}.test_no2{ width: calc(300px - 30px);//对比上面的}//8.2 important,为所有引用的属性加上important.test_important{ .border!important;} |
|
01
02
03
04
05
06
07
08
09
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
|
@charset "utf-8";body { margin: 0px; padding: 0px; background-color: #DFDFDF;}div { margin: 5px;}.clear { clear: both;}/*一、注释 *注释有2中 *//*第一种注释，会显示在编译后的CSS文件中*//*二、变量 *先定义后使用，格式为 @name:value *注意name应遵循基本的变量名规则，value要带上单位 */.div1 { width: 200px; height: 100px; background-color: #53616D;}/*三、混合 *1.直接引用某个类的所有属性 *2.引用带参数无默认值的类属性 *3.引用带参数有默认值的类属性 */.box { width: 200px; height: 50px; float: left;}.border { border: solid 5px #3ECAAF;}.box1 { border: solid 5px #3ECAAF; width: 200px; height: 50px; float: left;}.box2 { width: 200px; height: 50px; float: left; border: solid 10px #3ecaaf;}.box3_1 { width: 200px; height: 50px; float: left; border: solid 7px #3ecaaf;}.box3_2 { width: 200px; height: 50px; float: left; border: dotted 9px #3ecaaf;}.radius_test1 { width: 200px; height: 50px; float: left; border: solid 5px #3ECAAF; -wekit-border-radius: 5px; -max-border-radius: 5px; border-radius: 5px;}.radius_test2 { width: 200px; height: 50px; float: left; border: solid 5px #3ECAAF; -wekit-border-radius: 20px; -max-border-radius: 20px; border-radius: 20px;}/*四、匹配模式*/.sanjiao_demo { width: 0px; height: 0px; overflow: hidden; border-width: 10px; border-color: transparent transparent red transparent; border-style: dashed dashed solid dashed;}.sanjiao_t1 { border-width: 20px; border-color: transparent transparent #ff0000 transparent; border-style: dashed dashed solid dashed; width: 0px; height: 0px; overflow: hidden;}.sanjiao_t2 { border-width: 15px; border-color: #0000ff transparent transparent transparent; border-style: solid dashed dashed dashed; width: 0px; height: 0px; overflow: hidden;}.pipei { width: 200px; height: 50px; float: left; background-color: green; position: relative;}/*五、运算！！！【加减】运算符与前一个变量之间有空格，否则出错*/.box4 { width: 560px; height: 303px; height: 150px; color: #646464; border: solid 5px #3ECAAF;}/*六、嵌套规则*//*一般的写ul li a 的方式.list{}.list li {}.list a {}.list a:hover {}.list span{}*/.list { width: 800px; margin: 30px auto; padding: 0; list-style: none;}.list li { height: 30px; line-height: 30px; background-color: pink; margin-bottom: 5px;}.list a { display: block; float: left;}.list a:hover { color: red;}.list span { display: block; float: right;}/*七、@arguments变量 @arguments代表形参中的所有参数*//*八、避免编译和important在使用Less中，可能用到一些非正规或者不需要计算的内容时，前面加~符号*/.test_no1 { width: calc(300px - 30px);}.test_no2 { width: calc(270px);}.test_important { border: solid 5px #3ECAAF !important;} |
标签：style io ar color os 使用 sp strong 文件
原文地址：http://www.cnblogs.com/likfe/p/lesscss-likfe.html
