LESS中&符號

用法：&符號有2中用法，其一：父選擇符；其二：且的意思

其一：父選擇符

.ant-menu{
  background: #fff; 
  border-bottom:0;

  .ant-menu-item{
      color: rgba(0,0,0,0.65);  
      padding-left:16px; 
      padding-right:16px;
        &:hover {
                color: #235FB8; border-bottom-color:transparent;
            }
  }

  .ant-menu-submenu &{
     border-color: #235FB8;
  }

}

 轉化爲CSS效果：

.ant-menu {
  background: #fff;
  border-bottom: 0;
}
.ant-menu .ant-menu-item {
  color: rgba(0,0,0,0.65);
  padding-left: 16px;
  padding-right: 16px;
}
.ant-menu .ant-menu-item:hover {
  color: #235FB8;
  border-bottom-color: transparent;
}
.ant-menu-submenu .ant-menu {
  border-color: #235FB8;
}

 &符號放在類後面

.ant-menu{
  background: #fff; 
  border-bottom:0;

  .ant-menu-item{
      color: rgba(0,0,0,0.65);  
      padding-left:16px; 
      padding-right:16px;
  }

  .ant-menu-submenu &{
     border-color: #235FB8;
  }

}

轉爲爲CSS效果： 

.ant-menu {
  background: #fff;
  border-bottom: 0;
}
.ant-menu .ant-menu-item {
  color: rgba(0,0,0,0.65);
  padding-left: 16px;
  padding-right: 16px;
}
.ant-menu-submenu .ant-menu {
  border-color: #235FB8;
}

 

其二：且

.ant-menu{
  background: #fff; 
  border-bottom:0;

  .ant-menu-item{
      color: rgba(0,0,0,0.65);  
      padding-left:16px; 
      padding-right:16px;
  }

  &.ant-menu-submenu{
     border-color: #235FB8;
  }

}

轉化爲CSS的效果： .ant-menu.ant-menu-submenu與.ant-menu .ant-menu-submenu不一樣，前者是同級，後者是父子關係

.ant-menu {
  background: #fff;
  border-bottom: 0;
}
.ant-menu .ant-menu-item {
  color: rgba(0,0,0,0.65);
  padding-left: 16px;
  padding-right: 16px;
}
.ant-menu.ant-menu-submenu {
  border-color: #235FB8;
}