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