自定义用户 @mixins | CSS-Tricks

Mixins 是使用 CSS 预处理器最有用和最令人信服的原因之一。它们通常用于帮助处理 CSS3 供应商前缀问题。这确实是一个令人信服的用例。不再需要费力地编写所有前缀，也不再需要随着时间的推移而对其进行更新。

但是，如果您使用的是 Sass，则可以使用 Compass，而 Compass 已经为您准备好了所有这些 CSS3 mixins。想使用新的 CSS 过滤器但又希望它具有未来证明性？没问题

img {
  @include filter(grayscale(100%));
  &:hover {
    @include filter(grayscale(0));
  }
}

您可以开始了。

但是手工制作的 @mixins 也很有用！也就是说，您自己编写的 @mixins，可以使您的特定项目受益。我非常喜欢 Sacha Greif 的一篇文章，他在文章中列出了他有时会在特定项目中使用的一些 @mixins。

例如，他有一些用于在某些网站上找到的浮雕和凸版效果。

@mixin box-emboss($outerOpacity, $innerOpacity) {
  box-shadow:
    rgba(white, $outerOpacity) 0 1px 0, 
    rgba(black, $innerOpacity) 0 1px 0 inset;
}

然后，您可以在您希望具有该效果的任何选择器上调用它。

.module, header[role="banner"] {
  @include box-emboss(0.3, 0.6);
}

如果您想在这方面变得超级聪明，您也可以创建一个占位符选择器来 @extend。这样一来，您就不会在编译后的 CSS 中重复任何代码，但您可以将选择器分开并按任何您想要的方式组织它们。

%box-emboss {
  @include box-emboss(0.3, 0.6);
}

header[role="banner"] {
  @extend %box-emboss;
}

...

.module {
  @extend %box-emboss;
}

这是 CodePen 上的一个示例

我想分享一下我在自己的一些项目中使用过的其他自定义 @mixins。

字体堆叠

在这个网站上，我有四个字体堆叠

品牌
标题
正文
代码

如果您对字体足够小心，您可能不会在样式表中设置太多不同的 font-family。如果您在十几个地方设置了相同的堆叠，那么就说明有问题。但是，您可能需要设置不止一次。例如，您可能在 <body> 上设置了一个默认的正文字体，但这不会级联到表单元素，因此如果您想在那里使用相同的字体，您需要在这些元素上再次设置它。现在您在两个地方设置了它，@mixin 已经很有用。

我喜欢使用 @mixins 来实现这一点，而不是将字符串变量设置为字体系列本身，因为 @mixin 允许您在需要时设置其他属性。例如，您可能正在使用 @font-face 字体，其中您只加载了一种特定的权重，因此您希望在设置该 font-family 时设置该权重。

这是目前这个网站的 @mixins

@mixin font-stack-brand {
  font-family: 'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
}
@mixin font-stack-headers {
  font-family: 'Whitney Cond A', 'Whitney Cond B', "ronnia-condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
@mixin font-stack-body {
  font-family: 'Whitney SSm A', 'Whitney SSm B', "ff-meta-web-pro", sans-serif;
}
@mixin font-stack-code {
  font-family: Menlo, "inconsolata", Monaco, "Courier New", Courier, monospace;
}

媒体查询 Mixin

您可以创建输出您在花括号中传递的内容的 mixins。这允许一些巧妙的可能性。例如，您可以为媒体查询命名，然后在需要的地方使用它。这意味着更新该媒体查询只需要在一个地方进行。例如

@mixin breakpoint($point) {
  @if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @if $point == baby-bear {
    @media (max-width: 800px) { @content; }
  }
  @if $point == reverso-baby-bear {
    @media (min-width: 800px) { @content; }
  }
  @if $point == reverso-mama-bear {
    @media (min-width: 1250px) { @content; }
  }
}

一个简单的用法示例

.page-wrap {
  width: 80%;
  @include breakpoint(baby-bear) {
    width: 100%;
  }
}

.footer {
  a {
    display: inline-block;
    @include breakpoint(baby-bear) {
      display: block;
    }
  }
}

您可以在这里了解更多关于这个想法的信息。

CodePen 上的示例。

动画 Mixin

Compass 还没有为关键帧动画提供 @mixin，但这很容易自己添加。它使用与上面媒体查询 mixin 相同的 @content 想法。

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content
  }
  @-moz-keyframes #{$name} {
    @content
  }
  @-ms-keyframes #{$name} {
    @content
  }
  @-o-keyframes #{$name} {
    @content
  }
  @keyframes #{$name} {
    @content
  }
}

还有另一个用于设置动画的 mixin...

@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}

然后使用它就很简单了

@include keyframes(move) {
  0%   { left: 0; }
  100% { left: 100px; }
}

.box {
  @include animation(move 0.5s ease infinite alternate);
}

您可以在这里了解更多关于 CSS 动画的信息。

CodePen 上的示例

工具箱 Mixins

多年来，我在无数项目中使用了一些简单的辅助类。例如，辅助类可以用于无障碍隐藏和排版。如果您为这些东西创建了一个 mixin，您就可以获得双倍的收益。

// Accessible hiding
@mixin screen-reader-text() {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.screen-reader-text {
  @include screen-reader-text;
}

// Overflow Ellipsis
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis {
  @include ellipsis;
}

// Word Wrapping
@mixin word-wrap() {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.word-wrap {
  @include mixin word-wrap;
}

现在您有了可以在标记中使用的类名，如果您需要应用这些属性。但您还可以使用 mixin 将这些属性应用于其他声明，如果您无法或不想修改标记。

请注意，我通常不建议将 mixins 和类放在一起，就像这样。我更喜欢将 mixins 放在单独的文件中，例如 _bits.scss，该文件编译成空文件，因此可以包含在任何其他 Sass 文件中。

您的？

分享总是很有趣。

dustin horton

# 2012 年 10 月 4 日

我在我的博客上开始了一系列关于一些不在 Compass 中的 mixins 的文章，我发现它们很有帮助。

用于 CSS 三角形的 mixin 可能是我最喜欢的：blackbe.lt/useful-sass-mixins-css-trangle/

Kevin Druff

评论的永久链接# 2012 年 10 月 4 日

虽然三角形没有内置在 Compass 中，但它们内置在 Zurb Foundation 的 Compass 扩展中。虽然我不是大型网站的 Foundation 的忠实粉丝（它会变得很麻烦），但我确实经常在只有一两页的小型网站上使用它，三角形 mixin 非常有用。

Travis

# 2012 年 10 月 4 日

我喜欢使用 SASS 来设计网站，我无法想象回到纯 CSS！我使用 mixins 来处理媒体查询、字体堆叠和背景，而且使用得最多。我最近的一个是当我需要清除对 div 的任何父级样式时，这在处理 Drupal 时经常出现。因此，我喜欢使用以下方法

@mixin clear($style) {
    @if $style == 'clear-all' {
        padding:0;
        background-image:none;
        background-color:transparent;
        margin:0;
        height:auto;
        width:auto;
        float:none;
        border:none;
    }
}

Larry Botha

# 2012 年 10 月 4 日

我使用 Sass 仅仅一周，就爱上了它！我创建了一个小型的渐变 mixin，我可以指定我想在哪个属性上使用它

/* 
  Example:
  @include gradient(background-image, linear,
                  ( top,
                    transparent,
                    hsla(0, 0%, 100%, .1)
                  )
                );;
*/

@mixin gradient($prop, $type, $val) {
#{$prop}: -webkit-#{$type}-gradient($val);
#{$prop}:    -moz-#{$type}-gradient($val);
#{$prop}:     -ms-#{$type}-gradient($val);
#{$prop}:      -o-#{$type}-gradient($val);
#{$prop}:         #{$type}-gradient($val);
 }

我正在收集实用程序，其中大部分基于 Bourbon，在一个我正在慢慢构建和清理的样式指南中。

stu

# 2012 年 10 月 4 日

太棒了，我打算在我的网站上发布这些 - http://www.alwaystwisted.com，我可能还会发布... 垂直节奏的两个自定义 mixins - 使用 REM/PX - http://jsfiddle.net/sturobson/vYYn5/ 使用 Em - http://jsfiddle.net/sturobson/3KfUL/

stu

# 2012 年 10 月 4 日

哦，还有我创建的 lt-IE mixin，我在这里谈到过 - http://alwaystwisted.com/post.php?s=2012-08-06-a-sass-mixin-for-media-queries-and-ie

Kuzin

# 2012 年 10 月 4 日

媒体查询 + Retina Mixin（非常感谢 chris 昨天的推文。）

具有 HiDpi（Retina）支持的 SCSS 媒体查询 - Gist

Stefan

# 2012 年 10 月 4 日

我也使用这些 mixins，但我没有自己构建。我使用了一个扩展 SASS 的 gem，称为 Bourbon（用于样式）和 Neat（用于定位），它们具有这些很棒的功能。我强烈建议使用这些 gem，因为它们都带有前缀，所以你想要的所有东西（比如这些示例）都在这些 gem 中！而且因为它们很棒 :)

Fitz Haile

# 2012 年 10 月 4 日

为带有边框的框创建方向箭头（三角形）的 mixin。从 CSS 角度来看并没有什么革命性的东西，但放入 mixin 中很好。我仍然是新手，所以欢迎任何反馈。

带有边框的框箭头 (Gist) »

nickhempsey

评论的永久链接# 2012 年 11 月 9 日

Fitz，这太棒了！感谢分享。

Stephan

# 2012 年 10 月 4 日

我使用的是纯 CSS，并且非常喜欢它，我无法想象我的项目会加载这么多抽象的膨胀。

纯粹的 CSS 一直是我的选择！

Oliver

评论永久链接# 2012 年 10 月 7 日

1) SCSS 编译为纯 CSS
2) 抽象与臃肿相反：它允许你保持代码模块化，从而*减少*重复

MoOx

# 2012 年 10 月 4 日

在收集了大量的 CSS 技巧后，我决定将所有这些 mixin（使用 Sass 和 Compass）发布在这个项目中：Compass Recipes。这仍然是 WIP，但有很多有趣的东西。
希望你喜欢。

[电子邮件保护]

# 2012 年 10 月 5 日

我刚创建了一个 Sass/SCSS mixin，用于昨天你创建的 gist 中的视网膜/非视网膜媒体查询——

http://codepen.io/sturobson/pen/plcks

Subash

# 2012 年 10 月 5 日

用新语法编写渐变，并获取旧的语法。
因为 mixin 应该使新代码与旧代码兼容。


@mixin prefix($prop, $value, $prefixes...) {
    @each $prefix in $prefixes {
        @if($prefix != spec) {
            -#{$prefix}-#{$prop}: $value;
        }
        @if($prefix == spec) {
            #{$prop}: $value;
        }
    }
}

@mixin prefix_val($prop, $value, $prefixes...) {
    @each $prefix in $prefixes {
        @if($prefix != spec) {
            #{$prop}: -#{$prefix}-$value;
        }
        @if($prefix == spec) {
            #{$prop}: $value;
        }
    }
}

@mixin linear-gradient($angle, $stops...) {
    $ang: "#{$angle}";
    @if ( type-of( $angle ) !="number" )        {

        @if      ($ang == "to top"          )   { @include prefix_val(background-image, linear-gradient(bottom,       $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom"       )   { @include prefix_val(background-image, linear-gradient(top,          $stops), webkit, moz, o);   }
        @else if ($ang == "to left"         )   { @include prefix_val(background-image, linear-gradient(right,        $stops), webkit, moz, o);   }
        @else if ($ang == "to right"        )   { @include prefix_val(background-image, linear-gradient(left,         $stops), webkit, moz, o);   }
        @else if ($ang == "to top right"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to right top"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to top left"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to left top"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom right" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to right bottom" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom left"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }
        @else if ($ang == "to left bottom"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }

        background-image: linear-gradient($angle, $stops);
    }

    @else if( type-of( $angle ) =="number" ) {

        $old-angle: abs(450deg - $angle)%360;
        @include prefix_val(background-image, linear-gradient($old-angle, $stops), webkit, moz, o);
        background-image: linear-gradient($angle, $stops);
    }
}

@mixin linear-gradient($angle, $stops...) {
    $ang: "#{$angle}";
    @if ( type-of( $angle ) !="number" )        {

        @if      ($ang == "to top"          )   { @include prefix_val(background-image, linear-gradient(bottom,       $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom"       )   { @include prefix_val(background-image, linear-gradient(top,          $stops), webkit, moz, o);   }
        @else if ($ang == "to left"         )   { @include prefix_val(background-image, linear-gradient(right,        $stops), webkit, moz, o);   }
        @else if ($ang == "to right"        )   { @include prefix_val(background-image, linear-gradient(left,         $stops), webkit, moz, o);   }
        @else if ($ang == "to top right"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to right top"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to top left"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to left top"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom right" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to right bottom" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom left"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }
        @else if ($ang == "to left bottom"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }

        background-image: linear-gradient($angle, $stops);
    }

    @else if( type-of( $angle ) =="number" ) {

        $old-angle: abs(450deg - $angle)%360;
        @include prefix_val(background-image, linear-gradient($old-angle, $stops), webkit, moz, o);
        background-image: linear-gradient($angle, $stops);
    }
}

Subash

评论永久链接# 2012 年 10 月 5 日
啊，Heck 线性渐变 mxin 被重复发布了，chris 请删除它。
我无法理解一件事，我看到了 compass 使用
```
@mixin X(v1,v2,v3,v4,v5){ } to v10

Why not @mixin X($v...) { } ?????????
```

Adam Johnson

# 2012 年 10 月 5 日

当您无法访问/无法安装 Compass 时，我发现这些 SASS/SCSS mixin 非常有用

https://github.com/matthieua/sass-css3-mixins

里面有很多 CSS3 的好东西。

Ren

# 2012 年 10 月 5 日

我仍在向 SASS 过渡，但这些是我当前在项目中使用的一些 LESS mixin。我发现 mixin 最好的用途是能够为 IE 和旧浏览器设置回退，以及传入您的浏览器前缀值。


/*Make your element a circle.  Remember to set height and width to an equal value.*/
.radius-circle {
  -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
            border-radius: 50%;
}

/*A more advanced border-radius where you pass in 4 value, thus emabling you to set the radius on 2 corners (for example)  Follows the clockwise TRBL. */
.border-radius2( @topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0,) {
      -webkit-border-top-right-radius: @topright;
      -webkit-border-bottom-right-radius: @bottomright;
      -webkit-border-bottom-left-radius: @bottomleft; 
      -webkit-border-top-left-radius: @topleft;
          -moz-border-radius-topright: @topright;
          -moz-border-radius-bottomright: @bottomright;
          -moz-border-radius-bottomleft: @bottomleft;
          -moz-border-radius-topleft: @topleft;
                border-top-right-radius: @topright;
                border-bottom-right-radius: @bottomright;
                border-bottom-left-radius: @bottomleft;
                border-top-left-radius: @topleft;
      -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
            background-clip: padding-box;
}

/*I use a global transition, but can pass in the 3 values to change the animation*/
.transition(
    @what : all,
    @duration : .5s,
    @easing : ease-in-out
    ) {
    -webkit-transition: @what @duration @easing;
       -moz-transition: @what @duration @easing;
         -o-transition: @what @duration @easing;
            transition: @what @duration @easing;
}

/*Mixin to set fallback and compatible rgba*/
.rgb_a(@color, @alpha) {
    @alpha_color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); /* you can use HEX as your color ! */
    @ie_alpha_color: argb(@alpha_color);
    background-color: @color; // Fallback for older browsers
    background-color: @alpha_color;
    // IE hacks
    zoom: 1; // hasLayout
    background-color: transparent\9;
    -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ie_alpha_color}, endColorstr=@{ie_alpha_color})";
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ie_alpha_color}, endColorstr=@{ie_alpha_color})";

    }

/*Simple mixin for a gradient, setting the beginning color, end color, and when to switch*/
.gradient(
    @begin: black,
    @end: white,
    @switch : 100%
    ) {
    background:  @begin;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
    background: -moz-linear-gradient(top, @begin, @end @switch);
    background: -o-linear-gradient(top, @begin, @end @switch);
    background: linear-gradient(top, @begin, @end @switch);
    }

/*Another compatibility mixin with fallback*/
.opacit_y(@opacity: 0.5) {
  -webkit-opacity: @opacity;
       -moz-opacity: @opacity;
          -khtml-opacity: @opacity;
              opacity: @opacity;
              @ie: @opacity*100;
                    filter: alpha(opacity=@ie);
}

Trevor

# 2012 年 10 月 5 日

我一直使用内边距来创建双边框，而不是嵌套的 span 或 div，所以 mixin 是完美的载体

@mixin box-shadow-inset ($horizontal, $vertical, $spread, $color) {
    -webkit-box-shadow: $horizontal $vertical $spread $color inset;
    -moz-box-shadow: $horizontal $vertical $spread $color inset;
    -ms-box-shadow: $horizontal $vertical $spread $color inset;
    -o-box-shadow: $horizontal $vertical $spread $color inset;
    box-shadow: $horizontal $vertical $spread $color inset;
}

nerdfiles

# 2012 年 10 月 5 日

可能有用（@see http://snipplr.com/view.php?codeview&id=66966）

/**
 * CSS3 Image Filter Tools
 */ 

@mixin if-blur($amt: 4px) {
  -o-filter: blur($amt);
  -ms-filter: blur($amt);
  -moz-filter: blur($amt);
  -webkit-filter: blur($amt);
}

@mixin if-brightness($amt: 0.35) {
  -o-filter: brightness($amt);
  -ms-filter: brightness($amt);
  -moz-filter: brightness($amt);
  -webkit-filter: brightness($amt);
}

@mixin if-contrast($amt: 140%) {
  -o-filter: contrast($amt);
  -ms-filter: contrast($amt);
  -moz-filter: contrast($amt);
  -webkit-filter: contrast($amt);
}

@mixin if-grayscale($amt: 100%) {
  -o-filter: grayscale($amt);
  -ms-filter: grayscale($amt);
  -moz-filter: grayscale($amt);
  -webkit-filter: grayscale($amt);
}

@mixin if-huerotate($deg: 180deg) {
  -o-filter: hue-rotate($deg);
  -ms-filter: hue-rotate($deg);
  -moz-filter: hue-rotate($deg);
  -webkit-filter: hue-rotate($deg);
}

@mixin if-invert($amt: 100%) {
  -o-filter: invert($amt);
  -ms-filter: invert($amt);
  -moz-filter: invert($amt);
  -webkit-filter: invert($amt);
}

@mixin if-opacity($amt: 60%) {
  -o-filter: opacity($amt);
  -ms-filter: opacity($amt);
  -moz-filter: opacity($amt);
  -webkit-filter: opacity($amt);
}

@mixin if-saturate($amt: 4) {
  -o-filter: saturate($amt);
  -ms-filter: saturate($amt);
  -moz-filter: saturate($amt);
  -webkit-filter: saturate($amt);
}

@mixin if-sepia($amt: 100%) {
  -o-filter: sepia($amt);
  -ms-filter: sepia($amt);
  -moz-filter: sepia($amt);
  -webkit-filter: sepia($amt);
}

Joseph Silber

# 2012 年 10 月 7 日

为什么你对动画使用 -ms- 前缀？

由于没有稳定版本的 IE 附带这些前缀，因此普遍认为不需要包含它们。

虽然 compass 仍在不断推出它们（希望很快就会改变），但我们不应该在自己的 mixin 中使用它们。

Bertram Simon

# 2012 年 10 月 29 日

我扩展了一个 mixin 来处理 rem。我用德语写下来了
http://typo3-wuppertal.de/post/33835337756/sass-plugin-fur-die-nutzung-von-rem

以下是一个使用示例

.element
  @include rem('padding',10px 0 2px 5px)

.element2
  @include rem('border', 1px solid red)
  @include rem('padding', 10px !important)

这将变为

.element {
  padding: 10px 0 2px 5px;
  padding: 1rem 0 0.2rem 0.5rem;
}
.element2 {
  border: 1px solid red;
  border: 0.1rem solid red;
  padding: 10px !important;
  padding: 1rem !important;
}

如果你只是想要代码，你可以看看这里
https://github.com/SimonWpt/rem

nickhempsey

# 2012 年 11 月 9 日

我昨天在 Lodge 发布了这个，但我也会在这里发布。

这是一个用于字体堆栈的 @mixin，它有一个 !important 选项。这对那些顽固的插入 div 非常有用，我指的是你，Google 自定义搜索引擎。


@mixin font-stack($important) {
    $stack: Arial, Tahoma, Sans-Serif;
    @if $important == 1 {
        font-family: $stack !important; 
    } @else  if $important == 0 {
        font-family: $stack;
    }
}

// Use it!

.important {
     @include  font-stack(1);
}

.not-important {
     @include  font-stack(0);
}

此评论线程已关闭。如果您有重要的信息要分享，请联系我们。