OpenWGA 7.10 - OpenWGA Concepts and Features

Design and development » JavaScript and CSS » SCSS Preprocessor

@import other scss resources

SCSS supports to "import" other scss resources through it @import statement:

@import "my-other-scss";

This statement searches in the current design folder (the folder containing the scss executing this @import statement) for a resource "my-other-scss.scss" and imports the found scss code. If not found it also searches for "_my-other-scss.scss" - adding an underscore to the resource name.

To address subfolders use the normal file path syntax:

@import "some-folder/some-scss";

Nothing special here. You may also specify the file extension .scss but its not required.

OpenWGA also supports the @import of resources from other apps as the current app and from OpenWGA file container. This is supported through a special resource-reference syntax implemented in OpenWGA:

@import "db=<dbkey> type=css|file path=path/to/scss";

A "resource reference" consists of three parts seperated by one or more spaces: a dbkey, a resource type and a path to a scss file.

  • Dbkey is optional and defaults to the current design if not specified.
  • Type is optional and is either "file" to address a file container or "css" to address a scss in scripts/css design folder. If not specified type "css" is used.
  • Path is the only required part but you may obmit path=.

The following sample @import-s bootstrap from a file container "bootstrap":

@import "type=file /bootstrap/stylesheets/_bootstrap.scss";

Note that path= is obmitted here.