用Sass的占位符和混合宏创建可复用的样式

本文由清木子根据jdsteinbach的《CREATING A REPEATABLE STYLE PATTERN WITH SASS: PLACEHOLDERS VS. MIXINS》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://jamessteinbach.com/css/sass/creating-repeatable-style-pattern-sass-placeholders-vs-mixins。

——作者：jdsteinbach

——译者：清木子

Sass的最大好处之一就是具有创建可重用代码块的能力。我经常用%placeholders或者@mixins创建可重用代码模块。占位符（%placeholders）和混合宏（@mixins）之间有很大不同。简而言之：当你需要传递变量时使用混合宏（@mixins）,若不需要，则使用占位符（%placeholder）。

我目前在做一个网站,该网站在多个页面下使用相同的网格组件：产品，服务及行业都选择相同的结构布局。我不需要任何变量控制样式，所以我首先想到的是使用占位符。使用Sass3.3的占位符，你可以通过用&引用父级选择器创建OOCSS/BEM选择器。在上一个版本，你可以创建嵌套选择器，现在你可以创建新的选择器：

我想知道是否可以在一个&-嵌套顶部用的%placeholder，在容器选择器中扩展顶部占位符，让Sass生成所有我需要的新的&-selectors。事实证明不会生成选择器名。（如果我选套父/子选择器则它会运行顺畅）看下面我想表达的意思：

现在我能使用@mixin获取我想要的。那是有效的，但是它会重复代码：每次我运行@mixin，在我的样式表中新的地方我都将得到相同的样式。我不想重复。如果用组合选择器，只调用@mixin一次，那么我能避免重复：

这几乎是我知道的最枯燥无味的解决方式了。如果你不需要保持父选择器为独立部分，你可以同时一起申明他们并且在他们上面同时运行@mixin。但是，如果你喜欢先进的Sass且不介意付出额外的劳动，则请继续阅读下面的内容。

如果你需要保持你的父级/容器选择器为独立部分，却仍然想避免相同的样式，你可以在项目中先设置空列表变量，在适合的地方为每个单独的部分中增加父级类，然后在空列表尾部调用 @mixin。下面例子可以说明我的意思：

最后的@if循环: 1. 确保$parent-classes不是空的 2. 把所有想转化为以逗号分隔的字符串 3. 字符串包含的类中调用@mixin。

现在没有@mixin代码是重复的，所有的父类可以存在他们自己的部分中，所有的OOCSS/BEM子项类能够正确生成。

当然，这个不只是适用于网格系统，它适用于任何嵌套样式，这些样式你需要在元素重复用不同类名称。请在评论中让我知道你如何使用这种模式。或者，如果你找到一个更好的方式，也分享一下，谢谢！

更新

感谢Hugo，他提交了一个更为简洁的版本，该版本用一种更直接的方式处理父组合选择器，从而不需要使用最后的@if循环：

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

关于清木子

原名华水清，网名“清木子”，暂居厦门。目前不断学习HTML5、CSS3、Angular.js等新技术以及巩固加强js。在开发过程中，追求HTML标签语义化，CSS模块化，js代码的复用性和扩展性。个人站点。希望与更多的前端朋友一起交流，共同进步，共同成长！欢迎关注我的围脖。

如需转载烦请注明出处：

英文出处：http://jamessteinbach.com/css/sass/creating-repeatable-style-pattern-sass-placeholders-vs-mixins

中文译文：https://www.fedev.cn/preprocessor/creating-repeatable-style-pattern-sass-placeholders-vs-mixins.html

Max 90 Winter Sneakerboot