SCSS Design File
Last Updated: 28 Jun 2019
This entire manual refers to a feature that was added in version 5.4.0.0
SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the Matrix server and output a traditional CSS file that your browser can understand.
The SCSS Design File allows you to write and edit SCSS code and then automatically compiles a static CSS file on the frontend.
You must have the scssphp compiler installed on your server and point to the repository path in the SQ_TOOL_SCSSPHP_PATH setting on the External Tools Configuration screen.
Once you have added a SCSS Design File, you can configure its settings on its associated asset screens.
The majority of these screens are the same or similar to those for a CSS Design FIle and are described in the CSS Design File chapter in this manual.
The SCSS Design File asset works similarly to a CSS Design File asset. Most of the functions covered previously in this manual can also be used on the SCSS Design File asset, however you can not create customisations or use XML design tags.
The SCSS Design File can be linked into the CSS File Folder to take advantage compression, auto regeneration and other features of the CSS File Folder.
The web path of the SCSS Design File will load the compiled static CSS file that the SCSS processor creates.
For more information on how to write SCSS code, please refer to the documentation on the SASS website.
Details Screen
SCSS Options
This section allows you to control the compiling options for the static CSS file.
Available fields:
- Output Style: Choose the output style of the generated static CSS file. The following options are available:
- Compact
- Compressed
- Crunched
- Debug
- Expanded (default)
- Nested
For more information on these output styles, refer to the official SASS documentation.
Output Style Examples
Below are examples of the different Output Styles that will be created when applied to the given SCSS code:
/*! Comment */
.navigation {
ul {
line-height: 20px;
color: blue;
a {
color: red;
}
}
}
.footer {
.copyright {
color: silver;
}
}Compact
/*! Comment */
.navigation ul { line-height:20px; color:blue; }
.navigation ul a { color:red; }
.footer .copyright { color:silver; }Compressed
/* Comment*/.navigation ul{line-height:20px;color:blue;}.navigation ul a{color:red;}.footer .copyright{color:silver;}Crunched
.navigation ul{line-height:20px;color:blue;}.navigation ul a{color:red;}.footer .copyright{color:silver;}Debug
<pre>block->type: root block->depth: 0 block->selectors: [] block->lines: [] block->type: comment block->depth: 0 block->selectors: [] block->lines[0]: /*! Comment */ block->children: [] block->type: block->depth: 1 block->selectors[0]: .navigation block->lines: [] block->children: [] block->type: block->depth: 2 block->selectors[0]: .navigation ul block->lines[0]: line-height: 20px; block->lines[1]: color: blue; block->children: [] block->type: block->depth: 3 block->selectors[0]: .navigation ul a block->lines[0]: color: red; block->children: [] block->type: block->depth: 1 block->selectors[0]: .footer block->lines: [] block->children: [] block->type: block->depth: 2 block->selectors[0]: .footer .copyright block->lines[0]: color: silver; block->children: []</pre>
Expanded
/*! Comment */
.navigation ul {
line-height: 20px;
color: blue;
}
.navigation ul a {
color: red;
}
.footer .copyright {
color: silver;
}Nested
/*! Comment */
.navigation ul {
line-height: 20px;
color: blue; }
.navigation ul a {
color: red; }
.footer .copyright {
color: silver; }
Using @import
You can use the Sass based @import directive for including other .scss files into the compiling of the final .css file.
You can use a number of ways to include a .scss file:
//When referencing Matrix file assets:
@import "mysource_files/_variables.scss";
@import "./?a=1234";
@import "%globals_asset_url:1234%";
//When referencing Git File Bridge shadow file assets:
@import "./?external-uuid=178bd4bb-d4fa-40a0-bf1c-6a6575c48b61";
@import "%globals_asset_url_with_hash:5678:scss/_variables.scss%";
You can only include other .scss files, not .css files. So for example, you can't reference another SCSS Design File asset, as that asset produces an actual .css file. You can only reference other static CSS Files where the extension is set to .scss.
Whenever one of the @import file assets are updated, it will also trigger an update of the SCSS Design File so that it automatically compiles and creates a new version of the generated .css file. This in turn would also trigger an update to the CSS File Folder if the SCSS Design File is included in that.
The Sass @import directive will only work for files with a .scss extension. If you use it on a .css file, the output will simply be the standard CSS @import format. For example, this:
@import "mysource_files/_variables.css";
Would compile to this:
@import "https://www.site.com/designs/css/styles.css/_variables.scss";