css - `&#my-id` 在 CSS 或 SASS 中是什么意思？

Question

我继承了一些 CSS 代码，它在 id 名称之前使用 & 字符来设置样式。它看起来像这样:

&#my-id {
  // Content and attributes
}

还有其他的例子，比如:

&:before {
  // content and attributes
}

和

&:hover {
      // content and attributes
    }

这些是什么意思？我找不到在搜索中表达这一点的好方法，所以我找不到任何东西。如果重复，我深表歉意。

Answer 1

它指的是父选择器。

输入:

.parent {
    &.child {
        color: red;
    }
}

输出:

.parent.child { color: red }

如果您以 BEM 格式编写 CSS，这将非常有用，例如:

.block {
    &__element {

        width: 100px;
        height: 100px;

        &--modifier {
             width: 200px;
        }
    }
}

.block__element { width: 100px; height: 100px;}
.block__element--modifier { width: 200px;}

<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>

最后，我分享的所有示例都连接了类名，但您也可以将其用作引用，例如:

.parent {
    & .child {
         color: red;
    }
}

.parent {
    .child & {
         color: blue;
    }
}


.parent .child { color: red }
.child .parent { color: blue }

其他引用资料:

http://lesscss.org/features/#parent-selectors-feature

https://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/

Using the ampersand (SASS parent selector) inside nested selectors