Include style rule

Official Content
This documentation is valid for:

Includes another defined class from a Class selector or CSS selector.

Syntax

@include  class_name class_namei...};

View Syntax conventions.

Where: 

class_name, class_namei : Name of a class declared in the same Style. If there is no class with that name, it is ignored.

Restrictions

●    This rule can’t be used within an @Media rule.
●    This rule doesn’t support using classes defined in another DSO or CSS and imported with the @import rule.

When a class declares an include rule, the property declarations of the classes to include are taken as if they were written within the class being declared, in that same order. Therefore, they are added to those of the class. If there is overlap, those of the parent class are not included. The only ones included are those of the child class (the class being declared).

Example: For the H1 class, the entire H1_Negative declaration block is valid except for the color declaration; in this case, the declaration explicitly specified in H1 is valid.

.H1_Negative
{
     font-family: $fonts.Title1;
     font-size: $fontSizes.H1;
     font-weight: bold;
     letter-spacing: -1.72px;
     color: #FFFFFF;
}
.H1
{
     @include H1_Negative;
     color: $colors.Black;
}

If it is to be used for a Web application, the generated CSS will look as follows (note that the tokens are replaced with their values):

.H1_Negative
{
    font-family: AbhayaLibre-Bold;
    font-size: 95px;
    font-weight: bold;
    letter-spacing: -1.72px;
    color: #FFFFFF;
} 
.H1
{
    font-family: AbhayaLibre-Bold;
    font-size: 95px;
    font-weight: bold;
    letter-spacing: -1.72px;
    color: #181918;
}

Note that a class could be defined by including several classes:

.MenuMainItem
    {
        @include Margin-Sides MenuItem;
        color: #FFFFFF;
    }

It could even have only an include rule, without a specific block of properties:

.MenuMainItem
    {
        @include Margin-Sides MenuItem;
    }

Availability

Since GeneXus 17 Upgrade 6.

See Also

See the general topic Design System Style Rules.