SASS 获取上一级的选择器 & { } 如何写


在SASS的介绍文档里,有下面这段代码:

button {
  background: linear-gradient(#444,#222);
  .no-cssgradients & { background: #333 }
}

编译成CSS后是这样的:

button {
  background: linear-gradient(#444, #222);
}

/* 注意看下面这行 */
.no-cssgradients button {
  background: #333
}

但是,当有多个层级的选择器后,他将始终获得最顶层的选择器

form {
  button {
    background: linear-gradient(#444,#222);
    .no-cssgradients & { background: #333 }  // 问题在这行
  }
}

如此,我期望编译后.no-cssgradients的顺序是这样的:

form .no-cssgradients button

但他的顺序却是这样的:

.no-cssgradients form button

是我对 & { } 选择理解有误,还是说我的写法有问题?

sass

NG-KING 11 years, 2 months ago

既然你的结构是 form>.no-css>button
为什么却在SCSS里用 button 包住 .no-css 呢?

form {
  button { background: linear-gradient(#444,#222);  }
  .no-css{ background: #333; 
    button {@extend .no-css}
  }
}

=====>

form button {
  background: linear-gradient(#444444, #222222); }
form .no-css, form .no-css button {
  background: #333; }

.

neeeero answered 11 years, 2 months ago

Your Answer