Less练习模拟写ui库_自写 ui 库-CSDN博客

本文链接：https://blog.csdn.net/weixin_43993121/article/details/113182443

在这里插入图片描述

html文件

<body>

    <button class='btn-primary'>默认</button>
    <button class='btn-danger'>危险</button>

    <button class='btn-warn' onclick="change" id='change'>切换卡片样式</button>


    <div class="dark-card" id='card'>
        <div class="title">旅游日记</div>
        <div class="content">
            jlkfsjkdnfjksndfjsndjfk
        </div>
    </div>


    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
    <script>
        $(function() {
            var i = true
            $('#change').click(function() {
                if (i == true) {
                    $("#card").removeClass('dark-card').addClass('light-card')
                    i = false
                } else {
                    $("#card").addClass('dark-card').removeClass('light-card')
                    i = true
                }
            })
        })
    </script>
</body>

less文件

.button{
    width: fit-content;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    border: none;
    outline: none;
    border-radius: 3px;
    &:active{
        box-shadow:  0px 0px 5px grey;
    };
    &:hover{
        box-shadow:  0px 0px 5px grey;
    };
}

.btn-primary{
    .button;
    background: lightskyblue
}

.btn-danger{
    .button;
    background: rgba(255, 0, 0, 0.589);
}

.btn-warn{
    .button;
    background: lighten(orange,20%);
}

.card('light'){
    border: 1px solid lightgrey;
    background: white;
    .content{
       color: gray;
    }
}

.card('dark'){
    background: lightslategray;
    color: white;
   
}

.card(@_){
    width: 200px;
    height: 200px;
    border-radius: 20px;
    margin: 10px;
    box-shadow:3px 3px 3px lighten(lightgrey,10%);
    padding: 10px;
    box-sizing: border-box;
    .title{
        font-size: 25px;
        margin-bottom: 20px;
    }
}

.dark-card{
    .card('dark')
}
.light-card{
    .card('light')
}```