less 日常用到的语法

1、变量
（1）定义

@width: 10px; 
@height: @width + 10px;

（2）url中使用变量

可定义引用文件、图片等的url前缀，使用时在""引号内通过@{}去使用变量

（3）选择器中使用变量可变插值

定义变量可用于选择器和样式属性中，通过@{}的方式使用。可通过更改不同的less变量前缀，达到换肤的目的。

（4）变量名中使用变量

在变量中引用变量，通过~"@{变量名}-属性值"的方式实现。可用于mixins函数中，通过传递不同的参数，实现不同的样式，减少重复代码。

2、混合（Mixin）
（1）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
// 定义 定义的样式也会被输出

.bordered { 
border-top: dotted 1px black; 
border-bottom: solid 2px black; 
}

#menu a { 
color: #111; 
// 使用，在这里使用被输出
.bordered();
 }

（2）问题：需要注意的是定义class样式会被输出，如果没有用到该样式，则建议不要使用定义样式的方式，生成多余的css代码。

（3）参数化混合

多参数传入时，参数可设置默认值，参数与参数直接用;分隔
混合可以带一个或多个参数，多个参数之间通过逗号或分号分隔。一般我们使用分号分隔参数，因为在 Less 中逗号有两种意思，可以表示 Mixins 参数分隔符或 CSS 列表分隔符。

// 不会输出样式
.color(@bg: f5f5f5; @color: #333) { 
background-color: @bg; 
color: @color;
 } 

.left {
 .color(); 
}
.right { 
 .color(#f0f0f0; #666); 
}

(4)可使用@arguments获取传入的所有参数

.right { 
 .color: @arguments; 
}

(5) rest参数

3、嵌套【 (& 表示当前选择器的父级）】

4、@规则和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。
@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。
这叫做冒泡（bubbling）。

5、运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
算术运算符在加、减或比较之前会进行单位换算。
计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。
无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
// example with variables
@base: 5%; @filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换，不转换为面积

6、calc()

7、转义

• 变量拼串
  结构： ~"字符@{变量}字符";

// 定义 【~"anything" 或 ~'anything' 形式的内容都将按原样输出】
@min768: ~"(min-width: 768px)”; 

.element {
// 使用
 @media @min768 { font-size: 1.2rem; } 
}

8、函数
Css属性值 使用函数调用

9、命名空间#bundle()，访问符#bundle.button();

10、映射

#colors() { 
primary: blue; secondary: green; 
}

 .button { 
color: #colors[primary];
 border: 1px solid #colors[secondary];
 }

11、作用域

首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承

12、注释

块注释和行注释都可以使用

13、导入
如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

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

14、扩展 :extend

// h1标签扩展拥有h2标签的样式属性

h1 { 
&:extend(h2); 
font-size: 16px; 
} 

h2 { color: #333; }

:extend(B选择器 all)

// 扩展某一选择器全部的样式属性
.test-expand-content:extend(.test-extend all) { text-decoration: underline; }

15、 !important关键词

在mixin混合后用!important，则mixin内部的所有属性都会继承，加上!important

16、merge合并属性

通过+和+_进行样式合并，前者用逗号隔开，后者用空格隔开