Custom Sass Functions

Custom Sass functions

Custom Sass Function	Description
stencilColor	`stencilColor` accepts (as a string) the key name of a color that you have defined in config.json as editable. It returns the color’s hexadecimal value.
stencilFontFamily	`stencilFontFamily` accepts (as a string) the name of a font key that you have defined in config.json. It returns the corresponding font-family value, also as a string. For a key named “headings-font” and defined as Google Open Sans, `stencilFontFamily` would return a value like this to Sass variables: `$headings-‐font-‐family: 'Open Sans';` (the example’s name and definition in config.json are both arbitrary). Your Sass stylesheet must call stencilFontFamily for each config.json font key whose font-family value you want to provide to Sass variables. You would call the function in the following format (again assuming a key arbitrarily named “headings-font”): `$headings-font-family: stencilFontFamily("headings-font");`.
stencilFontWeight	`stencilFontWeight` accepts (as a string) the key name of a font that you have defined in config.json. It returns (as an integer) the corresponding font-weight value. For a key arbitrarily named “headings-font” and defined as 700, it would return a value like this to Sass variables: `$headings-‐font-‐weight: 700;` Your Sass stylesheet may optionally call stencilFontWeight for each config.json font key whose weight value you want to provide to Sass variables. You would call the function in the following format: `$headings-font-weight: stencilFontWeight("headings-font");`.
stencilNumber	`stencilNumber` accepts (as a string) a key name that you have defined in config.json as editable. It also accepts (also as a string) an optional second parameter to define the unit. (This second parameter’s value defaults to `px`.) It returns the corresponding numeric value, postfixed with the defined unit. You can use this function with arithmetical operators. For example, assume that your config.json contains a `font-size` value of `3`. The following statement would evaluate to `9rem`. `stencilNumber("font-size", "rem") * 3`.
stencilString	`stencilString` accepts (as a string) a key name that you have defined in config.json as editable. It returns (also as a string) the key’s value. This function is used for purposes like defining font family names, or defining paths to images.
stencilImage	`stencilImage` accepts (as a string) a key name for an image url that you have defined in config.json. It also accepts (as a string) the key name for the image size that you have defined in config.json. It returns the string value of the image URL and the size.

Note

The config.json file is the main configuration file for Stencil themes and exists in the theme root directory. Use Stencil CLI to edit this file.

Compiling custom Sass files

If you want to add your own custom Sass files to a theme, initiate auto-compilation of those files by including the associated tag in your HTML markup. Doing this is useful for isolating your custom styles. Cornerstone’s Sass file is named /assets/scss/theme.scss.

To add a custom Sass file, place it at this path location, using an arbitrary filename prefix as shown:

/assets/scss/foobar.scss

Next, import the custom file into theme.scss.

@import "foobar";

Finally, ensure {{stylesheet '/assets/css/theme.scss'}} is located in templates/layout/base.html/.

<head>
<!-- ... -->
{{stylesheet '/assets/css/theme.scss'}}
<!-- ... -->
</head>

While stencil start is running, it will recompile your custom Sass files to the specified {theme-name}/assets/css/theme.scss file (note that this object file’s name is always the same, and is independent of your custom Sass file’s names).

Before you customize

The Stencil framework is designed to support your incorporation of custom Sass files/frameworks. However, BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil’s default dependencies.