Css预处理器 ——Less 知识总结

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_20535249/article/details/100548801

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin(混合)、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 （引入less脚本文件），也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

Less编译工具

koala 官网:www.koala-app.com

less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中  

less中的变量

使用@来申明一个变量：@name：value;   //@变量名：值
1.作为普通属性值只来使用：直接使用变量名  @name
2.作为选择器和属性名时要使用 @{name}  的形式
3.作为URL：例如：   @p : 323911.jpg;
                  使用时  background-image: url("@{p}");
4.变量的延迟加载：即对所有变量的声明都会提到最前，变量提升

less中的嵌套规则

1.基本嵌套规则：子元素写到父元素中
2.&的使用：去掉编译后父子中间的空格，即让子元素成为父元素的同级
         例如：.father{
                    &:hover{
                    }
              }
              
      编译后为：.father{}
              .father:hover{}

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式，类似于引用
例：定义一个混合内容 .mixin{font-size:20px;}

1.普通混合                ：混合的内容会添加到编译后的css文件中

2.不带输出的混合           ：在混合名称后添加一个空括号，
                           混合内容将不会添加到编译后的css文件中
                           .mixin(){font-size:20px;}
                        
3.带参数的混合              :定义混合时设置形参，在调用时即可传入对应的参数
                           定义一个混合   .mixin(@a){font-size:@a;}
                           
4.带参数并且有默认值的混合    ：在参数后面添加 ：value 及为参数的默认值
                    	    定义一个混合   .mixin(@a：20px){font-size:@a;}
                    	    
5.带多个参数的混合           :多个参数之间用逗号隔开

6.命名参数                  ：当混合中有多个参数时，只想给其中一个参数传入值，
                            那么调用时可以知名是哪个参数 指明形式为 [参数名：值]
                            
7.匹配模式                  :定义混合时，可在前面加一个标识符来区分不同的混合，
                            调用时也要用此标识符来指明

8.arguments变量             ：缩写方法，例如定义一个混合时：
                                  .mixin(@size,@solid,@color){
                                  border:@arguments;
                         // 相当于 border: @size @soild @color;
                         }

less运算

在less中可以进行加减乘除的运算

less避免编译

~"不被编译的内容"，预处理器将不会编译此内容

less继承

性能比混合高
灵活度比混合低
例如：.mixin(){font-size:20px;}
那么使用继承时：
   .div:extend(.mixin){
         background-color: red;
    }


编译后的形式为：.mixin , .div{
               background-color: red;
              }
              
            .div{
               background-color: red;
              }