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

tetchi
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 45

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
HunkyBill
Shopify Expert
4589 50 525

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
tetchi
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 45

Cheers Hunkybill!

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

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
HunkyBill
Shopify Expert
4589 50 525

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

Agreed! Nice nice addition :D

Great way to wrap up the week. 

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

:-)

HunkyBill
Shopify Expert
4589 50 525

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

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

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

0 Likes