SASS 支持使用class和id选择占位符选择。在正常的CSS，这些以“#”或“.”来指定，但是在SASS它们替换为“%”。若要使用占位符选择器来工作它们可搭配@extend指令。如果不使用@extend指令，则无法显示CSS的结果。
实例
下面的例子演示了使用SCSS文件占位符的选择器：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>占位符选择器 - www.xuhuhu.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文件，得到输出结果如下。
上一篇：
Sass CSS扩展
下一篇：
Sass多行注释插值法