less初探

CSS预处理器实践

最新推荐文章于 2022-06-26 23:57:13 发布

weixin_30478923

最新推荐文章于 2022-06-26 23:57:13 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/libin-1/p/5918884.html

本文介绍如何使用CSS预处理器实现变量定义、混合、继承等功能，并展示了条件判断和作用域的运用。

使用 @ 定义变量
    变量可以做运算
    
    @color : #000;
    @width : 1000px;
    
使用 & 表示当前类
    .box{
        &:hover{
            color : #000;
        }
    }

css 可以嵌套

    ul{
        display : block;
        li{
            float : left;
            a{
                font-size : 18px;
            }
        }
    }

继承 ： 直接在需要的地方引用 class或者 id 类

.clearfix{
    zoom : 1;
    display : block;
    &:after{
        content: "";
        visibility: hidden;
        clear: both;
        height: 0;
        display: block;
    }
}

.radius(@radius : 15px){
    border-radius: @radius;
}

.box{
    .clearfix;
    .radius(10px);
}

混合 ： 类似 js 中的函数, [或者叫继承]
.layout(){
    ...
}


作用域 ： 限制继承的条件，可以继承一个 类的部分内容

延伸 ： &:extend(.box); 括号中可以填写多个 类名  编译后的效果就是 css 中的分组


when 用来做条件判断

when not 不等于

/*
    使用 isnumber 来判断某个参数是否为 数字
 * */

.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){
    border: @width @style @color;
}

/*
    使用 iscolor 来判断某个参数是否为 颜色
 * */

.border(@color) when (iscolor(@color)){
    
    .border(1px , solid , @color);
}


.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){
    .border(1px , @solid);
}

转载于:https://www.cnblogs.com/libin-1/p/5918884.html