Less使用语法（详细）

一、变量

1、使用@符号声明变量

例子：

@width:100px;//变量
@height:100px;
@fsize:20px;
.less{width: @width;//变量作为css属性的值height: @height;background-color: red;font-size: @fsize;
}

编译css结果：

.less {width: 100px;height: 100px;background-color: red;font-size: 20px;
}

2、变量插值使用@{}表示

上面的例子着重于在CSS规则中使用变量来控制值，但是它们也可以用于其他地方，比如选择器名称、属性名称、url和@import语句。这时就需要使用到插值

例子：

@divname:banner;
.@{divname}{//把banner作为类选择器的名称width: 500px;color: red;
}
#@{divname}{//把banner作为id选择器的名称background: red;
}
@image:"../img/product/";//路径变量
div.bg{background-image: url("@{image}bg.jpg");//把变量插入路径
}
@colorstr:color;
@topbottom:bottom;
div.bgs{@{colorstr}:red;//属性插值，把属性的名称作为变量 background-@{colorstr}: blue;border-@{topbottom}-left-radius:10px;border-@{topbottom}-right-radius:20px;
}

编译css结果：

.banner {width: 500px;color: red;
}
#banner {background: red;
}
div.bg {background-image: url("../img/product/bg.jpg");
}
div.bgs {color: red;background-color: blue;border-bottom-left-radius: 10px;border-bottom-right-radius: 20px;
}

3、变量名的变量插值

在Less中，您可以使用另一个变量定义一个变量的名称。

例子：

@names:'这是before内容';
@var:names;
//@@var=@names
.bg::before{content: @@var;
}

编译css结果：

.bg::before {content: '这是before内容';
}

4、运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

例子：

@var1 : 1px + 2 + 12px; //数值运算
@var2 : 10px * 50;
.test_var{/*var1:*/width: @var1;/*var2*/ height: @var2;
}
@color : #224488/2;//颜色运算
.test_color{color: @color;
}
@color2 : #112244;
.test_color2{color: @color2 * 2;
}

编译css结果：

.test_var {/*var1:*/width: 15px;/*var2*/height: 500px;
}
.test_color {color: #112244;
}
.test_color2 {color: #224488;
}

calc() 特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

5、属性作为变量

从less 3.00 开始，你可以使用$prop语法可以很容易地将属性当作变量来处理。有时，这可以使您的代码更轻松。

.widget {color: #efefef;background-color: $color;
}

编译css结果：

.widget {color: #efefef;background-color: #efefef;
}

二、转义（Escaping）

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

例子：

@min768: ~"(min-width: 768px)";
.element {@media @min768 {font-size: 1.2rem;}
}

编译css结果：

@media (min-width: 768px) {.element {font-size: 1.2rem;}
}

注意，从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px);
.element {@media @min768 {font-size: 1.2rem;}
}

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

三、函数（Functions）

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;.class {width: percentage(@width); // returns `50%`color: saturate(@base, 5%);background-color: spin(lighten(@base, 25%), 8);
}

官方less 函数手册

四、注释

和Sass一样 less 也支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会

例子：

/*
多行注释
*/
//单行注释

编译css结果：

/*
多行注释
*/

五、嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

1、使用嵌套

例子：

less内容

ul{li{width: 800px;background-color: orange;}
}

编译css结果：

ul li {width: 800px;background-color: orange;
}

2、规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。官网称之为冒泡（bubbling）。

例子：

.component {width: 300px;@media (min-width: 768px) {width: 600px;@media  (min-resolution: 192dpi) {background-image: url(/img/retina2x.png);}}@media (min-width: 1280px) {width: 800px;}
}

编译css结果：

.component {width: 300px;
}
@media (min-width: 768px) {.component {width: 600px;}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {.component {background-image: url(/img/retina2x.png);}
}
@media (min-width: 1280px) {.component {width: 800px;}
}

3、父元素选择器（&）

&操作符代表嵌套规则的父选择器，最常用在对现有选择器应用修改类或伪类时
例子：

less内容

ul{li{width: 800px;background-color: orange;&:hover{//&符号 代表父元素libackground-color: sienna;}}
}

编译css结果：

ul li {width: 800px;background-color: orange;
}
ul li:hover {background-color: sienna;
}

4、&组合生成所有可能的选择器列表

&可以在一个选择器中出现多次。这使得重复引用父选择器而不重复它的名称成为可能。注意&表示所有的父选择器(不仅仅是最近的祖先)。

例子：

div,p,a{//并集选择器& &{//拿到父级元素选择器，做组合，组合排列出所有的可能color: red;}
}

编译css结果：

div div,
div p,
div a,
p div,
p p,
p a,
a div,
a p,
a a {color: red;
}

六、继承 extend

Extend是一个Less伪类，它将选择器与它引用的内容相匹配。

1、使用extend（单继承）

例子：

.g_father{color: #555555;
}
.father:extend(.g_father){background: #FFFFFF;
}
.chird:extend(.father){border: 1px solid #000;
}

编译css结果：

.g_father,
.father,
.chird {color: #555555;
}
.father,
.chird {background: #FFFFFF;
}
.chird {border: 1px solid #000;
}

2、多重继承

.father{background: #FFFFFF;
}
.mother{width: 100%;
}
.chird2:extend(.father):extend(.mother){border: 1px solid #F0F0F0;
}

编译css结果：

.father,
.chird2 {background: #FFFFFF;
}
.mother,
.chird2 {width: 100%;
}
.chird2 {border: 1px solid #F0F0F0;
}

3、Extend “all”

当您在扩展参数中最后指定all关键字时，它告诉Less将该选择器匹配为另一个选择器的一部分。选择器将被复制，并且只有选择器匹配的部分将被替换为扩展，形成一个新的选择器。

.a.b.test,
.test.c {color: orange;
}
.test {&:hover {color: green;}
}.replacement:extend(.test all) {}

编译css结果：

.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {color: orange;
}
.test:hover,
.replacement:hover {color: green;
}

七、混合器 mixin

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

1、使用混合

例子：

.mixin{border: 1px solid #f0f0f0;
}
.useMixin{color: #555;.mixin;
}

编译css结果：

.mixin {border: 1px solid #f0f0f0;
}
.useMixin {color: #555;border: 1px solid #f0f0f0;
}

如果你想创建一个mixin，但是你不希望这个mixin出现在你的CSS输出中，在mixin定义后面加圆括号。

2、带参混合

参数可以用分号或逗号分隔。建议使用“分号”。符号逗号有双重含义:它既可以解释为mixin参数分隔符，也可以解释为css列表分隔符。

.mixin2(@a,@b){width: @a + @b;
}
.useMixin2{color: #555;.mixin2(100px,50px);
}

编译css结果：

.useMixin2 {color: #555;width: 150px;
}

3、设置默认值

.mixin3(@a:200px,@b:200px){width: @a + @b;
}
.useMixin3{color: #555;.mixin3();
}

编译css结果：

.useMixin3 {color: #555;width: 400px;
}

4、关键词传参

mixin引用可以通过参数的名称而不仅仅是位置来提供参数值。任何形参都可以通过它的名字来引用，它们不需要按照任何特殊的顺序:

.mixin(@color: black; @margin: 10px; @padding: 20px) {color: @color;margin: @margin;padding: @padding;
}
.class1 {.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {.mixin(#efca44; @padding: 40px);
}

编译css结果：

.class1 {color: #33acfe;margin: 20px;padding: 20px;
}
.class2 {color: #efca44;margin: 10px;padding: 40px;
}

5、@arguments

@arguments在mixin中有一个特殊的含义，它包含了当mixin被调用时传递的所有参数。如果你不想处理单独的参数，这是有用的:

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {-webkit-box-shadow: @arguments;-moz-box-shadow: @arguments;box-shadow: @arguments;
}
.big-block {.box-shadow(2px; 5px);
}

编译css结果：

.big-block {-webkit-box-shadow: 2px 5px 1px #000;-moz-box-shadow: 2px 5px 1px #000;box-shadow: 2px 5px 1px #000;
}

6、混合器可以作为函数使用（mixin配合when使用）

例子：

.mixin(@index) when(@index<6){//when 判断 index小于6// @index作为选择器一部分，用插值方式ul li:nth-child(@{index}){width:50px*@index;}.mixin(@index+1);//自己调用自己
}
.mixin(1);//调用了 混合器.

编译css结果：

ul li:nth-child(1) {width: 50px;
}
ul li:nth-child(2) {width: 100px;
}
ul li:nth-child(3) {width: 150px;
}
ul li:nth-child(4) {width: 200px;
}
ul li:nth-child(5) {width: 250px;
}

7、不定参 @rest

如果你想让你的mixin参数数量可变，你可以用… 。在变量名后使用它将把这些参数赋值给变量。

.mixin(@a; @rest...) {// @rest is bound to arguments after @a// @arguments is bound to all arguments
}

8、!important继承

在调用mixin之后使用!important关键字来标记它继承的所有属性为!important:

.foo (@bg: #f5f5f5, @color: #900) {background: @bg;color: @color;
}
.unimportant {.foo();
}
.important {.foo() !important;
}

编译css结果：在这里插入代码片

.unimportant {background: #f5f5f5;color: #900;
}
.important {background: #f5f5f5 !important;color: #900 !important;
}

八、判断 when

例子：

@width:1000px;
@height:400;
@num:500;
.mixin() when(@width>900){ul li when(@height>500){background-color: blue;//当变量width大于900且变量height大于500}
}
.mixin();
.nav when(@width>900px) and (@height>300) and (@num>300){// 与 ,使用andbackground-color:rgb(64, 64, 180);
}
.header when(@width>1000),(@height>200){// 或 ,逗号分开background-color: yellow;color:yellow;
}

编译css结果：

.nav {background-color: #4040b4;
}
.header {background-color: yellow;color: yellow;
}

九、import 导入

你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

例子：

@import './head_1.less';//如果.css 导入css文件
@import './head_2.less';//.less 导入less文件
@import './head_3.less';//导入head_3.less
header{.mixin_head();//调用 head_2.less里面混合器background-color:@color;//使用head_3.less的变量color:red;
}

head_1.less内容：

header{background-color: red;
}

head_2.less内容：

.mixin_head(){width:100px;height:200px;
}

head_3.less内容：

@color:blue;
@width:500px;
@height:300px;
.head{width: @width;height: @height;color:@color;font-size:20px;
}

编译css结果：

header {background-color: red;
}
.head {width: 500px;height: 300px;color: blue;font-size: 20px;
}
header {width: 100px;height: 200px;background-color: blue;color: red;
}

十、命名空间和访问符

(不要和 CSS @namespace 或 namespace selectors 混淆了)。

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：

例子：

#bundle() {.button {display: block;border: 1px solid black;background-color: grey;&:hover {background-color: white;}}.tab { ... }.citation { ... }
}

现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {color: orange;#bundle.button();  // 还可以书写为 #bundle > .button 形式
}

注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。

十一、映射（Maps）

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

例子：

#colors() {primary: blue;secondary: green;
}.button {color: #colors[primary];border: 1px solid #colors[secondary];
}

编译css结果：

.button {color: blue;border: 1px solid green;
}

.button的color成功设置为 #colors 的 primary 的值

十二、作用域（Scope）

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

例子：

@var: red;#page {@var: white;#header {color: @var; // white}
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：

@var: red;#page {#header {color: @var; // white}@var: white;
}

十三、Merge

merge特性允许将多个属性的值聚合到单个属性下以逗号或空格分隔的列表中。Merge对于像background和transform这样的属性很有用。

1、用逗号添加属性值

.mixin() {box-shadow+: inset 0 0 10px #555;
}
.myclass {.mixin();box-shadow+: 0 0 20px black;
}

编译css结果：

.myclass {box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

2、用空格追加属性值

.mixin() {transform+_: scale(2);
}
.myclass {.mixin();transform+_: rotate(15deg);
}

编译css结果：

.myclass {transform: scale(2) rotate(15deg);
}