less学习记录

less学习记录

less个人理解就是一句话：用类似JS的语法去写CSS。
less官网：http://lesscss.org/
less中文网 ：http://www.lesscss.cn/
less作为CSS的一种扩展，LESS CSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS语法。这样的设置使得学习LESS非常轻松，而且你可以在任何时候回退到CSS。说白了就是在less里可以按照以前的方法写CSS

不过使用方式分为两种:
第一种,客户端直接调用:

<link rel="stylesheet/less" href="less/less.less">
<!--用于编译LESS的-->
<script type="text/javascript" src="js/less.min.js"></script>

首先创建后缀为less文件，然后引入到页面中，切记rel="stylesheet/less"和引入css不一样，记得添加/less否则无效，然后下载less.js编译，引入到less文件后面即可。
注意:必须在服务器环境中才能生效，动态编译注入虚拟DOM或者内存中，类似ajax。webStorm也会将电脑设置为服务器，可以直接使用第一种方法。

我们开始随便写一点HTML

<div>
    <h1>Hello World</h1>
    <h2></h2>
    <span>11</span>
    <div>
        <span>22</span>
    </div>
</div>

然后进入less修改样式，如果我们想修改h1为红色可以像css一样的方法

 	<style>
        div>h1{
            width: 200px;
            height: 200px;
            color: red;
        }
    </style>

也可以

div{
  h1{
    width: 200px;
    height: 200px;
    color: red;
  }
}

变量、运算：

// JS中定义变量
var name = '张三';
//less中定义变量需要用符号@开头
@color:green;
@height:200px;
div{
  h1{
    height: @height / 2; //可以进行加减乘除，运算符必须用空格分开
    color: @color;
  }
}

混合：
混合可以将一个定义好的class A轻松的引入到class B中，从而简单的实现class B 继承class A的所有属性。我们还可以带参数的调用，就像使用函数一样。
例如：

@color:green;
@height:200px;
.border(@width:10px){
  border: @width solid red;
}
div{
  h1{
    height: @height / 2;
    color: @color;
    .border()
  }
}

说明：
1.混合的使用就和js的自定义函数类似，首先 混合 必须前面是以 . +混合名称开始。
2.结构：.名称(变量){}
3.可以有默认值，也可以没有默认值，没有的话，在调用的时候必须传参，有默认值的时候就可以不用传递参数，当然也可以传参修改默认值如：
.border(1px)
4.多个参数之间和js一样，用逗号（,） 隔开
5.如果需要添加伪类需要使用&符号，具体方法如下：

div{
  h1{
    height: @height / 2;
    color: @color;
    .border(1px);
    background: desaturate(#333333, 20%);
    &:hover{
      background: red;
    }
  }

}

函数：
直接查文档：http://www.lesscss.cn/
非常简单

saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
//值得注意的是@color 不能直接填写red，blue等 需要#333333

补充：
1.在一个LESS文件中导入另一个LESS文件:，只需要添加@import “less.less”; // 注意：less文件扩展名可选
2.// 不会被编译器编译的注释会报错，/**/ 是可以被编译器编译的 注释
3.~’ ’ 表示的是禁止被编译

暂时就了解这么多。。回头再查查官网，看看其他人的帖子再尝试补充吧~
第二种方法 预编译（提前编译）感觉太麻烦了不推荐。。。（其实也是懒得写了。。。）