前端less学习笔记之嵌套

学习总结并转载自[https://juejin.im/post/5a2bc28f6fb9a044fe464b19#heading-6] 和 [https://hackycy.github.io/2019/04/15/Less入门/]

嵌套规则

less的嵌套规则类似HTML的结构，使得CSS代码清晰

注意： less嵌套可以添加CSS选择器

less写法：                                                                                     
    div {                                       div{
  		 font-size: 16px;                          > p {
 		 p{                                               color: yellow;
            color: yellow;                         }
   	}                                           }
   }
编译成CSS:
   div {                                    div > p {
     font-size: 16px;                           color: yellow;
   }                                        }
   div p {
     color: yellow;
   }

&：代表的上一层选择器的名字

1. 拼接伪类选择器

		div{                                            div :hover{   // 两个之间有空格
		    background:red;                                 background:blue;
		   :hover{   /不加 & 会作用在所有的子代上           } 
		        background:blue;
		     } 
		  }
		  
         div{                                              div:hover{   // 两个之间没有空格
            background:red;                                     background:blue;
            &:hover{   // 只作用在所选父级上                  }
                background:blue;
            }
        }
        

注意：在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代； 如果有 & 符号，它就被解析为所选父元素自身或父元素的伪类。

2. & 放在子选择器后面，改变父子选择器的顺序

less写法                           编译成CSS
	div{                           p  div{  
	   p &{                           color：yellow；
	     color：yellow；           }
	  }
   }

3. & 拼接选择器名称

    less写法：
		.demo{                                        
		    &-title{  //两者之间不能有空格，否则变成 .demo -title{}
		        color: #000;                        
		     }
		 }
     编译成CSS：
	     .demo-title{
	           color: #000;
	      }
            ```