Less 中文文档

概览

做为CSS的扩展，Less不只向后兼容CSS，并且它使用现有的CSS语法添加额外特性。这使得学习变得容易，若是有疑惑，您能够回到普通的CSS

变量

控制在多个地方使用同一个值

基本使用

// 变量
@link-color:        #428bca; // 海蓝
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
    color: @link-color;
}
a:hover {
    color: @link-color-hover;
}
.widget {
    color: #fff;
    background: @link-color;
}

=>

a,
.link {
    color: #428bca;
}
a:hover {
    color: #3071a9;
}
.widget {
    color: #fff;
    background: #428bca;
}

注意，变量其实是“常量”，由于它们只能定义一次

插值

// Variables
@my-selector: banner;

@images: "../img";

@themes: "../../src/themes";

@fnord:  "I am fnord.";
@var:    "fnord";

@import "@{themes}/tidal-wave.less";

.@{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
}
body {
    color: #444;
    background: url("@{images}/white-sand.png");
}

img::after {
    content: @@var;  
}

=>

@import "../../src/themes/tidal-wave.less";

.banner {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
}
body {
    color: #444;
    background: url("../img/white-sand.png");
}
img::after {
    content: "I am fnord.";  
}

扩展

extend属于 less 的伪类, 它扩展匹配传入的选择器的样式, 区别于混合 mixin

nav ul {
    &:extend(.inline);
    background: blue;
}
.inline {
    color: red;
}

=>

nav ul {
    background: blue;
}

.inline,
nav ul {
    color: red;
}

扩展语法

.a:extend(.b) {}

// 等同于 

.a {
    &:extend(.b);
}

.c:extend(.d all) {
  // 扩展包括 .d 的全部实例, eg. .d x 和 x .d
}
.c:extend(.d) {
  // 仅扩展 .d
}

// 扩展多个
.e:extend(.f) {}
.e:extend(.g) {}

// 等同于

.e:extend(.f, .g) {}

Extend没法将选择器与变量匹配。若是selector包含变量，则extend将忽略它

@variable: .bucket;
@{variable} { 
    color: blue;
}
.some-class:extend(.bucket) {} // 匹配失败

没有重复检测

.alert-info,
.widget {

}

.alert:extend(.alert-info, .widget) {

}

=>

.alert-info,
.widget,
.alert,
.alert {

}

经典用例

避免添加基类

// 一个动物样式
.animal {
  background-color: black;
  color: white;
}

但愿拥有一个覆盖背景颜色的动物子类型

一种方法更改HTML

<a class="animal bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

一种方法经过扩展简化html
<a class="bear">Bear</a>

.animal {
    background-color: black;
    color: white;
}
.bear {
    &:extend(.animal);
    background-color: brown;
}

=>

.animal,
.bear {
    background-color: black;
    color: white;
}
.bear {
    background-color: brown;
}

减小CSS大小

Mixins将全部属性复制到选择器中，这可能致使没必要要的重复。
所以，可使用extends将选择器移动到但愿使用的属性，从而减小生成的css

// mixin 示例
.my-inline-block() {
    display: inline-block;
    font-size: 0;
}
.thing1 {
    .my-inline-block;
}
.thing2 {
    .my-inline-block;
}

=>

.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}

// extend 示例
.my-inline-block {
    display: inline-block;
    font-size: 0;
}
.thing1 {
    &:extend(.my-inline-block);
}
.thing2 {
    &:extend(.my-inline-block);
}

=>

.my-inline-block,
.thing1,
.thing2 {
    display: inline-block;
    font-size: 0;
}

混合 Mixin

.a, #b {
    color: red;
}
.mixin-class {
    .a();
}
.mixin-id {
    #b(); // 括号无关紧要
}

=>

.a, #b {
    color: red;
}
.mixin-class {
    color: red;
}
.mixin-id {
    color: red;
}

不输出Mixin

.my-mixin {
    color: black;
}
// 在它后面添加括号就不会输出
.my-other-mixin() {
    background: white;
}
.class {
    .my-mixin;
    .my-other-mixin;
}

=>

.my-mixin {
    color: black;
}
.class {
    color: black;
    background: white;
}

Mixins中的选择器

.my-hover-mixin() {
    &:hover {
        border: 1px solid red;
    }
}
button {
    .my-hover-mixin();
}

=>

button:hover {
    border: 1px solid red;
}

命名空间

#outer {
    .inner {
        color: red;
    }
}

.c {
    #outer > .inner;
    // #outer .inner;
    // #outer > .inner();
    // #outer.inner;
    // #outer.inner();
    // 等效
}

=>

#outer .inner {
    color: red;
}

.c {
    color: red;
}

受保护的命名空间

// 仅在保护条件返回true时才使用由其定义的mixins
#namespace when (@mode=huge) {
    .mixin() { /* */ }
}
// ==
#namespace {
    .mixin() when (@mode=huge) { /* */ }
}

!important关键字

!important在mixin调用以后使用关键字将其继承的全部属性标记为!important

.foo (@bg: #f5f5f5, @color: #900) {
    background: @bg;
    color: @color;
}
.unimportant {
    .foo();
}
.important {
    .foo() !important;
}

=>

.unimportant {
    background: #f5f5f5;
    color: #900;
}
.important {
    background: #f5f5f5 !important;
    color: #900 !important;
}

Mixin参数

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

#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}

=>

#header {
     border-radius: 4px;
}
.button {
     border-radius: 6px;
}

多个参数

// 单个参数
.mixin(@color) {
    color-1: @color;
}
// 分号分隔参数, 也能够是逗号, @padding 默认值为2
.mixin(@color; @padding: 2) {
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.some .selector div {
    .mixin(#008000);
}

=>

.some .selector div {
    color-1: #008000;
    color-2: #008000;
    padding-2: 2;
}

命名参数

.mixin(@color: black; @margin: 10px; @padding: 20px) {
    color: @color;
    margin: @margin;
    padding: @padding;
}
.class1 {
    // 能够指定传入的参数, 没有则按形参顺序,  命名参数无关顺序
    .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
    .mixin(#efca44; @padding: 40px);
}

=>

.class1 {
    color: #33acfe;
    margin: 20px;
    padding: 20px;
}
.class2 {
    color: #efca44;
    margin: 10px;
    padding: 40px;
}

@arguments

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
    box-shadow: @arguments; // 参数按顺序以空格为分隔符连接在一块儿
}
.big-block {
    .box-shadow(2px; 5px);
}

=>

.big-block {
    box-shadow: 2px 5px 1px #000;
}

Mixins做为函数

.mixin() {
    @width:  100%;
    @height: 200px;
}

.average(@x, @y) {
    @average: ((@x + @y) / 2);
}

div {
    .average(16px, 50px); 
    padding: @average;  
}

.caller {
    .mixin();
    width:  @width;
    height: @height;
}

=>

.caller {
    width:  100%;
    height: 200px;
}

div {
    padding: 33px;
}

父选择器

a {
    color: blue;
    &:hover {
        color: green;
    }
}

.button {
    &-ok {
        background-image: url("ok.png");
    }
    &-cancel {
        background-image: url("cancel.png");
    }
    
    &-custom {
        background-image: url("custom.png");
    }
}

.link {
    & + & {
        color: red;
    }
    
    & & {
        color: green;
    }
    
    && {
        color: blue;
    }
    
    &, &ish {
        color: cyan;
    }
}

p, a, ul, li {
    border-top: 2px dotted #366;
    & + & {
        border-top: 0;
    }
}

=>

a {
    color: blue;
}

a:hover {
    color: green;
}

.button-ok {
    background-image: url("ok.png");
}
.button-cancel {
    background-image: url("cancel.png");
}
.button-custom {
    background-image: url("custom.png");
}

.link + .link {
    color: red;
}
.link .link {
    color: green;
}
.link.link {
    color: blue;
}
.link, .linkish {
    color: cyan;
}

p,
a,
ul,
li {
    border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
    border-top: 0;
}

请注意，&表明全部父选择器（不单单是最近的祖先)