本文由清木子根据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