SCSS Design File imports

Squiz Matrix Support
1

Matrix Version: 5.4.0.0

I’m currently converting a new design over to SCSS and I’ve run into what seems to be an oversight with the SCSS Design File - it doesn’t seem possible to import other SCSS files directly?

So far I’ve tried somewhat normal SCSS methods:

  • @import ‘variables.scss’
  • @import [asset_id]

variables.scss is a SCSS Design File contain common variable that I’d like to use across several design files.

I’ve also tried directly nesting it via %globals_asset_contents_raw:[asset_id]% and got:
“(‘Error occured when compiling SCSS content: parse error: failed at %globals_asset_contents_raw:634837% (stdin) on line 2’)”.

It looks like Suiz keywords aren’t available (even a simple %asset_assetid% doesn’t work)?

The design files are nested under a CSS File Folder which has a mix of regular CSS, CSS Design File & SCSS Design File children.

Importing SCSS variables & mixins seems like a standard use case, is there something I’m missing?

1 Like
2

Hey Dave,
This is a specific limitation we put in place for the initial release of this feature. I cannot remember exactly the reasoning why but I do know there were some challenges in supporting it, and wasn’t a priority for the feature for it’s initial release.

This post has prompted me to revisit it again however and see if we can achieve it for any upcoming releases.

https://squizmap.squiz.net/matrix/10907

Will keep the post here updated with any progress on it.

3

Thanks Bart, I’d given up hope of a reply and wasn’t checking this. It would greatly simplify our SCSS files.

Having %globals_asset_contents_raw% work in SCSS files would get us most of the way there?

4

I think we should try and make it work as per normal SCSS files with the @import ‘./?a=1234’ method.

That way it will be as close to normal SCSS development as possible.

1 Like
5

Just wondering if there is now a way to have a variables.scss file that contains the variables to be imported into various files?

I can’t save a file that has a mixin variable that is contained in the imported file.

EDIT:
Sorry…worked it out…the imported file needs to be a css file, but has to be named .scss when created.

1 Like