Global variables

For relatively simple projects, it may be sufficient to just use template files, content files, and resources. However, to unlock some of the more powerful features of Salal, you will also need to use Configuration files. One of the most common use cases involves using a project configuration file to define some global variables. This feature is frequently used on conjunction with Build profiles or Themes, but here we'll use a more basic example to illustrate how global variables work.

Suppose all pages of a particular type should load a given CSS file. You could hard-code the URL for the CSS file in your page template. However, it may be better for maintainability to use a global variable instead. You can put something like this in your template:

<link rel="stylesheet" href="{{globals.special_style_file}}" type="text/css" />

And then put this in your project config file:

{
    "globals": { 
        "special_style_file": "/css/style_for_sally.css"
    }
}

Note that Salal also substitutes global variables in CSS, JavaScript, and Python files. This can be handy if you have particular values that you need to use repeatedly, and want to be able to easily update without having to make changes in multiple places. For example, consider breakpoints for CSS media queries. You can put something like this in your CSS files:

@media (min-width: {{globals.medium_breakpoint}}) and (max-width: {{globals.wide_breakpoint}}) {
    .grid-wrapper {
        grid-gap: 1.0rem;
        padding: 0 2.3rem;
    }
}

And then put something like this in your project config file:

{
    "globals": {
	"medium_breakpoint" : "63.5rem",
        "wide_breakpoint" : "75rem"
    }
}