Sass預留位置選擇器 - tw511教學網

SASS 支援使用class和id選擇預留位置選擇。在正常的CSS，這些以「#」或「.」來指定，但是在SASS它們替換為「%」。若要使用預留位置選擇器來工作它們可搭配@extend指令。如果不使用@extend指令，則無法顯示CSS的結果。

範例

下面的例子演示了使用SCSS檔案預留位置的選擇器：

<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>預留位置選擇器 - www.tw511.com</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>第一個標題</h1>
   <p class="frst_para">It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
   <h1>第二個標題</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檔案，得到輸出結果如下。