OpenWGA 7.6 - OpenWGA Concepts and Features

Design and development » JavaScript and CSS

SCSS Preprocessor

OpenWGA 7.3 suppports SCSS.

SCSS is a CSS preprocessor compiling your SCSS code to CSS.

To use SCSS define you scss code as CSS-recource (in scripts/css) with file extension .scss. Address this resource as usual using <tml:url type="css">. OpenWGA will find your scss code and compiles it to CSS on the fly without any further actions for the designer. No separate build process is required.

SCSS code is cached. As long as you don't change your scss code (or one of the "@import-ed" resources) the CSS is served from the cache without running the scss processor again.

In production mode the resulting CSS code is automatically compressed. In developer mode (using OpenWGA Developer Studio) the CSS is not compressed.

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

Predefine scss variables

SCSS support variables.

If you need to calculate predefined variables using TMLScript define a tmlscript scripts/tmlscript/wga/css-variables.tmlscript that returns a JavaScript object.

Sample:

return {

bg_color: "#ffc800",

text_color: "#004080"

}

The returned object properties are available as $<propertyname> ($bg_color and $text_color in this sample) inside your scss:

body{

background-color: $bg_color;
color: $text_color;

}

Acessing OpenWGA file URLs inside scss

Inside your scss code you sometimes need access to URLs pointing to OpenWGA file resources f. e. to define a background image URL to an image in a file resource.

To do this use the function

wga_file_url([dbkey,] container, filename)

anywhere inside your scss code.

Parameter "dbkey" is optional and defaults to the current design.

Sample:

background: url(wga_file_url("images", "logo.png")) no-repeat;