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

Highlighted
Shopify Staff
Shopify Staff
489 0 32

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
2 Likes
Shopify Expert
3937 16 325

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
Shopify Staff
Shopify Staff
489 0 32

Cheers Hunkybill!

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

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Shopify Expert
3937 16 325

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
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 122

Agreed! Nice nice addition :D

Great way to wrap up the week. 

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
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!

:-)

3 Likes
Shopify Expert
3937 16 325

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
4 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 122

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
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
New Member
1 0 0

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

0 Likes