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

Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

Hey guys, good news!

Thanks to the genius mind of Chris Saunders, you can now use SCSS in Shopify's Template Editor! 

To use SCSS, simply upload a ".scss.liquid" file to your Assets: http://take.ms/1shoj, and load it up in your theme.liquid file like this:

 

  {{ 'style.scss.css' | asset_url | stylesheet_tag }}

I have attached a quick and dirty demo theme that uses SCSS for those who want to take it for a quick spin.

Cheers!

- tetchi

 

www.tetchi.ca | www.twitter.com/t3tchi
Highlighted
Shopify Expert
4270 32 435

That is a very nice addition to theme editing inside Shopify itself. Lightyears ahead of clunky old CSS editing.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

Cheers Hunkybill!

One thing that I should mention is that @import (ie partials) is not supported. 

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
Highlighted
Shopify Expert
4270 32 435

Still, all things considered, for those like me that gave up that nasty affliction called CSS and replaced it with sweet SASS, even using a monolithic SCSS file is a worthy improvement.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 150

Agreed! Nice nice addition :D

Great way to wrap up the week. 

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Excursionist
85 0 5

Ugggh!!!  Goog lord, $ signs and @ symbols in css.... I haven't even learned JS and PhP yet!

Just felt the need to inject dissent.... carry on!

:-)

Shopify Expert
4270 32 435

Well Owen, trust me on this one, if you write crap CSS all by yourself, SCSS, LESS, SASS none of that will help you out. Garbage In, Garbage Out. On the other hand, if you know your CSS chops, letting a pre-processor turn your $ and @ references into CSS for you is the coolest tool ever for CSS.

Learning CSS is unfortunately a necessity if you want to work on how your HTML looks in various browsers, and due to it's pedigree based in math and box shapes, it's not obvious how it all works. In fact, it's so flakey, it comes with stick-on "I give up this crap" extra words like "important!". Seriously lame...

You have zero obligation to enjoy the SCSS party train but enjoy the ride if you can! 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 150

Kicking Ass + Taking Names with Sass & Compass

Introduction to SASS -> http://screencasts.org/episodes/introduction-to-sass

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Shopify Partner
1 0 0

I'm trying this, but the scss file is just being included as-is, without being compiled into css.

I have "style.scss.liquid" in my assets folder and "{{ 'style.scss.css' | asset_url | stylesheet_tag }}" in my theme file. When I view the page I get a link like this:

 

<link href="http://cdn.shopify.com/s/files/[...]/assets/style.scss.css?43" rel="stylesheet" type="text/css"  media="all"  />

style.scss.css in that link is no different than style.scss.liquid. How do I get the scss to compile?

 

Thanks,

 

0 Likes
Highlighted
New Member
1 0 0

@Mark Burgess: You are right even I am felling same problem. Can anyone figure it out please.

0 Likes