less学习笔记

一、Less是什么

       Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。类似js中的jquery。

       Less 网站 http://lesscss.net，中文旧网站 http://old.lesscss.net/article/document.html

二、编译工具

       1、Koala编译，下载地址：http://koala-app.com/index-zh.html 

            使用方法：新建style.less文件，将整个目录拖到软件中，然后右键点击less文件设置输出路径，文件名为**.css，html中引入的是这个**.css。

       2、Node,js库

       3、浏览器端使用

        在vue环境引入less： npm install less less-loader --save-dev

三、Less知识点

       1、Less中的注释

             可以使用css中的注释 " /**/ " 。会被编译，在最后的css文件中看到

             也可以使用"//"注释。  编译时会自动过滤掉，不被编译 ，在最后的css文件中不会看到

        2、变量

              less声明变量用@开头，@变量名:值。

@300px;
.box{
    @width;
}

　　3、混合（Mixin）

             （1）不带参数

.border{
    border:1px solid #000;
}
.box{
    .border;
    margin:30px;
}

　　      （2）带参数

.border(@border_width){
    border:@border_width solid #000;
}
.box{
    .border(2px);
}

　　 （3）参数带默认值

.border(@border_10px){
    border:@border_width solid #000;
}
.box{
    .border(); // 使用默认值10px
}
.area{
    .border(20px); // 使用传入的值20px
}

　    4、匹配模式

             类似于js 中的if，满足条件后才能匹配。以三角形为例，匹配三角形箭头所指方向。

.triangle(right,@w:5px,@c:#ccc){
    border-wdith:@w;
    border-color:transparent transparent transparent @c;
    border-style:dashed dashed dashed solid;  // dashed 是为了兼容ie6
}
.triangle(top,@w:5px,@c:#ccc){
    border-wdith:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;  // dashed 是为了兼容ie6
}
----------------------------
.sanjiao{
    0;
    height:0;
    overflow:hidden;
    .triangle(top,10px)
}
或
.triangle(@_,@w:5px,@c:#ccc){ // @_ 固定写法，后面的参数也必须写
    0;
    height:0;
    overflow:hidden;
}
.sanjiao{
    .triangle(top,10px)
}

　　5、运算

@100px;
.box{
    (@width-20)*5;
    color:#ccc - 10;
}

　　6、嵌套

             &对伪类使用 例：hover或focus。对连接的使用，例：&-item。&代表他的上一层选择器。

ul li{}
ul li a{}
ul li a:hover{}
相当于
ul{
    li{
        a{
            &:hover{
            }
        }
    }
}

　　7、@arguments变量

             @arguments包含了所有传递进来的参数，如果你不想单独处理每一个参数的话可以这样写：

.border(@w:30px,@c:red,@type:solid){
      border:@arguments;
}

　　8、避免编译

             对于一些不争取的css语法或者Less不认识的专有语法，需要在字符串前面加上“ ~ ”

.box{
      ~"calc(100% - 35px)";
}

　    9、!important关键字

             会为所有混合所带来的样式，添加上!important。

.border-radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.box{
   .border-radius() !important;
}
===
.box{
    -webkit-border-radius:5px !important;
    -moz-border-radius:5px !important;
    border-radius:5px !important;
}