Less基础语法学习
Less（Leaner Style Sheet）是一门向后兼容的CSS扩展语言
1 变量
less可以定义变量，在编译时自动将变量名替换为用户定义的值。使用@定义和使用变量，变量声明可以在开头，也可以在使用变量后，不一定需要预先声明：
// 变量
@link-color: #428bca; //sea blue
// 用法
.link {
color: @link-color;
}
.link {
color: @link-color;
}
// 变量
@link-color: #428bca; //sea blue
除了在值中使用变量，在选择器名称、属性名、URL和@import语句，甚至是其他变量名中都能使用变量：
@mySelector: banner;
.@{mySelector} {
font-weight: bold;
}
@images: "../img";
body {
color: #444;
background: url("@{images}/white-sand.png");
}
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less"; //导入less文件
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
//将会编译为
content: "I am fnord.";
2 嵌套
less文件可以嵌套样式，使代码更符合html结构，更加简洁
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
可以用以下形式编写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
3 混合
less可以混合样式（类选择器或id选择器）：
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
编译为：
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
如果你不想输出混合集，可以在定义时加上一个括号：
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
编译为：
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
混合集不仅可以包含各种属性，还可以包含各种选择器:
.my-hover-mixin() {
&:hover { // &表示父选择器
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
编译为：
button:hover {
border: 1px solid red;
}
可以在混合集中嵌套多层id和class选择器，在使用时进行指定，相当于命名空间：
#my-library {
.my-mixin() {
color: black;
}
}
// 可以这样调用
.class {
#my-library > .my-mixin();
}
下面四种写法效果一样：
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();
4 函数
可以在混合集中设置参数，变为函数，在它进行混入操作时，会将变量传递给选择器代码块：
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
甚至可以设置参数的默认值:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius;
}
如果带有多个参数，可用；分隔：
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.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;
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
编译为：
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
你可以通过传递给混合集的参数，进行模式匹配，改变混合集的行为：
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) { //@_为任何值
display: block;
}
@switch: light;
.class {
.mixin(@switch; #888);
}
上述进行模式匹配，只有第二个和第三个模式匹配成功，编译为：
.class {
color: #a2a2a2;
display: block;
}
可以将混合用作函数使用，所有定义在一个mixin中的变量都是可见的，还可以用于调用它的作用域中（除非调用它的作用域定义了同名变量）
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
编译为：
div {
padding: 33px;
}
5 扩展（继承）
扩展与混合相似，但混合编译后的css相当于新增一块相同的样式内容，而扩展是在选择器的后面增加了一个你要引用的选择器名，所以扩展相比要节省更多的资源。
扩展有两种语法，效果一样，可以放置在选择器最后面（一定要在最后），也可以放置在规则集中：
.a:extend(.b) {}
// 上面的代码块与下面这个做一样的事情
.a {
&:extend(.b);
}
示例：
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
ul继承了类inline的属性，编译为：
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
如果要继承多个类，用逗号分隔：
.e:extend(.f, .g) {}
可以嵌套选择器中的扩展：
.bucket {
tr {
color: blue;
}
}
.some-class:extend(.bucket tr) {}
编译为：
.bucket tr,
.some-class {
color: blue;
}
扩展为精确匹配，它不管选择器是否以星号开头：
*.class {
color: blue;
}
.noStar:extend(.class) {} // 不会匹配*.class选择器
6 导入
less文件可以导入其他less或css文件，将其包含进来
@import "foo"; // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php"; // foo.php imported as a less file
@import "foo.css"; // statement left in place, as-is
除此之外less还支持循环、合并、条件以及众多内置函数功能，详情可见官网