less 学习笔记

1 什么是less

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性,less 编译工具koala.exe

2 less语法

less中有很多的语法规则，但个人觉得less中比较常用的也是最重要的就下面几个：

变量、混合规则（mixin）、模式匹配、嵌套，& 指代上一层的选择器

不常用的：arguments 避免编译 ！important

1. 先来看下变量的简单用法，less中有变量运算，(参与运算任何一个参数带有单位即可)

//less 重点
//变量
//mixin 混合
//模式匹配
//嵌套规则

@test-100px;
@test-size:12px;
.wrap{
    color: red;
    (@test-width*3);
    font-size: @test-size*12;
    height: @test-width+12;
}

编译产出物，就是css啦

.wrap {
  color: red;
   300px;
  font-size: 144px;
  height: 112px;
}

2. 混合规则（mixin）,相当于定义一个类，在别的类中直接包含进来，看下具体情况吧

@test-100px;
@test-size:12px;
.wrap{
    color: red;
    (@test-width*3);
    font-size: @test-size*12;
    height: @test-width+12;
    /*下面是mixin进来的default-border的样式*/
    .default-border;
}

.default-border{
    border: solid 1px red;
    box-shadow: 0px 0px;
}

对应的css编译结果为==>

.default-borde会出现在css中，如果是定义成

.default-border(@varName){...}这个不会出现在产出物css中，定义的产出物只会出现在mixin中,看下面的代码-2

.wrap {
  color: red;
   300px;
  font-size: 144px;
  height: 112px;
  /*下面是mixin进来的default-border的样式*/
  border: solid 1px red;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}
.default-border {
  border: solid 1px red;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}

代码2-

.border01(@b1){
    border: solid @b1*10 red;
}

.width-1(@w1:100px;){
    font-size:@w1;
    border-radius: @w1 - 14;
}

.test{
    .border01(3);
    .width-1();
}

产出物代码2-

.test {
  border: solid 30 #ff0000;
  font-size: 100px;
  border-radius: 86px;
}

3.模式匹配

预先定义一系列的类，这些都会有不同的参数，不同的参数其内部的样式是不同的，mixin的时候根据传入的参数不同而自动匹配到不同的类

例如：四个不同方向的箭头

//direction bottom: 
.tg(bottom){
    border- @test-width - 70;
    border-color: red transparent transparent  transparent ;
    border-style: solid dashed dashed dashed ; 
}
//direction right: 
.tg(right){
    border- @test-width - 70;
    border-color:  transparent transparent  transparent red ;
    border-style:  dashed dashed dashed  solid; 
}
//direction left: 
.tg(left){
    border- @test-width - 70;
    border-color:  transparent red transparent  transparent  ;
    border-style:  dashed solid dashed dashed  ; 
}
//不管匹配到哪一个，这个一定会匹配到的，@_必须这种写法，所有的参数必须保持一致
.tg(@_){
     0;
    height: 0;
    overflow: hidden;
}

.sj{
    .tg(bottom);
}

对应产出物==> 所有.tg不出出现在css中,只有.sj会出现在css中

.sj {
//这就是想下的箭头
  border- 30px;
  border-color: red transparent transparent  transparent ;
  border-style: solid dashed dashed dashed ;
   0;
  height: 0;
  overflow: hidden;
}

3.嵌套规则和 &

.list{
    margin: 0;
    padding: 0;
    list-style:none;
    li{
         100px;
        height: 50px;
    }
    a{
        float: left;
        border:solid 1px red;
        //&代表他的上一层选择器符号
        &:hover{
            background: red;
        }
    }
}

产出物==>

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
   100px;
  height: 50px;
}
.list a {
  float: left;
  border: solid 1px red;
}
.list a:hover {
  background: red;
}

4. 其他不重要的

arguments

.t-arguments(@style:solid,@1px,@color:#ffddff){
    border: @arguments;
}
.test-arguments{
    .t-arguments(dashed,5px);
}

output==>

.test-arguments {
  border: dashed 5px #ffddff;
}

避免编译

/*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/
.t-comile{
    calc(210px-20px);
}
/*避免编译*/
.t-cancel-compile{
     ~'calc(210px-20px)';
}

output==>

/*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/
.t-comile {
   calc(190px);
}
/*避免编译*/
.t-cancel-compile {
   calc(210px-20px);
}

!important,会把所有的mixin进来的所有的属性都后缀加上！important

.t-important(@200px,@height:200px){
     @width;
    height: @height;
}
.test-important{
    .t-important() !important;
}

output==>

.test-important {
   200px !important;
  height: 200px !important;
}