Skip to content

Commit 9e7a484

Browse files
huang303513huang303513
committed
Less学习
1 parent c6441ea commit 9e7a484

File tree

3 files changed

+160
-3
lines changed

3 files changed

+160
-3
lines changed

‎Less即学即用/Less/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<link rel="stylesheet" href="style/main.css">
77
</head>
88
<body>
9-
9+
<div class="box"></div>
10+
<div class="radius_test"></div>
11+
<div class="sanjiao"></div>
12+
<div class="pipe"></div>
1013
</body>
1114
</html>

‎Less即学即用/Less/style/main.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,44 @@
22
body {
33
background-color: #00d4b4;
44
}
5+
.box {
6+
width: 300px;
7+
height: 300px;
8+
background-color: yellow;
9+
border: solid 5px pink;
10+
}
11+
.border {
12+
border: solid 5px pink;
13+
}
14+
.test_hunhe {
15+
border: solid #ffff00 30px;
16+
}
17+
.test_hunhe_03 {
18+
border: solid #008000 20px;
19+
}
20+
.radius_test {
21+
width: 100px;
22+
height: 40px;
23+
background-color: green;
24+
-webkit-border-radius: 10px;
25+
-moz-border-radius: 10px;
26+
border-radius: 10px;
27+
}
28+
.sanjiao {
29+
border-width: 100px;
30+
border-color: transparent transparent #cccccc transparent;
31+
border-style: dashed dashed solid dashed;
32+
width: 0;
33+
height: 0;
34+
overflow: hidden;
35+
}
36+
.pipe {
37+
width: 200px;
38+
height: 200px;
39+
background-color: green;
40+
position: relative;
41+
}
42+
.box_02 {
43+
width: 1600px;
44+
color: #c2c2c2;
45+
}

‎Less即学即用/Less/style/main.less

Lines changed: 115 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,118 @@
11
@charset "UTF-8";
22

3-
body{
4-
background-color: #00d4b4;
3+
body {
4+
background-color: #00d4b4;
55
}
6+
7+
//变量一定要用@开头，变量名后面一个：值
8+
@test_width: 300px;
9+
.box {
10+
width: @test_width;
11+
height: @test_width;
12+
background-color: yellow;
13+
14+
.border;
15+
}
16+
17+
//============================混合==================================
18+
.border {
19+
border: solid 5px pink;
20+
}
21+
22+
//混合可带参数
23+
.border_02(@border_width) {
24+
border: solid yellow @border_width;
25+
}
26+
27+
.test_hunhe {
28+
.border_02(30px);
29+
}
30+
31+
//混合-默认带值
32+
.border_03(@border_width:10px) {
33+
border: solid green @border_width;
34+
}
35+
36+
.test_hunhe_03 {
37+
.border_03(20px);
38+
}
39+
40+
.border_radius(@raidus:5px) {
41+
-webkit-border-radius: @raidus;
42+
-moz-border-radius: @raidus;
43+
border-radius: @raidus;
44+
}
45+
46+
.radius_test {
47+
width: 100px;
48+
height: 40px;
49+
background-color: green;
50+
51+
.border_radius(10px);
52+
}
53+
54+
//================匹配模式======================
55+
//.sanjiao{
56+
// width: 0;
57+
// height: 0;
58+
// overflow: hidden;
59+
// border-width: 10px;
60+
// border-color: transparent transparent red transparent;
61+
// border-style: dashed dashed solid dashed;
62+
//}
63+
.triangle(top,@w:5px,@c:#ccc) {
64+
border-width: @w;
65+
border-color: transparent transparent @c transparent;
66+
border-style: dashed dashed solid dashed;
67+
}
68+
69+
.triangle(bottow,@w:5px,@c:#ccc) {
70+
border-width: @w;
71+
border-color: @c transparent transparent transparent;
72+
border-style: solid dashed dashed dashed;
73+
}
74+
75+
.triangle(left,@w:5px,@c:#ccc) {
76+
border-width: @w;
77+
border-color: transparent @c transparent transparent;
78+
border-style: dashed solid dashed dashed;
79+
}
80+
81+
.triangle(right,@w:5px,@c:#ccc) {
82+
border-width: @w;
83+
border-color: transparent transparent transparent @c;
84+
border-style: dashed dashed dashed solid;
85+
}
86+
//不管你选择哪个，这里面的东西你必须待上。
87+
.triangle(@_,@w:5px,@c:#ccc) {
88+
width: 0;
89+
height: 0;
90+
overflow: hidden;
91+
}
92+
93+
.sanjiao {
94+
.triangle(top,100px)
95+
}
96+
//匹配模式-定位
97+
.pos(r){
98+
position: relative;
99+
}
100+
.pos(a){
101+
position: absolute;
102+
}
103+
.pos(f){
104+
position: fixed;
105+
}
106+
.pipe{
107+
width:200px;
108+
height:200px;
109+
background-color: green;
110+
.pos(r);
111+
}
112+
113+
//==========================运算==============================
114+
@test_01:300px;
115+
.box_02{
116+
width:(@test_01 + 20) * 5;
117+
color: #ccc - 10;
118+
}

0 commit comments

Comments
 (0)