You can now use SCSS in Shopify's Template Editor!

Highlighted
Shopify Staff
Shopify Staff
489 0 42

Hmm, let me check with the devs on this guys. I'll get back to you asap.

Cheers,

tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Highlighted
New Member
1 0 0

Currently we rely heavily on SCSS for all of our preprocessing of our other projects, and seeing this roll out for Shopify is fantastic!

I just forked the Shopify Skeleton Theme and added a basic SCSS option to change the background color of the theme.  Everything seems to work quite well when you save the changes and view it live, but the preview window you launch in Shopify 2 beta never renders the settings.  

Should this be marked as bug?  We would like to use SCSS to process all our theme settings, but obviously it would become problematic if people can't preview the changes.

***

Regarding @imports, is this something that will eventually be supported?  Or should we plan on developing a workflow that doesn't require them for what Shopify renders out?

0 Likes
Highlighted
New Member
2 0 1

Maybe I'm just new to themeing in Shopify, but why don't you just support .css files vs having to name them .css.liquid? If this were the case, you could use Sass locally to compile to CSS and ship the locally compiled CSS with your theme.

I pulled down the skeleton theme, added the needed config and files for Sass/Compass support (attached screenshot) and was let down when my style.css file wasn't recognized by Shopify.

For designers who are designing for themselves and are more comfortable hacking SCSS/CSS in a text editor, why not be able to bypass the need for the .liquid extension and support straight vanilla CSS?

Highlighted
Shopify Expert
4264 32 434

You can ALWAYS use vanilla CSS. You do not need to use the .Liquid extension unless you plan on including Liquid in your CSS (For example to reference an asset hosted on the CDN).

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
New Member
2 0 1

Ah, maybe the desktop theme editor wasn't removing the file up at the Shopify when removed locally. I was making changes to style.css while removing style.css.liquid locally and I assumed the theme editor would remove it up there too.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
489 0 42

hey guys! Just wanted to share a cool technique for Theme Settings using SASS. Check it out here: http://www.tetchi.ca/shopify-theme-settings-assigning-colors-dynamically-using-sass/

cheers!

- tetchi

www.tetchi.ca | www.twitter.com/t3tchi
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 150

Great translation of that for liquid Tetsu!

http://shopifyplus.com ::: http://twitter.com/bacchus
Highlighted
Shopify Expert
41 0 1

SASS in Shopify is totally awesome and I'm making pretty extensive use of it in Bootstrapify 2.0.

One big question: why can't we use @import (will it eventually be possible)?

Great work Shopify!

Lucid, www.lucid.co.nz. New Zealand-based Shopify Plus Experts working with clients around the world.
0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

Hi Galen,

why can't we use @import (will it eventually be possible)?

That's not an overlook, it's just complicated for us to work into our assets building machine currently. We don't have an ETA to give out on this, unfortunately.

0 Likes
Highlighted
Shopify Expert
49 0 12

Love the Sass capability, the ability to use theme settings in mixins and functions is awesome!

Noticed its a no-go if you try to include a checkout.scss.liquid for your checkout page. 

Not a deal breaker -- just wanted to share in case anyone else stumbles on same issue.  

@radiatorstudios