Less简易教学

less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。和css相比下，css的语法非常简单，而且对开发者来说要求比较低，比较合适小白者，但是遇到有些问题，比如没有这种变量、函数等等，的确还不如less的扩展性，需要写大量的代码，但是看眼中的确没有逻辑的代码，CSS冗余度是比较高的。不方便维护，不利于复用，而且没有计算的能力。如果对css有基础的话，less很容易上手的。因为css和less区别不大的，反正可以通过编译生成浏览器能识别的css文件

1.安装less

npm install less -g                              //cmd输入指令可以下载less

2.less的使用

less的使用只需要在style标签里面输入lang=less 就可以使用

或者导入

 @import "xxx.less"

 @import "xxx.css"

 3.less实例使用

1.变量

 @color:red;

  h1{color:@color}

2. 嵌套

 ul{

            color:red;

            li{

                line-height:48px;

                a{text_decoration:none

                &:{color:#f70}

                }

            }

        }

 3.运算

 @w:10;

        .s1{padding:@w*2}

        .s2{padding:@w+10px}

4.   转义

 @str:-".block.span"

        @{str}{

            color:red

        }

        @b:~"1ox solid red"

        .test{

            border:@b;

        }

 5.内置函数

     lighten(color,20%)

 6. 引用与映射

 border(){

            boder:1px solid red;

            padding:20px

        }

        .test{

            .border();

        }

        test{

            border: .border[border];

            padding:border[padding]

        }

 7.作用域

 @color:red;

        test{

            @color:blue;

            .block{color:@color}

        }