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="/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>
接下来，创建文件 style.scss 。
.frst_para {
color: green;
}
.sec_para {
@extend .frst_para;
font-size:20px;
}
这里，我们使用了 @extend 指令，它允许一个选择器继承另一个选择器的样式。 你可以通过使用下面的命令让Sass查看文件并更新Sass文件:
sass --watch C:rubylibsassstyle.scss:style.css
接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件:
.frst_para, .sec_para {
color: green;
}
.sec_para {
font-size: 20px;
}
让我们执行以下步骤，看看上面的代码如何工作:
将上述html代码保存在 placeholder_selectors.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。
描述 @ {variable} 符号用作变量名，id和类名的一部分。 扩展不具有使选择器与变量匹配的能力。 扩展可以连接到内插选择器。例子...
描述数字从一个单位转换为另一个单位。 它包括两个论点; 第一个参数遍编号以及单位和第二个参数包含单位。 当本机兼容时，转换该...
描述它将以逗号或空格分隔的值列表作为参数，并返回表示列表中元素数量的整数。例子下面的例子演示了在LESS文件中使用length函数...
描述它用于混合两种颜色以及不透明度。 它有以下参数： color1 ：它代表一个颜色对象。color2 ：它代表一个颜色对象。weight ：...