Mixins are the Sass equivalent of macros in other programming languages. If you’ve programmed before you could think of them as functions, procedures, or methods, but they aren’t technically any of these concepts because their function is to generate code at compile time not execute code at run time.

可以把mixins當成編程語言里的宏，但是技術上說，scss mixins用于在編譯器生成代碼，而不是在運行時執行代碼。

一個例子：

a.button {background: black;color: white;padding: 10px 20px;@include border-radius(5px); }

編譯之后：

a.button {background: black;color: white;padding: 10px 20px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px; }

I used the @include directive to tell Sass that I wanted to call out to a mixin.
使用@include指令，告訴sass，需要在css里call out mixin. 通過括號傳遞參數。

看下border-radius的實現代碼：

@mixin border-radius($radius) {-moz-border-radius: $radius;-webkit-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius; }

一個mixin傳遞默認參數的做法：

@mixin border-radius($radius: 5px) {... }

或者定義一個全局變量：

$default-border-radius: 5px !default; @mixin border-radius($radius: $default-border-radius) {... }

scss mixin里還支持條件指令@if:

@mixin border-radius($radius: 5px, $moz: true, $webkit: true, $ms: true) {@if $moz { -moz-border-radius: $radius; }@if $webkit { -webkit-border-radius: $radius; }@if $ms { -ms-border-radius: $radius; }border-radius: $radius; }

上面的用法叫做keyword argument.

這樣，如果項目里我們不考慮對IE的支持，只需要下面這樣寫就行了：

@include border-radius($ms: false);

而不用這種繁瑣的寫法：

@include border-radius(5px, true, true, true);

也不需要按照順序傳遞參數：

@include border-radius($ms: false, $radius: 10px);

總結

以上是生活随笔為你收集整理的一个SCSS里mixin的使用例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。