Help Center

Menu

SCSS design file

SCSS is a particular 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, making 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 an SCSS design file, you can configure its settings on its associated asset screens.

The majority of these screens are the same as a CSS design file and are described in the CSS design file documentation.

The SCSS design file asset works similarly to a CSS design file asset. Most of the functions covered previously in this documentation can also be used on the SCSS design file asset. However, you can not create customizations or use XML design tags.

The SCSS design file can be linked into the CSS file folder to take advantage of compression, auto regeneration, and other features of the CSS file folder.

The SCSS design file’s web path 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

The following 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-&gt;type: root
block-&gt;depth: 0
block-&gt;selectors: []
block-&gt;lines: []
  block-&gt;type: comment
  block-&gt;depth: 0
  block-&gt;selectors: []
  block-&gt;lines[0]: /*! Comment */
  block-&gt;children: []
  block-&gt;type:
  block-&gt;depth: 1
  block-&gt;selectors[0]: .navigation
  block-&gt;lines: []
  block-&gt;children: []
  block-&gt;type:
  block-&gt;depth: 2
  block-&gt;selectors[0]: .navigation ul
  block-&gt;lines[0]: line-height: 20px;
  block-&gt;lines[1]: color: blue;
  block-&gt;children: []
  block-&gt;type:
  block-&gt;depth: 3
  block-&gt;selectors[0]: .navigation ul a
  block-&gt;lines[0]: color: red;
  block-&gt;children: []
  block-&gt;type:
  block-&gt;depth: 1
  block-&gt;selectors[0]: .footer
  block-&gt;lines: []
  block-&gt;children: []
  block-&gt;type:
  block-&gt;depth: 2
  block-&gt;selectors[0]: .footer .copyright
  block-&gt;lines[0]: color: silver;
  block-&gt;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 several 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 "./?a=5678:scss/_variables.scss";
@import "%globals_asset_url_with_hash:5678:scss/_variables.scss%";

You can only include other .scss files, not .css files.

For example, you can not 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 is updated, it will also trigger an update of the SCSS design file to automatically compile and create a new version of the generated .css file. In turn, this new file will 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 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";