What does the & mean in an scss selector?

老子叫甜甜 提交于 2019-12-04 10:06:32

问题


What does & refer to in an scss selector?


    //Case 1

    .parent {
      & > ul {
        color: red
      }
    }

    //Case 2

    .parent {
      & > ul {
        & > li {
          color: blue;
        }
      } 
    }

    //Case 3

    .parent {
      & > ul {
        & > li {
          color: blue;
          &:hover {
            color: pink
          }
        }
      }
    }


回答1:


The & is a placeholder for the parent selector:

.parent {
  & > ul {
    color: red
  }
}

Is the same like

.parent > ul {
  color: red
}

A common use case are pseudo classes, e.g.:

.link {
  &:hover {
    color: red
  }
}

A nice explanation with examples can be found on CSS Tricks.



来源:https://stackoverflow.com/questions/38804099/what-does-the-mean-in-an-scss-selector

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!