首页 > 代码库 > LESS学习笔记 —— 入门

LESS学习笔记 —— 入门

2024-08-04 11:45:35   232人阅读

今天在慕课网上完成了LESS的基础学习，下面是我的学习笔记。

总共有三个文件：index.html、main.less、mian.css，其中 mian.css 是 main.less 经过Koala编译之后自动生成的。

下面是代码：

index.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
<!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>
main.less
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;
}
main.css-自动生成
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;
}

LESS学习笔记 —— 入门


联系
我们