Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/warappa/XamlCSS/wiki/Mixins below:

Mixins · warappa/XamlCSS Wiki · GitHub

Supported Version: 2.0.0-pre1 or higher

Mixins let you reuse style-declaration-blocks from the mixins to the style-declaration-block you need them (read "automatically 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;
}

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

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

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;
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4