less使用
1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本
4、在main.js import less from 'less' Vue.use(less)
5、独立的vue文件需要引入less <style lang="less"></style>
less中变量的使用 定义方式：@key:value; 使用方式：@key;
字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")
写减法的时候左右要加空格，否则会理解为杠-
多层嵌套+变量计算；
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<style lang="less">
@k:100px;
.box1{
width: @k;
height:@k;
background: red;
.box2{
width: @k/2;
height:@k/2;
background: green;
.box3{
width: @k/3;
height:@k/3;
background: blue;
}
}
}
</style>
混合 = 函数
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<style lang="less">
//定义一个函数；
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.box1{
// 不传参，使用默认的；
.test()
}
.box2{
// 给函数传参；
.test(@color:green,@size:30px)
}
</style>
运算符
可以对高度、宽度、角度进行计算；
<ul>
<li v-for="item in 4">{{item}}</li>
</ul>
<style lang="less" scoped>
@k:10px;
ul{
list-style: none;
li{
border:1px solid ;
margin:10px 0 ;
}
li:nth-child(1){
width: @k + @k;
height:@k;
}
li:nth-child(2){
width: @k -5px;
height:@k;
}
li:nth-child(3){
width: @k * @k;
height:@k;
}
li:nth-child(4){
width: @k / 2;;
height:@k;
}
}
</style>
