Sass/SCSS Mixin for Clearfix-最佳方法? [英] Sass / SCSS Mixin for Clearfix - best approach?
问题描述
我想从我的HTML中删除clearfix
类,并在我的SCSS(Rails 3.1应用程序)中包括一个clearfix mixin.最好的方法是什么?
I want to remove the clearfix
class from my HTML and include a clearfix mixin in my SCSS (Rails 3.1 application). What is the best approach to this?
我正在考虑仅将HTML 5 Boilerplate clearfix转换为mixin,然后将其@CSS包含在CSS中,以用于需要clearfixing的元素.
I am thinking of just taking the HTML 5 Boilerplate clearfix and turning it into a mixin, then @including it within the CSS for elements that need clearfixing.
从HTML5样板复制:
Copied from HTML5 Boilerplate:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin padding-bottom-of-page */
.clearfix { zoom: 1; }
这有缺点吗?有没有更好的办法?我可以这样安全地从HTML标记中删除clearfix吗?
Is there a drawback to this? Is there a better way? Can I safely remove clearfix from my HTML markup this way?
推荐答案
我应该添加-这是我想出的解决方案.我对这一切仍然很陌生,所以我不知道这是否真的会与将元素的类设置为clearfix并使用上面的HTML5样板代码来完成相同的工作.
I should probably have added - this is the solution I came up with. I am still pretty new to all this so I don't know if this will actually do the same job as setting an element's class to clearfix and using the HTML5 boilerplate code above.
@mixin clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
修改:
最好使用@extend
而不是mixin,因为它会产生少得多的CSS代码.
同样,在使用@extend
时使用静默类(用%
表示)也很有用.这样可以防止意外的CSS规则,并消除了您所使用的规则直接不使用扩展.
It's best to use @extend
instead of a mixin as it will produce much less CSS code.
Also, it's useful to use a silent class (denoted by %
) when using @extend
. This prevents unexpected CSS rules and eliminates the rule you're extending if it's not being used directly.
%clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
#head {
@extend %clearfix;
padding: 45px 0 14px; margin: 0 35px 0;
border-bottom: 1px solid $border;
}
这篇关于Sass/SCSS Mixin for Clearfix-最佳方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!