二、Sass占位符
在Sass中，我们引入了占位符“%placeholder”来进一步优化“@extend”。我们先来看一个例子。
举例：使用继承“@extend”
代码语言：javascript复制.btn
{
padding:6px 10px;
border:1px solid silver;
font-size:14px;
}
.btn-primary
{
@extend .btn;
color:white;
background-color:red;
}.btn-second
{
@extend .btn;
color:orange;
background-color:green;
}编译出来的CSS代码如下：
代码语言：javascript复制
.btn, .btn-primary, .btn-second
{
padding: 6px 10px;
border: 1px solid silver;
font-size: 14px;
}
.btn-primary
{
color: white;
background-color: red;
}
.btn-second
{
color: orange;
background-color: green;
}分析：
从这个例子我们可以看出，继承“@extend”是非常好用的。通过@extend，我们可以直接在“.btn-primary”和“.btn-second”中插入定义好的“.btn”，这样每次只要你修改了“.btn”中的样式，“.btn-primary”和“.btn-second”中的样式都会同时修改。
但是稍微细心的小伙伴应该也发现了，如果我们的HTML中没有任何一个元素使用“.btn”的话，“.btn”存在的唯一目的就是仅仅用来给“.btn-primary”和“.btn-second”继承。也就是说，“.btn”这个类在编译出来的CSS中是多余的。那有没有更好的办法来实现我们预期效果呢？
在新版本的Sass中，引入了“占位符%placeholder”来优化“继承@extend”的输出。
举例：
代码语言：javascript复制
%btn
{
padding:6px 10px;
border:1px solid silver;
font-size:14px;
}
.btn-primary
{
@extend %btn;
color:white;
background-color:red;
}
.btn-second
{
@extend %btn;
color:orange;
background-color:green;
}编译出来的CSS代码如下：
代码语言：javascript复制
.btn-primary, .btn-second
{
padding: 6px 10px;
border: 1px solid silver;
font-size: 14px;
}
.btn-primary
{
color: white;
background-color: red;
}
.btn-second
{
color: orange;
background-color: green;
}分析：
上一个例子，我们是定义一个基类“.btn”（类，都是以“.”开头）。而在这个例子中，我们是定义一个占位符“%btn”（占位符，都是以“%”开头）。我们对比一下这两个例子的输出结果就可以知道，使用占位符的输出结果是不包含基类的。
“占位符%placeholder”并非用来替换“继承@extend”的，而是用来配合“继承@extend”来使用的。从上面我们可以知道，继承@extend有2种输出方式：
（1）需要保留基类的：只使用@extend来实现；
（2）不需要保留基类的：使用@extend配合%placeholder来实现；
此外在实际开发中，继承中的基类是否就一定要去掉呢？这个倒不一定。如果你的HTML结构需要用到基类，则不需要使用占位符的方式来去掉；如果你的HTML不需要用到基类，则建议使用占位符配合继承来去掉。
