less学习（二）

LESS 重复检测

.cont-main,
.style {
  font-family: "Comic Sans MS";
  font-size: 30px;
}
.cont-main{
  font-size: 30px;
}
.cont:extend(.cont-main, .style) {}

结果：由于第一项和第二项都匹配所以会产生两个重复的被扩展类

.cont-main,
.style,
.cont,
.cont {
  font-family: "Comic Sans MS";
  font-size: 30px;
}
.cont-main,
.cont {
  font-size: 30px;
}

LESS 保护的命名空间

@color: blue;
#namespace when (@color = blue) {
  .mixin() {
   color: red;
  }
}
p{
 #namespace .mixin();
}

结果：一定要互相匹配，否则解析不成功

p { color: red; }

LESS !important keyword

！important 关键字用于覆盖特定属性。 当它在mixin调用之后放置时，它会将所有继承的属性标记为！important 。

.mixin(){ color: #900; background: #F7BE81; } .para1{ .mixin(); } .para2{ .mixin() !important; }

结果：

.para1 { color: #900; background: #F7BE81; } .para2 { color: #900 !important; background: #F7BE81 !important; }

LESS Mixins具有多个参数

参数可以使用逗号或分号分隔。 使用逗号符号，可以将其解释为mixin参数分隔符或css列表分隔符。 如果在mixin中使用分号，那么它将用分号分隔参数，CSS列表将包含所有逗号。

.mixin(@color) { color: @color; } .mixin(@color; @padding: 2) { color: @color; padding: @padding; } .myclass { .mixin(#FE9A2E); }

结果：第二个mixin混合函数的@padding带有默认参数，所以可以在没有传padding的时候自动覆盖覆盖上一个mixin混合函数，如果没有默认参数则不会自动覆盖

.myclass { color: #FE9A2E; padding: 2; }

LESS @arguments variable

当调用mixin时， @arguments 包括所有传递的参数。 当不想使用单个参数时， @arguments 变量很有用。

.box-shadow(@x: 0; @y: 0; @height: 3px; @width: 3px) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .myclass { .box-shadow(2px; 2px); }

结果:使用@arguments代替所有变量

.myclass { -webkit-box-shadow: 2px 2px 3px 3px; -moz-box-shadow: 2px 2px 3px 3px; box-shadow: 2px 2px 3px 3px; }

LESS Mixin范围

.mixin() { @bgcolor: #C0C0C0; } .myclass{ .mixin(); background-color: @bgcolor; }

结果：获得mixin函数中的@bgcolor变量

.myclass { background-color: #C0C0C0; }

Less 导入选项（允许在 @import 语句中使用多个关键字，但必须使用逗号分隔关键字）

1，reference: 引入别的less文件到本less文件之后，本文件编译时是不会将此文件的代码加入进来解析的

2，inline：可以将css文件中的代码不编译加入到此less文件编译后的css文件中

3，less：会将文件导入为LESS文件，而不管文件扩展名是什么

4，css：会将文件导入为常规CSS，而不管文件扩展名

5，once：确保文件只导入一次，并且对该文件将忽略任何以下import语句

6，multiple：可以导入具有相同名称的多个文件。 这与once完全相反

7，optional：允许您在文件不存在时导入文件。 如果要导入的文件不存在并且未使用可选关键字，则LESS会抛出 FileError 错误并停止编译

Less Mixin Guards

如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。 它与mixin声明相关联，并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句，并执行计算以指定匹配的mixin。

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}
.mixin (@a) {
   color: @a;
}
.class1 {
   .mixin(#FF0000)
}
.class2 {
   .mixin(#555)
}
结果：
.class1 {
  font-size: 14px;
  color: #FF0000;
}
.class2 {
  font-size: 16px;
  color: #555;
}

LESS 合并逗号

+:它添加属性值到最后，以，分开。
.myfunc() {
  box-shadow+: 5px 5px 5px grey;
}
.class {
  .myfunc();
  box-shadow+: 0 0 5px #f78181;
}
结果：+可以合并代码
.class {
  box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
}
+_: 这是merge的另一个特性，它添加了属性值和空格。
.mixin() {
  transform+_: scale(1);
}
.class {
  .mixin();
  transform+_: rotate(2deg);
}
结果：以空格分开
.class {
  transform: scale(1) rotate(2deg);
}

Less 父选择器

可以使用＆(和号)运算符来引用父选择器。 嵌套规则的父选择器由＆运算符表示，并在将修改类或伪类应用于现有选择器时使用。
a {
  color: #5882FA;
  &:hover {
    background-color: #A9F5F2;
  }
}
结果：
a {
  color: #5882FA;
}
a:hover {
  background-color: red;
}
＆不会只代表最近的选择器，而是代表所有的父选择器。 
Less 组合爆炸：＆可以产生列表中的选择器的所有可能的排列，用逗号分隔。

p, div {
  color : red;
  font-family:Lucida Console;
  & + & {
    color : green;
    background-color: yellow;
    font-family: "Comic Sans MS";
  }
}
结果：
p,
div {
  color: red;
  font-family: Lucida Console;
}
p + p,
p + div,
div + p,
div + div {
  color: green;
  background-color: yellow;
  font-family: "Comic Sans MS";
}

Less 其他函数

color：它是一个代表颜色的字符串

image - size ：它用于从文件检查图像的维度。

image - width ：它检查文件中图像的宽度。

image-height ：它检查图像从文件的高度。

convert：数字从一个单位转换为另一个单位。

data - uri ：数据uri是统一资源标识符(URI)模式，其在网页中嵌入资源。

default：默认函数仅在保护条件内可用且与任何其他混合程序不匹配时才返回true

unit：默认函数仅在保护条件内可用且与任何其他mixin不匹配时才返回true

get - unit ：get-unit函数返回其中存在参数的单位，其数字和单位

svg - gradient：svg-gradient 是一种颜色到另一种颜色的转换。 它可以向同一元素添加许多颜色。

参数：

• escaped value or list of identifiers: 方向
• color [percentage] 对: 第一个颜色和它的相对位置（位置可选）
• color percent 对: (可选) 第二个颜色和它的相对位置
• ...
• color percent 对: (可选) 第 n 个颜色和它的相对位置
• color [percentage] pair: 最后一个颜色和它的相对位置（位置可选）