发布于 

less

less

less

less去写css代码优势:

1.less中可以进行数字运算

2.less中可以支持选择器中嵌套选择器

less使用步骤:

1.新建less文件

​ ☂ 文件名以less结尾

2.less按照css语法编写

​ ☂ less文件中完全可以使用css原生的语法去写

3.less语法

​ ☂ less嵌套语法(只适用嵌套结构的标签)

1
2
3
4
5
.nav{
li{

}
}

​ ☞支持数学运算

​ ☞支持变量的设置(如果某个值是一个变化的值,那么就可以将改制保存到变量中)

1
@div_width: ***;

​ ☞less混合写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//less中的函数 [类似于css中的公共样式]
#abc(){
color:red;
font-size:20px;
}
例如:
.public(){
width:300px;
height:300px;
background-color:skyblue;
}
.one{
color:red;
.public()
}
.two{
color:black;
.public()
}

less补充

引入less:

1
2
3
4
5
1.通过link引入less文件
Eg: <link rel="stylesheet/less" href="css/less" >
2.需要在网页中引入less.js文件
Eg:<script src="less.js"> <script>
3.需要在服务器环境下执行

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。