什么是&在css中做 [英] What does & do in css

问题描述

我正在查看一些旧代码，并在css文件中找到了以下内容：

I am looking at some legacy code and found something like below in the css file:

.user_modal {
  width: auto;
  height" auto;
  &.modal,
  &.fade.in
  {
    margin-top:0;
    margin-left:0;
    top:83px;
  }
 }

什么&的目的是什么？

What is the purpose of the & here ?

推荐答案

您可能对 SASS 选择器。 &符 & 用于引用父选择器。您的案例& 将引用父选择器，即 .user_modal

You're probably experienced with SASS selector. The ampersand & in sass is used to refer to the parent selector. So in your case & will refer to parent selector which is .user_modal

因此& .modal 将被转换为CSS并成为 .user_modal.modal

So &.modal which will be converted to CSS and become .user_modal.modal

，因此它将匹配：

<div class='user_modal modal'></div>

&的方法相同。 fade.in wh ich将匹配

the same way for &.fade.in which will match

<div class='user_modal fade in'></div>

因此，在将其转换后，它终于成为普通的CSS：

So finally it's just become normal CSS after you've converted it:

.user_modal.modal , .user_modal.fade.in {
    margin-top:0;
    margin-left:0;
    top:83px;
}

这篇关于什么是&在css中做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！