less知识点总结(二)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

变量：以@开头，由于变量只能定义一次，其本质就是“常量”。

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #;#header {
color: @light-blue;
}

执行后：

#header {
color: #6c94be;
}

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

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
} .post a {
color: red;
.bordered;
}

编译如下：

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

demo2如下：

#name {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
#name;
}

编译后如下：

#name {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

运算：

任何数字、颜色或者变量都可以参与运算。下面是一组案例：

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

作用域（scope）：

Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.(less的作用域和编程的语言的作用域非常类似，变量和混合首先在当前的作用域查找，找不到，编译器就向父级作用域查找)

@var: red;#page {
@var: white;
#header {
color: @var; // white
}
}

编译后如下：

#page #header {
color: #ffffff;
}

导入（Importe）

和你预期的工作方式一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less @import "typo.css";

URLs

// Variables
@images: "../img";// 用法
body {
color: #444;
background: url("@{images}/white-sand.png");
}

编译后：

body {
color: #444;
background: url("../img/white-sand.png");
}

混合二（Mixin）—— "Mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

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

编译后：

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

当使用混合的时候，圆括号可以省略（Notice that when you call the mixin, the parenthesis are optional）

.a(); //these lines do the same thing
.a;

不输出混合（not outputting the 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;
}

带参数的Mixin--

1. Mixin可以带参数，这个参数可以是变量，直接传递到选择器里面。

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

编译后：

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

参数可以有默认值：

.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius;
}

编译后：

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

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;
}

3. 多个参数传参数

.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
div {
.mixin(#008000;4px);//使用分号
}
p {
.mixin(red);
}
table{
.mixin(#008000,4px);//使用逗号
}

编译后：

div {
color-2: #008000;
padding-2: 4px;
}
p {
color-2: red;
padding-2: 2;
}
table {
color-2: #008000;
padding-2: 4px;
}