Sass - 引用父选择器

描述

您可以使用字符 & 来选择父选择器。它会说明父选择器的插入位置。

示例

以下示例描述了在 SCSS 文件中使用父选择器的方式 -

<html>
   <head>
      <title>Referencing Parent Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <h1>Example using Parent Selector</h1>
         <a href = "https://tutorialspoint.com/"> www.tutorialspoint.com </a>
      </div>
   </body>
</html>

接下来，创建文件 style.scss。请注意使用字符 &，它指定父选择器的插入位置。

style.scss

a {
   font-size: 20px;
   &:hover { background-color: yellow; }
}

您可以告诉 SASS 监视此文件，并在 SASS 文件更改时更新 CSS，方法是使用以下命令 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来，执行上述命令；它将自动创建 style.css 文件，并包含如下代码 -

style.css

a {
   font-size: 20px;
}
a:hover {
   background-color: yellow;
}

输出

让我们执行以下步骤，看看上面给出的代码是如何工作的 -

将上面给出的 html 代码保存在 parent_selectors.html 文件中。
在此浏览器中打开此 HTML 文件，会显示如下输出..
这里会用父选择器 a 替换 &。当您将鼠标悬停在链接上时，背景颜色将显示为黄色。

sass_css_extensions.htm

打印页面