.scss and .css

Skoory
Pathfinder
110 1 36

Shopify is notifying shop owners about the need to convert theme.scss files to theme.css files. They are saying that all free and paid Shopify themes in the future will have this conversion. 

Ok, that's good.

Looks like a .css file can be saved as a .scss file but not vice versa. But, how am I supposed to convert our theme.scss to .css - there aren't any guides or anything provided. So, I just downloaded the most recent version of our theme, but that is still using the old theme.scss file that Shopify told me they do not want!

Can someone shed some light on this issue, pls. Thanks.

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
JLbyone
Excursionist
175 17 38

same here, with VENTURE THEME

Skoory
Pathfinder
110 1 36

Hi @JLbyone,

If there were clear instructions, we may complete the task, but I couldn't find any guidance for the layperson who'd be happy to do some coding.

There is some info for developers. For example, looks like Mixins don't work with .css but could not find detail about converting them to .css - the Shopify pages assume that everybody understands how it's done!

It looks like Debut has been updated so far. And, Venture theme has not been updated yet, it seems.

So, why is Shopify sending messages to shop owners before converting all of their themes? 

 

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
Antho3
Tourist
6 0 2

Same here with Brooklyn template.

Didn't find any options so far... (actually, i hope Brooklyn will be updated soon !)

Skoory
Pathfinder
110 1 36

Hi @Antho3,

How do you know Brooklyn is next: were you informed by Shopify?

Perhaps Venture will be last on their to do list; 600 lines in the beginning of .scss appear to be code for Mixins. Think Debut's coding was easier to adapt maybe?

How do they expect people to do the conversion for 600 lines of Venture's theme.scss, if they do not explain the details?

 

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
Ninthony
Shopify Partner
1635 224 613

You can use a converter:

https://jsonformatter.org/scss-to-css

Should be fine. Just duplicate your theme, copy your theme.scss.liquid file and paste it into the converter, copy what comes out the other end and paste it into your theme.scss.liquid file. Save it, check your website and make sure all looks well, then publish

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Skoory
Pathfinder
110 1 36

Hi @Ninthony,

Tried some online code checkers etc before and can not say they worked well. In this case, there is a very long list of Mixin variables, and am not predicting whether all will be converted correctly. But, thanks for the suggestion, and I'll give it a go some time later today or tomorrow. Will let you know how it goes.

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
Ninthony
Shopify Partner
1635 224 613

Please do. While my stores theme doesnt use too many mixins, we'll be updating in the coming weeks too and this was my plan so I sure hope it goes alright lol. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Skoory
Pathfinder
110 1 36

Hi @Ninthony,

Not good news! Finds multiple parsing errors. Starts with not liking Line 231: 


fatal error: parse error: failed at `$color-btn-primary: {
{
settings.color_button_bg
}
}
;
` (stdin) on line 231


I deleted the whole primary button section beginning with Line 231 and tried again. It didn't like the following section on the secondary button either! And if I keep deleting sections, there will not be much of theme.scss left. What to do?

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
Antho3
Tourist
6 0 2

Hi !

Did you find a solution to get by the SCSS / CSS issue ?

 

Cheer's