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

[tetchi]

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

[HunkyBill]

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

[tetchi]

Cheers Hunkybill!

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

-tetchi

[HunkyBill]

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.

[Jamie]

Agreed! Nice nice addition :D

Great way to wrap up the week. 

[Owen_Sechrist]

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!

:-)

[HunkyBill]

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! 

[Jamie]

Kicking Ass + Taking Names with Sass & Compass

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

[Mark_Burgess1]

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,

[Milan_Mondal]

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