发布于 

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.需要在服务器环境下执行
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧

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