less学习下啦

最新推荐文章于 2023-11-16 11:42:47 发布

碉堡飞哥

最新推荐文章于 2023-11-16 11:42:47 发布

阅读量181

点赞数

分类专栏：前端 less

本文链接：https://blog.csdn.net/qq_27064559/article/details/82110366

版权

前端同时被 2 个专栏收录

183 篇文章 3 订阅

订阅专栏

less

1 篇文章 0 订阅

订阅专栏

less基本方法
这里写图片描述

来个vue项目的less的demo

<template>
  <div>
    <div class="aView">
        <ul>
            <li><a>111</a></li>
            <li><a>111</a></li>
            <li><a>111</a></li>
        </ul>
    </div>
    <div class="bView">
        <ul>
            <li><a>222</a></li>
            <li><a>222</a></li>
            <li><a>222</a></li>
        </ul>
    </div>
    <div class="cView">
    </div>
    <div class="dView">
    </div>
  </div>
</template>

<script>
  export default {
    components: {

    },
    data () {
      return {

      }
    },
    methods:{

    }
  }
</script>

<style lang="less" scoped>
    /*@key:value方法定义less变量*/
    @color:yellow;
    @height:100px;
    @width:100px;
    .aView{
        /*变量是可以运算的*/
        height: @height*3;
        width: @width*2;
        background-color: @color;
        li{
            a{
                color: red;
                text-decoration: none;
            }
            /*定义伪类,&指代所在的标签,现在是li*/
            &:hover{
                background-color: green;
            }
        }
    }
    /*支持id混合，类混合，不支持元素名称混合，一般不这么用（无故加了个没调用的id）*/
    #title{
        background-color: blue;
    }
    /*通过混合复用样式*/
    .bView{
        /*直接复制样式，后边加;表结束*/
        .aView;
        /*提高权重*/
        li a{
            /*不需要定义#title，只是复用它内部的样式*/
            #title;
        }
    }
    /*定义方法,方法内属性要@key形式,@borType:double设置默认,不传此参数时使用，传了就用传的*/
    .moduleFun(@bor, @borType:double){
        width: 100px;
        height: 100px;
        background-color: black;
        margin-top: 50px;
        border: @bor @borType red;
    }
    /*使用所以参数的@arguments也要传入参数*/
    .borTop(@a,@b,@c){
        width: 100px;
        height: 100px;
        margin-top: 50px;
        /*@arguments为调用所有参数*/
        border-top: @arguments;
    }
    /*定义设置投影方法*/
    .box-shadow(@bs){
        /*兼容浏览器*/
        -webkit-box-shadow: @bs;
        -moz-window-shadow: @bs;
        box-shadow: @bs;
    }
    .cView{
        /*使用方法*/
        .moduleFun(100px,solid);
        .box-shadow(10px 10px green);
    }
    .dView{
        /*调用方法参数间可加,间隔 也可直接空格间隔*/
        .borTop(1px, solid, red);
    }
</style>

    <div class="xxx2">222</div>
    <div class="xxx3">333</div>
    <div class="xxx4">444</div>


/*当参数500>@b>200时才触发css样式*/
.module(@a,@b,@c) when (@b>200) and (@b<500) {
    width: @a;
    height: @b;
    background-color: @c;
}
/*当参数@b>=500(不小于500)时才触发css样式*/
.module(@a,@b,@c) when not (@b<500) {
    width: @a;
    height: @b;
    background-color: yellow;
}

.xxx2{
    .module(200px,200px,red);
}
.xxx3{
    .module(200px,300px,red);
}
.xxx4{
    .module(200px,600px,red);
}