diff --git a/README.md b/README.md index 52804a5..47b7193 100644 --- a/README.md +++ b/README.md @@ -263,6 +263,16 @@ Prefer dash-cased variable names (e.g. `$my-variable`) over camelCased or snake_ Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles. +##Mixinsare like functions for CSS. Here is how to write one: + +@mixin box-shadow($x, $y, $blur, $c){ + -webkit-box-shadow: $x, $y, $blur, $c; + -moz-box-shadow: $x, $y, $blur, $c; + -ms-box-shadow: $x, $y, $blur, $c; + box-shadow: $x, $y, $blur, $c; +} +The definition starts with @mixinfollowed by a custom name. The parameters (the $x, $y, $blur, and $cin the example above) are optional. + ### Extend directive `@extend` should be avoided because it has unintuitive and potentially dangerous behavior, especially when used with nested selectors. Even extending top-level placeholder selectors can cause problems if the order of selectors ends up changing later (e.g. if they are in other files and the order the files are loaded shifts). Gzipping should handle most of the savings you would have gained by using `@extend`, and you can DRY up your stylesheets nicely with mixins.