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合并属性
通过+和+_进行样式合并，前者用逗号隔开，后者用空格隔开
网友评论