less/sass 中&用法

符号	作用	示例（编译后）	用途
&.	连接类名	.parent.child	同一元素的多类组合
&:	连接伪类	.parent:hover	定义交互状态（悬停等）
&::	连接伪元素	.parent::before	生成装饰性内容

.card { // Block
  border: 1px solid #eee;
  
  &__header { // Element (card__header)
    padding: 15px;
    font-size: 1.2em;
  }
  
  &--featured { // Modifier (card--featured)
    border-color: #f39c12;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    
    &:hover {
      transform: translateY(-5px);
    }
  }
}

编译结果：

.card { border: 1px solid #eee; }
.card__header { padding: 15px; font-size: 1.2em; }
.card--featured { 
  border-color: #f39c12;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
}
.card--featured:hover { transform: translateY(-5px); }