Extend

What is @extend?

Extend takes the contents of a style-declaration-block and injects it into another one.

You can use @extend if you want to base a style on one or more other styles. This is more flexible than the native Style.BaseOn method.

Inherit/Copy From Another Style-Declaration-Block

For example if you want to reuse the default Label style for your custom Label class called MyLabel, you can use the extend keyword to copy the contents of Label into the style-declaration-block of MyLabel:

Label {
   TextColor: #333;
   FontSize: 17;
}

custom|MyLabel {
   @extend Label;
   PlaceholderTextColor: #666;
}

is the same as

Label {
   TextColor: #333;
   FontSize: 17;
}

custom|MyLabel {
   TextColor: #333;
   FontSize: 17;
   PlaceholderTextColor: #666;
}

Note

Inheritance of ui-elements like in the sample is not required, it works with any elements sharing some dependeny properties!