（1）变量
我们常常在 CSS 中 看到同一个值重复多次，这样难易于代码维护
const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor); $(".arctive").css("background-color",bgColor);
只要我们修改 bgColor这一个变量， 整个页面的背景颜色都会随之改变。而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。
①值变量
/* Less */ @color: #999; @bgColor: skyblue;//不要添加引号 @ 50%; #wrap { color: @color; @width; } /* 生成后的 CSS */ #wrap { color: #999; 50%; }
以 @ 开头 定义变量，并且使用时 直接 键入 @名称。在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。
@lightPrimaryColor: #c5cae9; @textPrimaryColor: #fff; @accentColor: rgb(99, 137, 185); @primaryTextColor: #646464; @secondaryTextColor: #000; @dividerColor: #b6b6b6; @borderColor: #dadada;
②选择器变量
让 选择器 变成 动态
/* Less */ @mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //变量名 必须使用大括号包裹 color: #999; 50%; } .@{Wrap}{ color:#ccc; } #@{Wrap}{ color:#666; } /* 生成的 CSS */ #wrap{ color: #999; 50%; } .wrap{ color:#ccc; } #wrap{ color:#666; }
③属性变量
减少代码书写量
/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild;//变量名 必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; }
④url变量、字符串插值
项目结构改变时，修改其变量即可。
/* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名 必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); }
⑤声明变量
有点类似于混合方法
结构: @name: { 属性: 值 ;};
使用：@name();
/* Less */ @background: {background:red;}; #main{ @background(); } @Rules:{ 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); } /* 生成的 CSS */ #main{ background:red; } #con{ 200px; height: 200px; border: solid 1px red; }
⑥变量运算
加减法时 以第一个数据的单位为基准
乘除法时 注意单位一定要统一
<p class="opration">变量运算</p> @opration:opration; @oprationWidth:200px; @oprationHeight:200px; @oprationColor:#222; .opration{ background: @oprationColor*2;//#444444 ((@oprationWidth)-20)*5;//900 height:(@oprationHeight)+20;//220 }
⑦变量作用域
注意：就近原则
@scrop:scrop; @h1:@h2; @h2:80%; #@{scrop}{ background:yellowgreen; @h1; @h2:80%; }
⑧用变量定义变量
/* Less */ @variable:#variable; @speak:"name"; @name:"content展示：你好我叫熊熊"; @{variable}{ color: red; } @{variable}::after{ content: @@speak; color: green; } /* 生成的CSS */ #variable::after { content: "content展示：你好我叫熊熊"; color: green; }
（2）嵌套Nesting
①Less使您能够使用嵌套代替或与级联结合使用。 假设我们有以下CSS：
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { 300px; }
在Less中，我们也可以这样写：
#header { color: black; .navigation { font-size: 12px; } .logo { 300px; } }
生成的代码更简洁，并模仿HTML的结构。
②&的妙用
demo1：
还可以使用此方法将伪选择器与mixins捆绑在一起。 这是经典的clearfix hack清除浮动，重写为mixin（＆表示当前的选择器父级）：
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
demo2：
/* Less */ #header{ &:after{ content:"Less is more!"; } .title{ font-weight:bold; } &_content{//理解方式：直接把 & 替换成 #header margin:20px; } } /* 生成的 CSS */ #header::after{ content:"Less is more!"; } #header .title{ //嵌套了 font-weight:bold; } #header_content{//没有嵌套！ margin:20px; }
③媒体查询
在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写
#wrap{ 500px; } @media screen and (max-768px){ #wrap{ 100px; } }
Less 提供了一个十分便捷的方式
/* Less */ #main{ //something... @media screen{ @media (max-768px){ 100px; } } @media tv { 2000px; } } /* 生成的 CSS */ @media screen and (max768px){ #main{ 100px; } } @media tv{ #main{ 2000px; } }
唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。
④实战技巧
可以借助 Less 在元素中，去定义自己的私有样式
/* Less */ #main{ // something.. &.show{ display:block; } } .show{ display:none; } /*CSS结果*/ #main.show{ display:block; } .show{ display:none; //会被覆盖。 }
（3）混合
①无参数方法
方法犹如 声明的集合，使用时 直接键入名称即可
/* Less */ .card { // 等价于 .card() background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card;//等价于.card(); } /* 生成的 CSS */ #wrap{ background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); }
其中 .card 与 .card() 是等价的。个人建议，为了避免 代码混淆，最好写成 :
.card(){ //something... } #wrap{ .card(); }
要点：
`.` 与 `#` 皆可作为 方法前缀。
方法后写不写 `()` 看个人习惯。
②默认参数方法
Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是 全部参数。
传的参数中 必须带着单位。
/* Less */ .border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments;//指代的是 全部参数 } #main{ .border(0px,5px,30px,red);//必须带着单位 } #wrap{ .border(0px); } #content{ .border;//等价于 .border() } /* 生成的 CSS */ #main{ border:solid 1px red; box-shadow:0px,5px,30px,red; } #wrap{ border:solid 1px #000; box-shadow: 0px 50px 30px #000; } #content{ border:solid 1px #000; box-shadow: 10px 50px 30px #000; }
（4）作用域Scope
Less中的Scope与CSS的范围非常相似。 变量和mixin首先在本地查找，如果找不到它们，它将继承自“父”范围。
<div id="page"> 作用域 <p id="header">头部</p> </div> /* 作用域 */ @var: red; #page{ @var: green; #header { color: @var; // green } }
如果本地没有则会继承父级，即变为red红色。
与CSS自定义属性一样，mixin和变量定义不必放在引用它们的行之前。 因此，以下Less代码与前一个示例相同：
/* 作用域 */ @var: red; #page{ #header { color: @var; // green } @var: green; }
（5）注释comments
注释分为行注释和块注释，即单行注释和多行注释。
/* 一个块注释 * style comment! */ @var: red; // 这一行被注释掉了！ @var: white;
（6）运算（Operations）
算术运算+， - ，*，/可以对任何数字，颜色或变量进行操作。 如果可能，数学运算会考虑单位并在添加，减去或比较数字之前转换数字。
（7）命名空间
有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }
你只需要在 #header a中像这样引入 .button:
#header a { color: orange; #bundle > .button; }
.