我想删除 clearfix
我的 HTML 中的类,并在我的 SCSS(Rails 3.1 应用程序)中包含一个 clearfix mixin。什么是最好的方法?
我正在考虑只采用 HTML 5 Boilerplate clearfix 并将其转换为 mixin,然后在 CSS 中 @include 需要 clearfixing 的元素。
复制自 HTML5 样板:
/* 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 吗?
最佳答案
我可能应该添加 - 这是我想出的解决方案。我对这一切仍然很陌生,所以我不知道这是否真的可以像将元素的类设置为 clearfix 并使用上面的 HTML5 样板代码一样做同样的工作。
@mixin clearfix {
zoom:1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
编辑:
最好用
@extend
而不是 mixin,因为它会产生更少的 CSS 代码。此外,在使用
%
时使用静默类(由 @extend
表示)很有用.这可以防止 unexpected CSS rules如果它是 not being used 并消除您正在扩展的规则直接地。%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;
}
关于ruby-on-rails-3.1 - 用于 Clearfix 的 Sass/SCSS Mixin - 最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7154705/