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

查看更多关于Sass占位符实例讲解的详细内容...