用less给你的css减负

in 常用工具 with 0 comments, 4976 views

相对于原生css来说 less扩展了很多css不具备的功能 但又能很好的和css保持兼容,实在找不出不用它的理由; 😄相对scss来说个人觉得less更容易,本着够用就好的原则,可以说以下将提到的特性中的任意几样就足以让我坚持使用至今

循环输出CSS

.WHILE(@counter)when (@counter <= 54 ) {
    .poker-@{counter} {
        background-image: url("images/poker/poker_@{counter}.png");
    }
    .WHILE(( @counter + 1 ));// 递归调用自身
}
.WHILE(1);

相当于:

.poker-1 {
    background-image: url("images/poker/poker_1.png");
}

.poker-2 {
    background-image: url("images/poker/poker_2.png");
}
...
...
...

.poker-54 {
    background-image: url("images/poker/poker_54.png");
}

样式嵌套模拟css命名空间

.page-food {
    .hd {
        // ...
    }
    .bd {
        // ...
    }
}

相当于:

.page-food .hd {
    // ...
}
.page-food .bd {
    // ...
}

## 定义css变量(模板皮肤利器)

``` less
// Variables
@c-6:#666;
@border-color:#ededed;
@link-color:#0086b3; // 默认链接颜色
@link-hover-color:#990073; 

.link {
    color:@link-color;
}

父级选择器&

// 以链接为例子 &等同于父级a
a {
    &:link,&:visited: {
        color:blue;
    }
    &:hover,&:active {
        color:yellow;
    }
}

// 甚至可以跳出父级

.header {
    .nav {
        // ...
    }
    .index & {
        // ...
    }
}

相当于:

.header .nav {
    /* ... */
}
index .header .nav {
    /* ... */
}

样式文件分割Importing(方便模块化管理样式文件)

@import "base"; // base.less
@import "typo";
@import "header";
@import "footer";

同时支持单行和多行注释(类似js)

// 单行注释
// body {}
Responses ${replyToWho} / Cancel Reply