less

最新推荐文章于 2025-08-09 16:38:22 发布

转载最新推荐文章于 2025-08-09 16:38:22 发布 · 194 阅读

文章标签：

#css #less

其他同时被 2 个专栏收录

3 篇文章

订阅专栏

css3

1 篇文章

订阅专栏

less：css预编译

变量

@color: #4D926F;   //方便，容易修改，批量

#header {
    color: @color;   //注意格式
}
h2 {
    color: @color;
}

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

//被编译成
.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

变量提升，可以先声明后使用。也即按需求加载。

lazy-eval {
    width: @var;
}

@var: @a;
@a: 9%;

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

.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;         //默认@radius变量为5px
}
#footer {
    .rounded-corners(10px);  //覆盖，设置@radius变量为10px
}

可以定义不带参数属性集合，不让它暴露到 CSS 中去，还可以在其他的属性集合中引用，你会发现这个方法非常的好用：

.wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

pre { .wrap }

如果需要在 mixin 中不限制参数的数量，可以在变量名后添加 …，表示这里可以使用 N 个参数。

.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
}

!important关键字，在混合后面加此关键字，也就是important关键字的意思。

多参数混合略复杂

模式匹配
模式匹配：通过参数值控制混合的行为。

.mixin (dark, @color) {
    color: darken(@color, 10%);
}
.mixin (light, @color) {
    color: lighten(@color, 10%);
}
.mixin (@_, @color) {
    display: block;
}

//调用mixin
@switch: light;

.class {
    .mixin(@switch, #888);
}

也可以根据参数的数量进行匹配

.mixin (@a) {
    color: @a;
}
.mixin (@a, @b) {
    color: fade(@a, @b);
}

调用 .mixin 时，如果使用了一个参数，输出第一个 .mixin，使用了两个参数，则输出第二个。

Guards
Guards 被用来匹配表达式 (expressions)

.mixin (@a) when (lightness(@a) >= 50%) {
    background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
    background-color: white;
}
.mixin (@a) {
    color: @a;           //公用的css属性
}
.class1 { .mixin(#ddd) }      // background-color: black;color: #ddd;
.class2 { .mixin(#555) }      // background-color: white;color: #555;

Guards 支持的运算符包括：> >= = =< <；还可以使用可以使用 is* 函数。

几个检查基本类型的函数：

iscolor
isnumber
isstring
iskeyword
isurl
如果需要检查一个值（数字）使用了哪个单位，可以使用下面三个函数：

ispixel
ispercentage
isem

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }  
//可以使用逻辑and 或not

@arguments参数
@arguments参数包含了所有传递进来的参数。在做兼容性的时候比较好用。

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;            //2px 5px 1px #000;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

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

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

嵌套中注意使用&符号：如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

函数和运算

可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

命名空间
为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，你可以像下面这样在 #bundle 中定义一些属性集之后可以重复使用：

#bundle {
    .button () {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
}

//使用时，如下引用.button
#header a {
    color: orange;
    #bundle > .button;
}