Sass:浏览器供应商前缀 [英] Sass: Browser vendor prefixes

问题描述

我对 Sass/Compass 非常陌生，所以这个问题对你们中的许多人来说可能听起来很愚蠢.

I am extremely new to Sass/Compass, so this question may sound dumb to many of you.

无论如何，我需要知道的是如何为浏览器供应商前缀创建一个 mixin，我可以一遍又一遍地重复使用，而不必每次都输入它们.

Anyway, what I need to know is how to create a mixin for browser vendor prefixes that I can reuse over and over without having to type them every time.

我在网上看过教程，但我无法理解正确应用它们所需的一些概念.

I've seen tutorials online but I just can't understand some of the concepts I need to be able to apply them correctly.

我现在需要的是在 CSS 中实现这一点:

What I need right now is to accomplish this in CSS:

* { 
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;          
        -ms-box-sizing:border-box; 
         -o-box-sizing:border-box; 
            box-sizing:border-box; 
  }

谢谢.

推荐答案

听起来您想使用 Compass box-sizing 混合.您的 SASS 文件将如下所示:

Sounds like you want to use the Compass box-sizing mixin. Your SASS file would look like this:

@import "compass/css3/box-sizing";

* {
    @include box-sizing(border-box);
}

并且会编译成这样:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

您可以在此处查看其他 CSS3 Compass mixin.但是请注意，Compass 不包含像 -ms-box-sizing 这样的前缀，例如，因为 IE8+ 实现了它没有前缀.如果你真的想要这些额外的属性，你可以这样做:

You can see the other CSS3 Compass mixins here. Note, though, that Compass doesn't include prefixes like -ms-box-sizing, for instance, since IE8+ has implemented it without a prefix. If you really want those extra properties, this is how you'd do it:

@import "compass/css3/shared"

* {
    @include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}

这篇关于Sass:浏览器供应商前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！