less

1. 简介
 Lesscss是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为 CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 lesscss可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

2. 编译环境

 1:下载安装visual studio code工具
  在扩展中装插件
   1:easy less
   2:easy sass
   3:view in browser
  注:安装好之后重新加载一次

 2: 下载node.js安装(编译环境,将所写的less和sass转换成css文件)

3.less语法第一部分

1. less注释
 /*css形式 的注释 在 less中依然保留*/
 2. 变量
 变量 允许单独定义一系列通用的样式 ,在需要时可以调用
 a. 使用@符号定义
  eg:  @base: #f938ab;
   .box {color: @base; /*变量引用*/} 

 b. 使用@import导入(此方式也支持url)
  eg:  @images: "../img";
   body {
      color: #444;
      background: url("@{images}/white-sand.png");
    }

 c. 属性也支持变量的形式：
 eg:  @property: color;
  .widget {
     @{property}: #0ee;
     background-@{property}: #999;
  }

3.混合
  a. 普通混合---定义一些属性为一个class,在另一个class中调用
  eg:
   .bordered {
      border-top:1px dotted black;
      border-bottom: 2px solid black;
   }
   #menu a {
      color: #111;
      .bordered;
   }
  b. 混合方式一(带参数混合方式)
  eg:
   .border-radius (@radius) {
      border-radius: @radius;
   }
   .box{
    .border-radius(4px);
   } 　

 

d. 混合方式三(不暴露在css中,其他属性集合也可以使用)
  eg:
   .wrap () {
      text-align: center;
     line-height:40px;
    color:#ccc;
   }

   .box { .wrap } 

 e. 混合方式四  @arguments变量
  @arguments包含了所有传递进来的参数,可以处理多个参数.
  eg:
   ..box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
      box-shadow: @arguments;
   }
   .box{
    .box-shadow(2px, 5px);
   } 

4. 嵌套规则 : 嵌套的方式可以编写层叠样式
 eg:
  #header {
     color: black;
     .navigation {
        font-size: 12px;
     }
     .logo {
         300px;
        &:hover { text-decoration: none }
     }
  }
注意:
 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了.
这点对伪类尤其有用如 :hover　

4.less语法第二部分

1 . 运算 :
 运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可 以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果 你愿意的话可以操作属性值。
 eg :
  @base: 5%;
  @filler: @base * 2;
  @other: @base + @filler;
  @base-color:#666;
  @var: 1px;
  #header a {
   color: #888888/4;
   background-color: @base-color + #111;
   height: 100% / 2 + @filler;
   border-right: @var * 2;
   (@var + 4) * 2;
  }

2 . 命名空间 :
 为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起 来, 可以像下面这样在#bundle中定义一些属性集之后可以重复使用
 #bundle {
   .button () {
       display: block;
       border: 1px solid black;
       background-color: grey;
       &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
 }
 #header a {
    color: orange;
    #bundle > .button;
 } 
 .box{#bundle .button}

3.避免编译 :
 避免编译就是不编译,有时候需要输出一些不正确的CSS语法或者使用一些 LESS 不认识的专有语法,这时候就只需要代码直接显示,不经过编译
 eg : 动态计算宽度
  .box{
   ~”clac(100% - 10px)”;
  }

注意:需要在前面添加 ~

4 : !important  (一般在调试的时候用)
 在less中，某个类的属性值的最后面加上!important，应用该样式的级别最高。 
 eg :
  .box2{
   height:300px  !important;
  }
  .box2{
   height:100px;
   border:1px solid red;
  }