0byt3m1n1
Path:
/
home
/
k
/
a
/
s
/
kassiope
/
www
/
vendor
/
css-crush
/
css-crush
/
docs
/
core
/
[
Home
]
File: mixins.md
<!--{ "title": "Mixins" }--> Mixins make reusing small snippets of CSS much simpler. You define them with the `@mixin` directive. Positional arguments via the argument function `#()` extend the capability of mixins for repurposing in different contexts. ```crush @mixin display-font { font-family: "Arial Black", sans-serif; font-size: #(0); letter-spacing: #(1); } /* Another mixin with default arguments */ @mixin blue-theme { color: #(0 navy); background-image: url("images/#(1 cross-hatch).png"); } /* Applying the mixins */ .foo { @include display-font(100%, .1em), blue-theme; } ``` ```css .foo { font-family: "Arial Black", sans-serif; font-size: 100%; letter-spacing: .1em; color: navy; background-image: url("images/cross-hatch.png"); } ``` ## Skipping arguments Mixin arguments can be skipped by using the **default** keyword: ```crush @mixin display-font { font-size: #(0 100%); letter-spacing: #(1); } /* Applying the mixin skipping the first argument so the default value is used instead */ #foo { @include display-font(default, .3em); } ``` Sometimes you may need to use the same positional argument more than once. In this case the default value only needs to be specified once: ```crush @mixin square { width: #(0 10px); height: #(0); } .foo { @include square; } ``` ```css #foo { width: 10px; height: 10px; } ``` ## Mixing-in from other sources Normal rules and [abstract rules](#core--abstract) can also be used as static mixins without arguments: ```crush @abstract negative-text { text-indent: -9999px; overflow: hidden; } #main-content .theme-border { border: 1px solid maroon; } .foo { @include negative-text, #main-content .theme-border; } ```