less详解

 less是一门CSS预处理语言，本身不是一门直接使用的语言，而是一门生成CSS的语言。

 

总结：

1   less中只有/*注释*/    这种注释方法才会被编译到CSS文件中。

     //注释      这种注释方法是无法被编译到CSS文件中的。

 

2  变量  less文件中使用@来声明一个变量  例如 @color：pink        

             声明后后面如有需要复用这种颜色可以直接使用color: @color 这种方法， 便于后期维护。

             选择器和属性名的使用方式不一样（如有需要是使用 查询百度）。

             声明方式: @selector : #nav   

             使用方式: @{selector} :  {~~~}

       !important   变量的延迟加载，less文件中是有块级作用域，{}代表一个块级作用域，变量延迟加载即在一个作用域中不在遵循按照代码顺序来读取变量！

              {

                      @var = 2 

                       three : @var 

                       @var = 3    }                        此时three:的值会为3

 

3  嵌套规则  

            &的作用加载前面是代表标签平级关系！！！

 

4  less混合  

            ①  普通混合    

                  将公共代码提出来写一个样式例如 .public {width:100px , height:100px} 

                  复用时只需要使用.nav { .public } , 此种方案会导致编译至CSS文件中

            ② 不带输出的混合

                  将公共代码的样式后面加上（）      

                   .public (){width:100px , height:100px}       这样编译时不会编译至css文件中

            ③ 带参数的混合  （一个或多个）                                

                  .public (@w ，@h){width:@w , height:@h}             复用时传入对应的参数即可  .nav{ .public(100px,100px)}                                                      

            ④ 带参数并带有默认值的混合 

                   public (@w:100px ，@h:100px)     复用时如传参数，按照参数引入，如不传参数，按照默认值引入。

            ⑤ 命名参数  例如三角形复用 

                 triangle（L , @w , @c）   第一个L类似标识符，例如需要三角形图案可以用不同方位的标识符来表示朝向不同的三角形，复用时候直接传入对应朝向的标识符和参数即可（三角形图案的代码可以重新建立less文件当作库的方法引入）   

             ⑥ 匹配模式      将公共代码用相同样式名创建并且在（@_）参数用@_代替，则在复用此样式代码时，带有@_样式代码的参数会自动引入。

 

             ⑦ arguments变量

                  在有个参数变量名的情况下，引用时用arguments代替可以表示接受多个参数。

                  .publish(@1,@2,@3) {border: arguments}

                   引用时：.nav {.publish(1px,solid,#ccc)}