（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;//不要添加引号
@width: 50%;
#wrap {
color: @color;
width: @width;
}
/* 生成后的 CSS */
#wrap {
color: #999;
width: 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;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 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:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
/* 生成的 CSS */
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
⑥变量运算
加减法时 以第一个数据的单位为基准
乘除法时 注意单位一定要统一
<p class="opration">变量运算</p>
@opration:opration;
@oprationWidth:200px;
@oprationHeight:200px;
@oprationColor:#222;
.opration{
background: @oprationColor*2;//#444444
width: ((@oprationWidth)-20)*5;//900
height:(@oprationHeight)+20;//220
}
⑦变量作用域
注意：就近原则
@scrop:scrop;
@h1:@h2;
@h2:80%;
#@{scrop}{
background:yellowgreen;
width: @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 {
width: 300px;
}
在Less中，我们也可以这样写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 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{
width:500px;
}
@media screen and (max-width:768px){
#wrap{
width:100px;
}
}
Less 提供了一个十分便捷的方式
/* Less */
#main{
//something...
@media screen{
@media (max-width:768px){
width:100px;
}
}
@media tv {
width:2000px;
}
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
#main{
width:100px;
}
}
@media tv{
#main{
width: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;
}
.
