二、less的用法

一、可使用注释，注释分为两种，

　　一种是常见于css样式中的注释（这种注释会被解析到CSS中）      /* CSS中能看见我 */

　　另外一种也是常见于js代码中的注释（这种注释不会被解析到CSS）  // CSS中看不见我

二、能够定义和使用变量

　　变量是须要在前面使用@符号，即@width:100px;这样就定义了一个变量，接下来是使用它，

　　　　假设一个div的高度和宽度都是100px; 背景为红色，那么 能够这样先定义三个变量，

@width:100px; @height:100px; @bgRed:red; body{ background:#fff;
} div{ width:@width; height:@height; background:@bgRed;        
}

打开demo.css能够看到，koala软件（上一章里讲述了软件的下载和安装使用）已经编译好了

 

三、可使用混合（混合是将一个属性从一个规则集合（“混合”）到另外一个规则集的一种方法。）  

注意：下面部分CSS源码没有粘贴出来，只要运行，你就能看到CSS了

　　html

 

 　　less

　　css

 

在less中，引用的混合能够是这样使用的

若是你混合中某个类或者ID不但愿它出如今CSS中，能够这样使用

不只能够包含属性，还能够包含选择器。

 

好了，下面来介绍带参数的混合

第一种（必须传参）

 

第二种（参数设置了默认值，可不填）

上面有一点疏忽了，就是在参数这个传入的时候使用逗号仍是分号，官方给的解释是，分号才是主要的分隔符号,遇到分号时，逗号就被当作CSS列表中的内容，看下图

 

Extend--扩展（延伸）

 

 

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

 

 

.a:extend(.b) {}

// 上述块与下面的块相同
.a {
  &:extend(.b);
}

 

.c:extend(.d all) {
  // 匹配".d"全部的类型。 例如：".x.d" or ".d.x"
}
.c:extend(.d) {
  // 仅匹配 ".d"类型
}

 

运算：（使用了 + - * /）

 

 

注意：避免或者减小不一样单位的使用（能够查看编译好的css）

 

 

 

使用!important

 

//这是less代码
.foo (@bg: #000, @color: #fff) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

 

下面这段代码是官方上的，他容许同名不一样参的混合同时存在

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);  //这里虽然只是传入一个参数，可是因为第二个同名不一样参数它第二个参数时设置了默认值，因此结果是第一和第二个类都实现了，能够从CSS中看出。
}

混合参数能够经过名称而不是位置来提供参数值。 任何参数均可以由其名称引用，它们没必要是特殊的顺序

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

使用@arguments变量（@arguments在mixins中有一个特殊的含义，它包含了当调用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);
}

在less中可使用   mixin(...)  这个的形式来实现不定参数的输入

.mixin(...) {}        // 匹配 0-N 参数
.mixin() { }          // 匹配  0 参数
.mixin(@a: 1) {}      // 匹配 0-1 参数
.mixin(@a: 1; ...){ } // 匹配 0-N 参数
.mixin(@a; ...) { }   // 匹配 1-N 参数

也可使用@reset

.mixin(@a; @rest...) {
   // @rest绑定到@a以后的参数
   // @arguments绑定到全部参数
}

下面来讲一说匹配模式（--注意不是LOL或者是王者荣耀的匹配哦，这么小的字你们应该看不见）。

这里能够看到，定义了两个同名的混合类，能够看到你输入的参数是哪一个他就实现个样式。

下面还有能够设置公共的样式，在每次实现上面这些混合类时都会自动添加上只要加上下面这段代码便可

做为函数使用的Mixin

在mixin中定义的变量能够做为其返回值。 这样咱们能够建立一个能够像函数同样使用的mixin。

 

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // 调用 .average函数，并将值赋给@average
  padding: @average;    // 返回变量值
}

 

下面来介绍一下less中的if...else语句格式 能够将下面的代码复制到你的less中，保存查看编译好的css。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}


.class1 { .mixin(#ddd) } 
.class2 { .mixin(#555) }

 

循环 (less做为能够编译的css，循环是有的)，下面的代码就很清楚的展现了loop的使用

 

 

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 下一次循环（迭代）
  width: (10px * @counter); //循环（迭代）的结果，
}

div {
  .loop(5); //循环（迭代）的次数
}

 

 

for循环语句的实现

 

 

 

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

 

 

合并（Merge）

merge 特性可以聚合多个属性从而造成一个用逗号分隔的单一属性。merge 对于像 background 和 transform 这类属性很是有用。

 

 

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

 

 

 

 

 

 

最后来讲一下父选择符 -- &  

 

a {
  color: blue;
  &:hover {
    color: green;
  }
}

 

 

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

 

多个  &  的应用

 

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

 

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

 

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

 

 

 

p, a, ul, li {
border-top: 2px dotted #366;
  & + & {
      border-top: 0;
  }
}

 

 

 

less基本的东西都在这里可能还有所欠缺的知识点没有讲到，但愿有哪位大牛看到本文章时，可以帮忙指出欠缺之处（有错或者哪里讲的不够好），小弟我好补充完整。