less入门

less入门

• 安装
  首先安装node,执行命令 node install -g less安装完成后可以在任意窗口中使用lessc命令，将.less文件编译成css文件。

• 变量
  可以像其他语言一样声明变量

  @bgc:#ccc
    p{
        background-color:@bgc;
    }
  

  执行命令 lessc style.less style.css

• 混入
  允许将已有的class和id的样式应用到另一个不同的选择器上
  1.

  #circle{
  background-color: #4caf50;
  border-radius:100%
  }
  #small-circle{
    width: 50px;
    height: 50px;
    #circle
  }
  

    background-color: #4caf50;
    border-radius:100%
    width:@size;
    height:@size;
  }
  #small-circle{
    #circle(50px)
  }
  

• 嵌套
  可以用于已与页面的html结构相匹配的方式构造样式表，减少冲突的机会

  ul{
   background-color:@bgc;
   padding:10px;
  
   li{
    background-color:@bgc;
    border-top:1px solid #ccc;
   }
  }
  

• 运算
  可以对数值和颜色进行基本的数学运算

     @color:#ddd;

     #div{
     width:300-@div-width;
     color:#ddd-100
     }

• 函数

    div{
     height:30px;
     width:50px;
     background:@bgc;
     &:hover{
      background-color:fadeout(@bgc,50%)
     }
    }