• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

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

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部