Quantcast
Channel: w3cplus
Viewing all articles
Browse latest Browse all 1557

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

$
0
0

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

中文译文:http://www.w3cplus.com/preprocessor/creating-repeatable-style-pattern-sass-placeholders-vs-mixins.html


Viewing all articles
Browse latest Browse all 1557

Trending Articles