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.

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

See the general topic Design System Style Rules.
Syntax conventions