less---变量和混合(一)

less使用方式

1、客户端使用

引入需要编译的.less文件
<link rel="stylesheet/less" type="text/css" href="styles.less">
再引入less官网的less.js
<script src="less.js" type="text/javascript"></script>
注意： 
（1）确保包涵.less样式表在less.js脚本之前。 
（2）当你引入多个.less样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。 
（3）需要在服务器环境下使用！本地直接打开可能会报错！
（4）在node环境下编译less文件：lessc main.less>mian.css;

1、服务端使用

安装
npm install less
要下载最新稳定版本的 LESS，可以尝试像下面这样操作
npm install less@latest
使用
var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});
也可以手动调用解析器和编译器:
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

变量

一、定义变量

@gray:#555;
@orange:orange;
header{
    background: @gray;
    text-align: center;
    height: 100px;
    line-height: 100px;
}
编译后的css:
header{
  background: #555555;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

二、作为选择器和属性名的变量 
注意：使用时将变量以@{变量名}的方式使用

@gao: height;
.@{gao}{
    @{gao}:300px;
}
编译后的css:
.height {
  height: 300px;
}

三、作为URL的变量

@imgurl:"https://www.baidu.com/img/";
header{
    background:url("@{imgurl}bdlogo.png") no-repeat;
    height: 500px;
    border: 1px solid #333;
    background-size: 150px 150px;
}
编译后的css:
header {
  background: url("https://www.baidu.com/img/bdlogo.png") no-repeat;
  height: 500px;
  border: 1px solid #333;
  background-size: 150px 150px;
}

四、定义多个相同名称的变量时 
在定义一个变量两次或者多次时，只会使用当前作用域最后定义的变量，Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。

@var: 0;
.class{
  @var: 1;
    .brass {
      @var: 2;
      three: @var;  //这是的值是3
      @var: 3;
    }
  one: @var;  //这是的值是1
}
编译后的css:
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

五、延迟加载 
延迟加载：变量是延迟加载的，在使用前不一定要预先说明。 
意思是指：在前面使用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。

@color: #333;
div{
    width: 100px; height: 200px;
    font-size: @size;
    color: @color;
}
@size: 20px;
编译后的css:
div { width: 100px; height: 200px; font-size: 20px; color: #333333; 

混合

一、基本混合

@orange: orange;
.base{
    font-size: 30px;
    color: @orange;
}
h1{
    border: 1px solid red;
    .base;
}
编译后的css:
.base {
  font-size: 30px;
  color: #ffa500;
}
h1 {
  border: 1px solid red;
  font-size: 30px;
  color: #ffa500;
}

二、不带输出的混合，类名后面使用();(原来模板不出现)

@pink: pink;
.base2(){
    border: 1px solid blue;
    background: @pink;
}
footer{
    .base2;
}

编译后的css:
footer {
  border: 1px solid blue;
  background: #ffc0cb;
}

三、带选择器的混合

.hoverMix(){
    &:hover{
        border: 1px solid green;
    }
}

button{
    .hoverMix;
}

编译后的css:

button:hover {
  border: 1px solid green;
}

四、带参数的混合

@gray: #555;
.border( @color ){
    border: 1px solid @color;
}

h1{
    .border( @gray );
}

编译后的css:

h1 {
  border: 1px solid #555555;
}

五、带参数并且有默认值的混合 
像这样给参数设置默认值。有了默认值，我们可以不用设置属性值也能被调用。

.border2( @color:red ){
    border: 1px solid @color;
}

h2{
    .border2();
}
h3{
    .border2( @pink );
}

编译后的css:

h2 {
  border: 1px solid #ff0000;
}
h3 {
  border: 1px solid #ffc0cb;
}

六、带多个参数的混合 
如果传参的括号里全部都是以”，”分隔，那么会依次传给各个参数的值；如果传参的括号里既有”,”又有”;”那么会把”;”前面当作一个整体，传给一个值；

.mixin(@color;@padding:10;@margin:2){
    color: @color;
    padding: @padding;
    margin: @margin, @margin, @margin, @margin;
}
div{
    .mixin(@pink);
}
.div{
    .mixin(@orange;10,10,14,14;3);
}
编译后的css:

div {
  color: #ffc0cb;
  padding: 10;
  margin: 2, 2, 2, 2;
}
.div {
  color: #ffa500;
  padding: 10, 10, 14, 14;
  margin: 3, 3, 3, 3;
}

七、定义多个具有相同名称和参数数量不同的混合

.mixin2(@color) {
  color-1: @color;
}
.mixin2(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin2(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin2(#008000);
}
编译后的css:
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

注意：从编译的结果可以看出，less也有函数重载的特性。
当我们定义相同混合属性名，参数不同，然后.mixin(#008000);调用，第一和第二混合都能匹配，但是第三个缺少参数@padding的值，所以不会引用第三个混合属性

八、命名参数 
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用，这样就不必按照任意特定的顺序来使用参数；

.mixin3(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin3(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin3(#efca44; @padding: 40px);
}
编译后的css:
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

九、@arguments变量
@arguments代表所有的可变参数。
注意事项：
1. @arguments代表所有可变参数，参数的先后顺序就是你的（）括号内的参数的先后顺序。
2. 在使用的赋值，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值赋值给第三个……以此类推，但是需要注意的是假如我想给第一个和第三个赋值，你不能写（值1，，值3），必须把原来的默认值写上去！

.border3(@x:solid,@c:red){
  border: 21px @arguments;
}
.div1{
  .border3(dashed);
}
编译后的css:
.div1 {
  border: 21px dashed #ff0000;
}

十、匹配模式 
传值的时候定义一个字符，在使用的时候使用哪个字符，就调用那条规则。

.border4(all,@w: 5px){
  border-radius: @w;
}
.border4(t_l,@w:5px){
  border-top-left-radius: @w;
}
.border4(t_r,@w:5px){
  border-top-right-radius: @w;
}
.border4(b-l,@w:5px){
  border-bottom-left-radius: @w;
}
.border4(b-r,@w:5px){
  border-bottom-right-radius: @w;
}

footer{
  .border4(t_l,10px);
  .border4(b-r,10px);
  background: #33acfe;
}

编译后的css:

footer { border-top-left-radius: 10px; border-bottom-right-radius: 10px; background: #33acfe; }

十一、混合的返回值 
在使用混合时，有时会用到一些运算，这时就有返回值。

.average(@x, @y) {
  @average: ((@x + @y) / 2);
  @he:(@x + @y);
}
footer{
  .average(16px, 50px);
  padding: @average;
  margin: @he;
}
编译后的css:
footer {
  padding: 33px;
  margin: 66px;
}

十二、关键字!important 
在使用混合属性后面加上!important关键字，则混合中的所有属性都会加上关键字!important。

.fool(@bg:#333;@color: orange){
    background: @bg;
    color: @color;
}
.unimportant{
    .fool;
}
.important{
    .fool !important;
}
编译后的css:
.unimportant {
  background: #333333;
  color: #ffa500;
}
.important {
  background: #333333 !important;
  color: #ffa500 !important;
}