理解Sass的选择占位符%placeholder

Sass中提供多种方法来共用相同的CSS代码。你可以使用@include定义好的@mixin在你的CSS样式中插入新的CSS样式,你也可以使用@extend定义好的CSS类选择器,向你的CSS样式中插入新的CSS样式。在Sass3.2中引入了一个新的特性——选择器占位符“%placeholder”,能过@extend可以得到更有效的输出。

在开始介绍%placeholder之前,我们先来了解一下Sass中@extend是如何工作的。

##@extend如何工作

使用@extend我们可以使用CSS中的定义好的选择器,下面的例子可以很好的说明一切:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@extend .icon;
/*错误图标指定的样式... */
}
.info-icon {
@extend .icon;
/* 信息图标指定的样式... */
}

上面的SCSS代码将编译的CSS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
.icon, .error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/*错误图标指定的样式... */
}
.info-icon {
/* 信息图标指定的样式... */
}

这是怎么回事?通过@extend可以直接在.error-icon.info-icon中插入定义好的.icon属性。只要你修改了.icon样式,.error-icon.info-icon也会做出对应的变化。非常完美,对不对?

很有兴的一个地方。如果我们在HTML中从来不使用.icon,其存在的唯一目的就是为了扩展吗?这似乎比我们需要的基本样式稍大些,因为我们将永远不会使用.icon对应的样式。其实在Sass3.2开始,我们可以通过使用选择器占位符%placeholder来解决这种现象。

##使用选择器占位符%placeholder

选择器占位符%placeholder可以很好的解决上面提到的问题。选择器占位符很类似于CSS的类,不同的是他不是使用(.)开始,而是使用(%)开始,而且编译出来的CSS代码中并不会包括%placeholder规则中的样式,除非是通过@extend对其进行调用。

回到当初的示例,如果我们定义的图标样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@extend %icon;
/*错误图标指定的样式... */
}
.info-icon {
@extend %icon;
/* 信息图标指定的样式... */
}

编译出的CSS:

1
2
3
4
5
6
7
8
9
10
11
12
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/*错误图标指定的样式... */
}
.info-icon {
/* 信息图标指定的样式... */
}

请注意,编译出来的CSS代码中将不再包括.icon了。

@extend VS @include

乍一看,选择器占位符%placeholder看起来和具有相同参数的@mixin一样。虽然从功能上来说(在浏览器上渲染的效果是完全相同的)他们是相同,但编译出来的CSS却大大的不同。

请考虑使用@mixin .icon来实现上面示例的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@include icon;
/*错误图标指定的样式... */
}
.info-icon {
@include icon;
/* 信息图标指定的样式... */
}

编译出来的CSS:

1
2
3
4
5
6
7
8
9
10
11
.error-icon {
transition: background-color ease .2s;
margin: 0 .5em;
/*错误图标指定的样式... */
}
.info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
/* 信息图标指定的样式... */
}

仅从维护的角度来说,这是一个很好的扩展的示例,但编译出来的CSS实在是糟糕,因为编译出来的CSS样式,没有把相同的样式合并在一起。

##选择器占位符的限制

使用@extend调用定义好的选择器占位符%placeholder有所限制,他不能在不同的@media中运行。

如下面的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
@media screen {
.error-icon {
@extend %icon;
}
.info-icon {
@extend %icon;
}
}

此时编译你的SCSS文件时,编译器将会报错:

1
2
3
4
5
>>> Sass is watching for changes. Press Ctrl-C to stop.
error test.scss (Line 3: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend %icon" on line 10 of test.scss.
)

当我第一次碰到这个限制时,我以为这是一个错误。然而有一个很好的理由,Sass为什么要这样工作。

因为@extend是将一个选择器样式扩展到另一个选择器当中,而实际上在不同的@media中却无需复制这些样式。

虽然他可以通过其他的方式来工作,在@media块中定义选择器占位符,在@extend调用时,将会将整个样式包含在@media区块中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen {
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
}
.error-icon {
@extend %icon;
}
.info-icon {
@extend %icon;
}

编译出的CSS:

1
2
3
4
5
6
@media screen {
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
}

##总结

@extend@include都具有强大的功能,尽管细节上有一些差别,这就要问你自己,编译出来的CSS样式,接近重用的样式对你是不是很重要。在某些情况下,@extend可以大大的减化你的CSS输出,并且显著的提高你的CSS性能。

本文由大漠根据Daniel Imms的《Understanding placeholder selectors》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://thesassway.com/intermediate/understanding-placeholder-selectors

——作者:Daniel Imms

——译者:大漠

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://thesassway.com/intermediate/understanding-placeholder-selectors

中文译文:http://www.w3cplus.com/preprocessor/understanding-placeholder-selectors.html