Table of contents

Official Content

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.


{@import {{ <DSO_name> | <DSO_name>.tokens | <DSO_name>.styles }...
          { <CSS_path_file> }...

View Design System Syntax conventions


Qualified Name of a DSO in the KB

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

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

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


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


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


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


Since GeneXus 17 Upgrade 6.

See Also

See the general topic Design System Style Rules.
Syntax conventions

Last update: April 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant