閱讀(2.9k) 書簽贊(0) 我要糾錯

Sass 占位符選擇器

2018-12-30 15:24 更新

描述

SASS使用 class 或 id 選擇器支持占位符選擇器。在正常CSS中，這些用“＃”或“。”指定，但在SASS中，它們替換為“％”。要使用占位符選擇器，可以使用 @extend 指令。如果不使用 @extend 指令，則無法在CSS中顯示結(jié)果。

例子

下面的示例演示了在SCSS文件中使用占位符選擇器:

<html>
<head>
   <title>Placeholder 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="/attachments/tuploads/sass/jquery.min.js"></script>
   <script src="/attachments/tuploads/sass/bootstrap.min.js"></script>
</head>
<body>
   <h1>First Heading</h1>
   <p class="frst_para">It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
   <h1>Second Heading</h1>
   <p class="sec_para">It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p>
</body>
</html>

接下來，創(chuàng)建文件 style.scss 。

style.scss

.frst_para {
   color: green;
}
.sec_para {
   @extend .frst_para;
   font-size:20px;
}

這里，我們使用了 @extend 指令，它允許一個選擇器繼承另一個選擇器的樣式。你可以通過使用下面的命令讓Sass查看文件并更新Sass文件:

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

接下來執(zhí)行上面的命令，它將用下面的代碼自動創(chuàng)建 style.css 文件:

style.css

.frst_para, .sec_para {
  color: green;
}
.sec_para {
  font-size: 20px;
}

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:

將上述html代碼保存在 placeholder_selectors.html 文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充