Import style rule

Imports and uses definitions made in any of the following entities: Design System Object, Design System Tokens, Design System Styles and External CSS.

This Design System Style Rule must be written at the beginning of the set of DSO Style definitions.

Syntax

{@import {{ <DSO_name> | <DSO_name>.tokens | <DSO_name>.styles }...
          |
          { <CSS_path_file> }...
          |
          {gx-file'('<CSS_KB_file>')'}... 
          }';'  
}...

View Design System Syntax conventions

Where:

DSO_name
    Qualified Name of a DSO in the KB. 

CSS_path_file
     Relative or absolute path of the external CSS file to be imported.

CSS_KB_file
     Name of a File object of the KB with CSS format.

gx-file
     Function that can be used in Styles to indicate the file object of the KB to be accessed. 

Restrictions

●   Only .css files can be imported.
●    It is not possible to combine the import of files with that of the DSO in the same line.
●    This rule can only be written at the beginning of the definition of a Styles set.

Considerations

●    In the Styles of a design system, there is always an implicit import of the Tokens of that same DSO. This implicit import takes precedence over all other imports performed and cannot be removed.
●    Due to the above and because there is a direct dependency between the Styles part and the Tokens part of the same DSO, importing styles from an external DSO is equivalent to importing the complete DSO with its Tokens.
●    The precedence of imports follows these rules:
                       ○    All classes and Tokens of the DSO itself take precedence over classes and tokens imported from others.
                       ○    If you have more than one import rule, the second written rule takes precedence over the previous ones.

Samples

styles MyStyles
{
    @import DesignSystem1 DesignSystem2.tokens DesignSystem3.styles;
    @import "../my_file1.css" "../my_file2.css";
    @import gx-file(CSSFile.css);
    
    .class1
    {
        //Properties...
    }
}

Availability

Since GeneXus 17 Upgrade 6.

See Also

Design System Style Rules