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.
{@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.
● 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.
● 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);
.class1
{
//Properties...
}
}
Since GeneXus 17 Upgrade 6.
See the general topic Design System Style Rules.