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