Sass占位符实例讲解

在Sass中，我们引入了占位符“%placeholder”来进一步优化“@extend”。我们先来看一个例子。

举例：使用继承“@extend”

.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代码如下：

.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”的输出。

举例：

%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代码如下：

.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不需要用到基类，则建议使用占位符配合继承来去掉。