<template>
<div id="app">
<div class="box">
<h1>欢迎使用less</h1>
</div>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<ul>
<li v-for="(item, index) in 4" :key="index">{{ item }}</li>
</ul>
<div class="boxa">我是box1</div>
<div class="boxb">我是box2</div>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style lang='less'>
// less 可以使用变量 可以嵌套
*{
padding: 0;margin: 0;
}
@red: red;
@blue:blue;
@green:green;
@imgurl: "../assets/";
@k:100px;
//定义一个函数；
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.boxa{
// 不传参，使用默认的；
.test()
}
.boxb{
// 给函数传参；
.test(@color:orange,@size:30px)
}
ul{
width: @k;
height: @k;
background: @blue;
li:nth-of-type(1){
width: @k - 20px;
background: @red;
}
li:nth-of-type(2){
width: @k + 20px;
background: @green;
}
}
.box1{
width: @k*2;
height: @k*2;
background: @red;
.box2{
width: @k;
height: @k;
background: @blue;
.box3{
width: @k/2;
height: @k/2;
background: @green;
}
}
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
background: url("@{imgurl}logo.png") no-repeat;
h1 {
color: @red;
}
}
</style>
