diff --git a/source/guide.html.haml b/source/guide.html.haml index 70b9147d0..73b167d16 100644 --- a/source/guide.html.haml +++ b/source/guide.html.haml @@ -239,19 +239,36 @@ introduction: > - example do :plain - @mixin transform($property) { - -webkit-transform: $property; - -ms-transform: $property; - transform: $property; + @mixin theme($theme: DarkGray) { + background: $theme; + box-shadow: 0 0 1px rgba($theme, .25); + color: #fff; + } + + .info { + @include theme; + } + .alert { + @include theme($theme: DarkRed); + } + .success { + @include theme($theme: DarkGreen); } - .box { @include transform(rotate(30deg)); } === - =transform($property) - -webkit-transform: $property - -ms-transform: $property - transform: $property - .box - +transform(rotate(30deg)) + @mixin theme($theme: DarkGray) + background: $theme + box-shadow: 0 0 1px rgba($theme, .25) + color: #fff + + + .info + @include theme + + .alert + @include theme($theme: DarkRed) + + .success + @include theme($theme: DarkGreen) :markdown To create a mixin you use the `@mixin` directive and give it a name. We've