Mixins

Supported Version: 2.0.0-pre1 or higher

What are Mixins?

Mixins let you reuse style-declaration-blocks from the mixins to the style-declaration-block you need them (read "automatically copy and paste").

The Problem - Copy and Paste

I.e. you have a grid with labels and inputs. All the labels are on the left column, and the inputs in the right column. If you want that in plain css, you have to copy this style-declarations to every input you use in your grid.

Label {
    Grid.Column: 0;
    BackgroundColor: #333333;
    FontAttributes: Bold;
}
Entry {
    Grid.Column: 1;
    BackgroundColor: #dddddd;

    TextColor: #ddd;
}
Switch {
    Grid.Column: 1;
    BackgroundColor: #dddddd;

    Padding: 5, 5, 5, 5;
}
Editor {
    Grid.Column: 1;
    BackgroundColor: #dddddd;

    Padding: 5, 5, 5, 5;
    TextColor: Black;
}

Changing any of the copied values or adding some is tedious because you have to find and replace them manually in every occurance.

It is better to just write a mixin which allows you to let XamlCSS copy and paste that for you on the fly.

@mixin Formlabel() {
    Grid.Column: 0;
    BackgroundColor: #333333;
    FontAttributes: Bold;
}
@mixin FormInput() {
    Grid.Column: 1;
    BackgroundColor: #dddddd;
}

Using mixins is called "including" them. Use @include <mixinname>(...) to specify which mixin you want to include.

Entry {
    @include FormInput();

    TextColor: #ddd;
}
Switch {
    @include FormInput();

    Padding: 5, 5, 5, 5;
}
Editor {
    @include FormInput();

    Padding: 5, 5, 5, 5;
    TextColor: Black;
}

Mixin-Parameters

You can call mixins with parameters. That allows you to make mixins more generally useable.

@mixin Colored($background, $textColor) {
    BackgroundColor: $background;
    TextColor: $textColor;
}

Default-Values of Parameters

You can provide default values to the parameters by adding a colon and a value after the variable-name.

@mixin Colored($background:#333333, $textColor:#dddddd) {
    BackgroundColor: $background;
    TextColor: $textColor;
}