Css preprocessor --Less knowledge summary

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/qq_20535249/article/details/100548801

less

is a less dynamic style language, fall within the scope css preprocessor, which extends the CSS language,
increasing the variable, Mixin characteristics (mixing), and other functions, so CSS easier to maintain and extend
LESS either run on the client ( the introduction of less script files), can make use of Node.js runs on the server.

less the Chinese official website: http://lesscss.cn/
in less tutorial Bootstrap: http://www.bootcss.com/p/lesscss/

Less compilation tools

koala official website: www.koala-app.com

less in the comments

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

less variable in

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

Nested rule of less

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

Mix less in

The mixture is introduced into a series of attributes from a set of rules to the rule set of another embodiment, similar reference
Example: definition of a mixed content .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 operation

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

less avoid compilation

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

less inheritance

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


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