less学习笔记

一 前期准备工作：

• 1.下载less编辑器，下载地址：koala-app.com/index-zh.ht…
• 2.建立less文件，在style.css中建立；
• 3.在新建立的less文件中，声明文档头部@charset
• “utf-8”，把less文件拖到考拉编辑之中，在koala编辑器中找到less文件，右键，输出路径，文件名改成main.css文件，点击右侧，执行编辑，在index.html中用link把新生成的main.css引入即可，直接在less文件中写样式
• 4.koala编辑器右侧有输出方式选择， （1）：normal是正常样式 （2）：compress是以压缩的方式输出

二 正式开发：

1.注释两种选择：
（1）：/**/  可保留的注释
（2）：//     不可保留的注释
2.变量
声明变量用@  后面加随意起的名字   例如：@height，@width;
例子：@height = 200px；
              .box{height:@height}     --->输出 .box{width=200px;}
3.混合
把  .border中的属性全部放到 .box中
例子：  .box{
    height:@height
    .border
}        --->输出 .box{height:@height；border:1px solid red}
.border{border:1px solid red}
4.混合--可以带参数的
例子：.border-02(@border-width){
                border:solid red @border-width
           }
        .box{
            .border-02(30px)
        }
5.混合--可以带默认值（也可以直接更改默认值）
例子：.border-02(@border-width：10px){
                border:solid red @border-width
           }
        .box{
            .border-02()
        }        ---->1.使用默认值10px
        .box{
            .border-02(30px)
        }        ---->2.更改默认值为30px
6.匹配模式
@-   ： 是全部带上的意思
7.运算：直接进行加减乘除 + - * /
             颜色值也可以运算，原理是讲#ccc转成260数字进行计算
8.嵌套：尽量避免多次嵌套，最多不要超过三层嵌套
    &  ：这个符号是上一层的选择器
    例如在a后面加hover效果：
    a {
        float:left
        &:hover{red}
    }      --->划过的效果是红色的
9.@arguments变量
注释：@arguments包含了所有传递进来的参数，如果你不想单独使用每一个参数的话，可以像这样写：
.border(@w:10px;@h:20px;@c:red){
    border:@argumengs;     --->将变量全部传入到border中
}
.border-arg{
    .border(40px)       --->将宽度变成40px，其他值不变
}
10.避免编译：“~"" ”
例子：
方法一：
.test{
    width: ~"calc(300px-20px)"
}
方法二：
div {
       @diff : 30px;
       width : calc(~"100% - @{diff}");
  }
11.!impotant是优先级最高的意思
12. 引入另一个less文件或者css文件（在原来的less文件内部引入）
    @import "a"  --->less文件
    @import （less）“a.css”--->css文件
将新引入的文件写在那个位置，就会引入到那个位置