Sass - 佔位符選擇器

說明

SASS 透過使用 class 或 id 選擇器支援 佔位符選擇器。在常規 CSS 中，它們以 "#" 或 "." 形式指定，但在 SASS 中，它們被替換為 "%"。若要使用佔位符選擇器，可以使用帶 @extend 指令的方法。如果不使用 @extend 指令，則無法在 CSS 中顯示結果。

示例

以下示例演示在 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 = "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>
      <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>

接下來，建立檔案 style.scss。

style.scss

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

在這裡，我們使用了 @extend 指令，它允許一個選擇器繼承另一個選擇器的樣式。可以使用以下命令告訴 SASS 監視該檔案並在 Sass 檔案每次更改時更新 CSS -

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

接下來，執行以上命令；它將透過以下程式碼自動建立 style.css 檔案 -

style.css

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

輸出

讓我們執行以下步驟來看上述程式碼如何工作 -

將上述 html 程式碼儲存到 placeholder_selectors.html 檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示如下輸出。

sass_css_extensions.htm

列印頁面

上一個

下一個