Clearfix 的 Sass / SCSS Mixin - 最佳方法？

发布于 2024-11-30 15:32:36 字数 692 浏览 4 评论 0原文

我想从 HTML 中删除 clearfix 类，并在我的 SCSS（Rails 3.1 应用程序）中包含一个clearfix mixin。对此最好的方法是什么？

我正在考虑仅采用 HTML 5 Boilerplateclearfix 并将其转换为 mixin，然后将其@包含在 CSS 中以获取需要clearfixing 的元素。

复制自 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 吗？

原文

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?

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.

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; }

Is there a drawback to this? Is there a better way? Can I safely remove clearfix from my HTML markup this way?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

审判长 2024-12-07 15:32:36

我可能应该添加 - 这是我想出的解决方案。我对这一切还很陌生，所以我不知道这是否真的能完成与将元素的类设置为clearfix并使用上面的HTML5样板代码相同的工作。

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

编辑：
最好使用 @extend 而不是 mixin，因为它会产生更少的 CSS 代码。
此外，在使用 @extend 时使用静默类（用 % 表示）也很有用。这可以防止意外的CSS规则并消除您正在使用的规则如果未直接使用，则进行扩展。

%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;
}

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;
    }
}

Edit:
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;
}

回复收藏 0 原文

心舞飞扬 2024-12-07 15:32:36

要使用 @extend 实现更少的代码输出，请将clearfix 定义为占位符（此处仅适用于没有 IE 6+7 的现代浏览器）：

Sass 代码：

%clearfix {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

/* Use above defined placeholder in the selector(s) of your needs via @extend: */
#container {
    position: relative;
    min-width: 42.5em;
    @extend %clearfix;
}

CSS 输出将是：

#container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}

To achieve less code output by using @extend, define clearfix as placeholder (here just for modern browsers w/o IE 6+7):

Sass code:

%clearfix {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

/* Use above defined placeholder in the selector(s) of your needs via @extend: */
#container {
    position: relative;
    min-width: 42.5em;
    @extend %clearfix;
}

CSS output will be:

#container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}

回复收藏 0 原文

烟酒忠诚 2024-12-07 15:32:36

// source http://www.alistapart.com/articles/getting-started-with-sass/
// http://nicolasgallagher.com/micro-clearfix-hack/

    @mixin clearfix {
     // For modern browsers
      &:before,
      &:after {
        content:" ";
        display:table;
      }

      &:after {
        clear:both;
      }

      // For IE 6/7 (trigger hasLayout)
      & {
        *zoom:1;
      }
    }

// source http://www.alistapart.com/articles/getting-started-with-sass/
// http://nicolasgallagher.com/micro-clearfix-hack/

    @mixin clearfix {
     // For modern browsers
      &:before,
      &:after {
        content:" ";
        display:table;
      }

      &:after {
        clear:both;
      }

      // For IE 6/7 (trigger hasLayout)
      & {
        *zoom:1;
      }
    }

回复收藏 0 原文