SCSS中&选择器进阶技巧：如何优雅实现a.btn选择器？

Great question! When you want to style <a class="btn"> (the a.btn selector) from within your existing .btn rule in Sass, the direct a& syntax throws an error because Sass doesn’t allow placing a selector before & out of the box. But there are cleaner alternatives to the @at-root a#{&} approach you already know.

1. Simplified @at-root Syntax (Most Concise) #

You don’t need interpolation (#{}) when using @at-root with &. This is the cleanest way to generate a.btn while staying inside your .btn rule:

.btn {
  // Base button styles (applied to all .btn elements)
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  // Target only <a class="btn">
  @at-root a& {
    color: #007bff;
    text-decoration: none;
    background: transparent;

    &:hover {
      text-decoration: underline;
      color: #0056b3;
    }
  }
}

This compiles to clean CSS:

.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
a.btn {
  color: #007bff;
  text-decoration: none;
  background: transparent;
}
a.btn:hover {
  text-decoration: underline;
  color: #0056b3;
}

2. Nest Under the a Selector (Readable Alternative) #

If you prefer grouping element-specific styles with their parent selector instead of using @at-root, you can separate the a.btn styles into the a block. This avoids any special syntax entirely:

// Base .btn styles (applied to all buttons)
.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

// Styles only for <a class="btn">
a {
  &.btn {
    color: #007bff;
    text-decoration: none;
    background: transparent;

    &:hover {
      text-decoration: underline;
      color: #0056b3;
    }
  }
}

Many developers find this approach more intuitive, as it ties link-specific button styles directly to the <a> element.

3. Use Placeholder Selectors for DRY Base Styles #

If your base .btn styles are shared across multiple element types (like <button class="btn"> and <a class="btn">), use a placeholder selector to avoid duplicating code:

// Reusable base button styles
%btn-base {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
}

// Default .btn styles (e.g., for <button> elements)
.btn {
  @extend %btn-base;
  background: #007bff;
  color: white;
}

// Link-specific button styles
a.btn {
  @extend %btn-base;
  background: transparent;
  color: #007bff;
  text-decoration: none;

  &:hover {
    color: #0056b3;
  }
}

This keeps your code DRY (Don’t Repeat Yourself) and makes it easy to update base styles across all button variants.

Between these options, the simplified @at-root a& is the most concise way to generate the a.btn selector while keeping your code contained within the .btn rule. It’s far cleaner than the interpolated @at-root a#{&} version you mentioned.

内容的提问来源于stack exchange，提问作者Alexey Tseitlin