蹦蹬儿你个蹦蹬儿

Less is more

阅读量:

工作中为了模块化,我们会采用less进行开发。所以充分了解less的使用方法可以使开发变得更加有效率。

LESS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

下面介绍一下less的用法(更详细内容见官方文档):

一、LESS注释:

  1. /* 注释内容 */

这种注释方法编译后,注释内容会保留到css文件内容中。

  1. //注释内容
    这种注释方法编译后,注释内容不会保留到css文件中。

二、变量:

我们可以像js一样为css定义变量并重复使用它。
语法:@变量名:值;
LESS源码:

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

编译后的css:

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

三、混合

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

LESS源码:

.rounded-corners (@radius: 5px) {//带了默认值,如果调用时未传参数,则默认此值
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);//传了参数 改变了@radius的值
}

编译后的CSS:

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

LESS源码:

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

编译后的CSS:

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

但是我更建议定义类名来调用,不建议用标签或者多层嵌套。

陈柯伊

梦想一克拉 热血一卡车 眼泪一酒瓶 熬夜一光年

评论

文章目录