Question

我在网上进行了探索，并在此页面中找到了一个css代码：

一段代码：

.input-helper {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;

    &:before {
        content: '';
        display: block;
        position: absolute;
    }
}

但代码中有一个&符号，我不知道它是什么。我认为这就像一个“名字持有者”，“名称参考” 有人可以描述一下＆amp;在CSS中意味着什么？

Answer 1

这是Sass / LESS变量，引用self，在本例中为.input-helper

编译时&:before变为.input-helper:before

Answer 2

就像.input-helper:before，它是Less / Sass变量

Answer 3

如果您已经使用Sass任何时间长度，那么您可能熟悉能够使用和号（＆amp;）字符引用父选择器。

一个简单的Sass示例如下所示：

h3
  font-size: 20px
  margin-bottom: 10px
  &.some-selector
    font-size: 24px
    margin-bottom: 20px

以下是输出CSS的外观。

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
h3.some-selector {
  font-size: 24px;
  margin-bottom: 20px;
}

因此，在您的情况下，您将获得以下代码：

.input-helper {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
}

并且

.input-helper:before{
        content: '';
        display: block;
        position: absolute;
    }
}

See more information

在CSS中通过引用调用？

3 个答案: