<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;
? //定義一個函數(shù)操禀；
? .test(@color:red,@size:14px){
? ? ? background: @color;
? ? ? font-size:@size;
? }
? .boxa{
? //? 不傳參沈跨，使用默認的缚甩；
? ? ? .test()
? }
? .boxb{
? //? 給函數(shù)傳參转捕；
? ? ? .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>
