Import style rule

Official Content
This documentation is valid for:

Allows importing and using definitions made in any of the following entities: Design System Object, Design System Tokens, Design System Styles, External CSS.

It is 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 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

●    The files that can be imported are only those with .css format.
●    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.

Example:

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

See the general topic Design System Style Rules.