Less的使用

最新推荐文章于 2023-09-21 15:53:07 发布

原创最新推荐文章于 2023-09-21 15:53:07 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

Less 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用CSS进行元素样式的创新方法，包括如何定义宽度、高度及边框，并展示了如何通过混合模式和模糊匹配来实现特定的效果。此外，还讲解了如何利用四则运算进行样式计算以及如何为子元素指定样式。

@w:100px;
@h:100px;
div{
    width: @w;
    height: @w=h;
    border:1px solid red
}

//混合模式
.border(@w:2px){
    border:@w solid red;
}

div{
    width:10px;
    height:10px;
    .border(2px);
}
//模糊匹配:会模糊匹配
.style(top,@w:2px,@color:green){
    border-top:@w solid @color
}
.style(bottom,@w:2px,@color:red){
    border-bottom:@w solid @color
}
div{
    width:@w;
    height:@h;
    .style(top)
}
//可以做四则运算
/*
<div>
    <P>
        <span>
            <a>
            </a>
        </span>
    </p>
</div>
*/
div{
    span{
        // 可以直接设置样式
        color:red;
        a{
            color:blue
            //&表示上一级:即a有hover事件
            &:hover{
                color:pinnk
            }
        }
    }
}