d
Topic
Posts:
494
March 01, 2013
g
2
upvotes

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

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
i
Replies
Posts:
3745
March 01, 2013

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
Posts:
494
March 01, 2013

Cheers Hunkybill!

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

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
Posts:
3745
March 01, 2013

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
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5853
March 01, 2013

Agreed! Nice nice addition :D

Great way to wrap up the week. 

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
85
March 02, 2013
g
2
upvotes

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!

:-)

Posts:
3745
March 02, 2013
g
3
upvotes

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 Chief Officer of Funness shopify.com/plus
Posts:
5853
March 02, 2013
http://shopifyplus.com ::: http://twitter.com/bacchus
Mark Burgess Member
Posts:
1
March 08, 2013

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,

 

Posts:
1
March 15, 2013

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

Posts:
494
March 15, 2013

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
Posts:
1
March 18, 2013

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?

Posts:
2
April 19, 2013
g
1
upvotes

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?

Sass compass support thumb
Posts:
3745
April 19, 2013

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
Posts:
2
April 19, 2013

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.

Posts:
494
June 02, 2013
g
1
upvotes

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
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5853
June 02, 2013
g
1
upvotes

Great translation of that for liquid Tetsu!

http://shopifyplus.com ::: http://twitter.com/bacchus
Galen King Shopify Expert www.lucid.co.nz
Posts:
43
June 18, 2013

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.
Posts:
5840
August 02, 2013

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.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Radiator Shopify Partner radiatorstudios.com
Posts:
46
Last edited August 11, 2013
g
1
upvotes

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
Posts:
13
September 05, 2013

So what is the best way to approach using this, as I have a mixins.scss, a grid/framework.scss and then a layout.scss that I'm developing with, is it best to just put this into one scss file rather than having them all separated since import is currently unavailable? Or is there a way round it to have them in respective files and still pass mixins/variables through?

Radiator Shopify Partner radiatorstudios.com
Posts:
46
September 05, 2013

Hey Joe. We work very similarly, having some core mixins and functions for layout and structure, and then some Sass for styles.

The primary benefit of keeping Sass in the Shopify templates themselves is to be able to use values from theme settings inside Sass mixins and functions. For example, if you set a theme setting for a link color, you can use something like darken( {{ settings.link_color }}, 20% ) to generate a rollover color. But you couldnt do that with precompiled scss, as the theme setting wouldnt be available at the time; you would have to set the value as a Scss variable before compilation.

As a result, we generally load two style sheets. One precompiled layout.css that includes all the logic bits like grid, layout and fonts as well as globals like resets and forms. And then add a styles.scss.liquid that contains visual styles that interact with theme settings. So far so good.

Of course, we've toyed with the idea of making one master Scss file but that seems rather arduous, and in many ways negates the sexiness of using mixin libraries and OOCSS.

Would love to see more discussion on this topic as this is rather new for everyone working with Shopify, and always interested in hearing about how other front-end workflows in Shopify, especially with teams where more than one person is developing at the same time.

@radiatorstudios
Posts:
13
Last edited September 05, 2013

I thought that would be the case, I started this evening setting up CSS assets in the same structure as you mentioned. I've also been trying the same thing with LESS and have yet to find any problems, the LESS @import doesn't work either, most likely for the same reasons, but if you use the same structure of a foundation.css and then a layout.less which has Shopify variables, it seems to be fine and run as expected.

Galen King Shopify Expert www.lucid.co.nz
Posts:
43
September 05, 2013

It would be great if mixins and imports did work as it would mean dynamic variables like colours could propagate throughout the rest of the CSS (and be used in SASS calculations). This would avoid the need to carefully override everything that needs overriding with theme settings.

I look forward to seeing where Shopify take this.

Lucid, www.lucid.co.nz. New Zealand-based Shopify Plus Experts working with clients around the world.
Posts:
5
September 16, 2013

Amazing, but I'll love to see support for "@import"!

jholl Shopify Expert github.com/midoil
Posts:
354
September 30, 2013
g
1
upvotes

This has been a great development; will you offer support for scss on checkout stylesheets?

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5853
September 30, 2013

@jholl Can you please send this to feature-requests at shopify dot com?

http://shopifyplus.com ::: http://twitter.com/bacchus
jholl Shopify Expert github.com/midoil
Posts:
354
September 30, 2013
done, thanks.
Posts:
4
October 14, 2013

This is awesome, thanks for all the work to get this in.

One question though, when the SCSS is compiled down into CSS, is it minified? If not, would it be possible to add this in?

I don't think it's typically one of the standard SASS / SCSS compilation options, but there are some very easy plugins that will handle it.

It'd be nice to have, just to cut down on file download size with each page load and speed up sites a little bit (yes, I know all things considered minifying CSS won't make a huge impact on the page speed, unless you've written War and Peace in comments, but every little helps)

Posts:
1
October 17, 2013

We are developing using raw SASS for CSS, JADE for HTML, and COFFEE - ICEDCOFFE for Javascript.

We put together a Grunt.js file to put all the files into a mirrored deploy theme. So, the deploy theme is compiled from the dev theme which is all SASS/JADE/COFFEE

We are finishing up our first site with Shopify and have found it to be very easy to integrate into our pythonic Django / Flask workflow.

 

Our gruntfile looks like so:

module.exports = (grunt) ->
  "use strict"
  grunt.initConfig
    pkg: grunt.file.readJSON("package.json")
    jade:
      html:
        files: [
          "deploy/layout/": ["dev/layout/*.jade"]
          "deploy/snippets/": ["dev/snippets/*.jade"]
          "deploy/templates/": ["dev/templates/*.jade"]
          "deploy/templates/customers": ["dev/templates/customers/*.jade"]
        ]
        options:
          client: false
          runtime: false
          pretty: true
          extension: ".liquid"
    compass:
      dev:
        options:
          config: 'config.rb'
    coffee:
      compileJoined:
        options:
          join: true
        files: [
          'deploy/assets/app.js': ['dev/assets/coffee/*.iced']
        ]
    watch:
      jade:
        files: ['dev/**/*.jade']
        tasks: ['jade:html']
      compass:
        files: ['dev/**/*.sass']
        tasks: ['compass:dev']
      coffee:
        files: ['dev/assets/coffee/*.iced']
        tasks: ['coffee:compileJoined']
      livereload:
        files: ['dev/**/*.jade','dev/assets/sass/*.sass','dev/assets/coffee/*.iced']
        options: 
          livereload: true

  grunt.loadNpmTasks "grunt-jade"
  grunt.loadNpmTasks "grunt-contrib-watch"
  grunt.loadNpmTasks "grunt-contrib-compass"
  grunt.loadNpmTasks "grunt-iced-coffee"

  grunt.registerTask 'default','jade','watch','compass','coffee'

 

Posts:
5840
October 17, 2013
g
1
upvotes

Hi Tom,

Stylesheets are sent gzipped to the browser.

Browsers that are able to unzip make HTTP requests with the following in their header:

Accept-Encoding: gzip, deflate

Then Shopify's CDN sends the stylesheet gzipped with that information in the header:

Content-Encoding: gzip

Then browser unzips...

Gzipping generally reduces the size of the stylesheet by 70%.

If you prefer the source to be minified, you can minify your stylesheet yourself. I have a Minifire app for this: I drop a file on top of the app and it generates a minified version of the code that's in it. Works with JavaScript or CSS.

I only minify JavaScript plugins though, never theme-specific JavaScript or CSS. Why? Because by doing so I would prevent the owner of the shop, and other design gurus at Shopify, who will later work on the theme, to make easy edits in the code.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Harold Shopify Merchant jolioriginals.com
Posts:
31
October 17, 2013

Any chance LESS support will be added too? Would help a lot :) Now I have a quite annoying deploy setup, would be awesome if I could skip the compiling on my side :)

Posts:
51
November 07, 2013

Testing this out, I basically confirmed that Shopify has no idea what a Compass is. Can we enable Compass support or are we stuck with SASS only?

Also, is there a convenient way to turn code compression on and off in Shopify?

I have a feeling lots of designers are going to get to learn the difference between a file called variables.scss and _variables.scss :)

Thanks for the foresight you have shown in allowing us to use SASS. I get really frustrated with pure CSS, having used SASS exclusively for about six months now.

Posts:
51
November 07, 2013

LESS is inferior in every way. It's less elegant, requires a JavaScript parser, and doesn't support as many types of functions. Once you add Compass and/or Bourbon to SASS, it's not even close.

The only major advantage of LESS is that you don't need to install a Ruby sever in your development environment in order to run it. That means it is way, way, way more friendly to someone who installed MAMP/WAMP and wants to plug & play their localhost setup.

Harold Shopify Merchant jolioriginals.com
Posts:
31
November 08, 2013

I spend a lot of time in both and for me LESS is the better of the two. I've used it for the past 3-4 years and It fits my workflow better. I have my set of own mixins, for me that's a lot better than what compass does. We could start a whole discussion why you like what better, there is not much difference in both, for you SASS works better, for me LESS works better and faster.

I've written my own gem that watches the less folders of active projects and compiles them on the go. That works fine, but for all Shopify projects it would be awesome if I could just upload LESS files, simply because than it would be easier to use liquid tags in the LESS files.

 

 

Posts:
659
November 19, 2013

I wonder if there is any chance that Shopify could do the following, so that we would be able to use the FireSass Firebug Add-on for Firefox?

[..] enable Sass's :debug_info option. If you're using Sass with a Ruby web framework, you probably want to set Sass::Plugin.options[:debug_info] = true. Add this to config/environment.rb in Rails, or config.ru (or wherever else configuration is specified) in other Ruby frameworks.

I'm a million different people
Posts:
6
December 04, 2013

To all the people having issues with @import, mixins, etc and wanting theme settings to propagate through-out their css. I was having a issue with this. I use zurb foundation, which contains many, many files/imports/mixins/functions and obviously would be a huge pain to get working with shopify. So I started using gruntjs with a combo of node-sass which uses the super fast libsass C sass compiler.

So I work in sass it all gets compiled into a single minimized file, which I automatically upload using a grunt task and shopify_theme CLI.

One catch I ran into was allowing {{ settings.some_setting }} to compile by libsass without having errors b/c obviously {{ settings.some_setting }} isn't valid CSS. So there's a little trick called unquote("") you can use:

$theme-setting-variable-that-propagates-throughout-my-css:unquote("{{ settings.some_setting }}");
Posts:
51
December 05, 2013

The mixins are pretty straightforward, if you just wrap all of the Foundation settings up into a single SCSS file instead of importing them. I haven't had any problems with @import so long as I wasn't importing an actual fragment file like _settings.scss

Posts:
7
December 13, 2013

I need some clarification... Since we can't use @import can we use something like Bourbon http://bourbon.io/ ? Also, can we still use mixins? Thanks!

Radiator Shopify Partner radiatorstudios.com
Posts:
46
December 13, 2013
g
1
upvotes

Hi Kate,

As of this writing @import is not supported in files that live in your asset folder on Shopify ( where Shopify is compiling the Sass for you ). This means that you cannot have partials in your asset folder ( files that start with an _underscore ) which are imported by another file. To use bourbon directly on Shopify, you need to copy and paste all partials into one mega-file, in the right order to go this route.

You can still use Sass and any additional libraries you want ( bourbon, compass, gumby,etc ) in development if you compile the files yourself ( with Codekit, Grunt, etc ) and upload the resulting compiled css to your theme. 

Mixins are supported directly on Shopify, just be sure to add them to the top of your .scss file if you are having Shopify compile the Sass for you.

Hope that helps!

@radiatorstudios
Posts:
6
December 13, 2013

@kate, @radiator is on the right path by using Gruntjs or similar locally to do all the work for you. Then you get the best of sass with all it provides for developing locally and you can just use plain css in shopify. What I do is use grunt-watch to watch my files, when a file changes it concats all my sass files together into one compress css file, which is then automatically uploaded as e.g. app.css.liquid. Then all I have to do is load that 1 file in my theme.liquid.

Checkout http://gruntjs.com with grunt-concact, grunt-shell, grunt-watch ... there are many other grunt plugins as well.

Also when I dev locally for shopify I have a index.html file in my project that's for testing that loads the single css file that is created from all my sass files. Then I don't have to refresh shopify every time I make a few changes. Grunt takes care of creating that dev css for me as well ;-)

Posts:
7
Last edited December 13, 2013

@darren @radiator thanks for your replies!

Anyone out there have the Bootstrapify theme working? I'm not really clear on how to get it up and running. I'm not really clear on the workflow. I'm using the Shopify theme app, but do I still have to compile the SASS myself? Any help I could get would be appreciated! Thanks!

Posts:
6
December 14, 2013

First I would just build your own, starting from one of the templates on twitter bootstraps docs page: http://getbootstrap.com and use Grunt. If your not skilled enough to do this then read below.

If your starting from scratch: https://github.com/luciddesign/bootstrapify/tree/master/theme is all the files of Bootstrapify

$ git clone https://github.com/luciddesign/bootstrapify

Then replace your 'my-awesome-theme' with the 'theme' directory of the Bootstrapify project. It contains the 'assets', 'config', 'layout', 'snippets' and 'templates' Just backup your current theme first if you've done any changes to it ;-)

After that you can just upload your new Bootstrapify project with the Shopify theme app by clicking 'Force Deploy'

Remember backup!

Posts:
7
December 14, 2013

Thanks Darren. I've got all that set up and theme installed, but I'm not clear on how the CSS is compiling since there are files outside of the theme folder. Do I need to be using Codekit? Also, do I need to do a force deploy every time I want to see my changes? Thanks so much!

Posts:
6
Last edited December 14, 2013

@kate Bootstrapify uses sass-bootstrap and bower to keep sass-bootstrap files updated, which will put those files outside the theme directory in the bower_componets directory. The workflow instructions here: https://github.com/luciddesign/bootstrapify#workflow explain what your suppose to do, which use a sass compiler like lib-sass and a tool like gruntjs to automatically do the hard part for you and watch and compile and put the files (which are outside the theme directory) into your theme directory. That said, you *could* just ditch everything outside the theme directory and hack away on the styles.scss file for your project. One cavet with that option is keeping things updated. It's way easier to use bower and run one command, then run one grunt command to compile all the new updated bootstrap files.

With the Shopify Theme app, you can connect it to your store and have it watch for changes and automatically upload when a file is changed, you don't have to do a force deploy. The force was just to upload the entire Bootstrapify theme all at once initially.

Hope that helps. And again learn gruntjs! Or just use Codekit. It will save you so much time and headache in the future :-)

CharlesTop Shopify Partner
Posts:
59
December 19, 2013

Greet to see the addition, Any plans to support LESS?

Posts:
5840
December 19, 2013

There are no plans to support LESS at the moment, no.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
12
January 05, 2014

This is awesome, but it is a shame I am on Windows!

Posts:
5840
January 05, 2014
g
1
upvotes

Hi James, Shopify compiles the Sassy CSS online, you don't need Windows to use this if use Shopify's Template Editor, which is online.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
12
January 06, 2014

I thought this was the Mac app, my mistake!

 

Unfortunately, as you don't support imports it is easier for me to simply compile on my machine. Good to know you're supporting stuff like this though!

Posts:
2
January 16, 2014

It's not appearing to be working for me either, i'm only using nesting - not any thing fancy.

Any ideas as to what I've done wrong? http://the-prophetic-code-2.myshopify.com/ @tetchi /CC @Milan Mondal @Mark Burgess

Posts:
659
January 16, 2014

Cameron, your store is password-protected -- you will need to let us know what that pw is

I'm a million different people
Posts:
2
January 17, 2014

I got it - was missing the ".scss"

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

and the file is called 

layout.scss.liquid

 that's were I went wrong

Rob Shopify Partner
Posts:
18
January 17, 2014

This isn't working for me. Just tried it again on another theme and did work until I started adding variables for color settings.

KJ_Prince Shopify Partner kj-prince.com
Posts:
46
January 23, 2014

I'm wondering how people are using sass / compass or grunt along with DVCS (git I assume) in their workflow.  

 

I still cannot find a comprehensive solution as the shopify app for mac has issues with .git directories even when I put the git directory in the root and shopify theme files in a sub-directory. 

Posts:
6
January 23, 2014
g
1
upvotes

@KJ_Prince use the https://github.com/Shopify/shopify_theme gem with grunt ... basically give you cli so you can run stuff in grunt like upload files when you save etc

KJ_Prince Shopify Partner kj-prince.com
Posts:
46
January 23, 2014

I'll give it a shot. I can't seem to make sass work though with the example at the top...Why is the Sass filename ''settings.scss.liquid"  while the file called in the theme is "style.scss.css"

Posts:
6
January 23, 2014

@KJ_Prince if your using grunt you don't need to ref any scss/sass files at all in theme.liquid. You make grunt package all your project sass/scss files into one single css file then include that in your theme.liquid. Less headache and faster loads. ProTip: use libsass to do the work, it's fast!

Posts:
3
Last edited February 04, 2014

Hi! I'm new to the Shopify system and I'd like to try SCSS for a client's site. Did I miss something because I can't figured out where you download the scss.liquid file. Excited for this development! Thanks!

 — Cathe

Posts:
1
February 07, 2014

Hey everyone.  By leveraging Shopify-Foundation-Theme , Compass and Bower, I was able to keep a a really good workflow to manage the foundation core, use variables that propagate and used throughout the SCSS tree (by using partials and @import ). We also used a custom ruby module to create the css.liquid and remove the vanillas css file.

Check it out here 
https://github.com/sugarskull/shopify-impact-theme

We still need to break down a good chunk of base.scss to utilize settings configs, extend the settings.html to use the new settings and create a json default. If anyone wants to collab on this you can submit pull requests there. 

 

Posts:
659
February 21, 2014

Anybody have an idea what version of Sass Shopify is using? I am having some issues and wondering whether >=3.2.5

I'm a million different people
Luis Martins Shopify Partner
Posts:
7
Last edited March 29, 2014

Just starting to work with Shopify theme editor and the first thing I've looked for was options to use Sass.

Im glad it is supported, but a bit disappointed by it's limited support. Personally I don't need all the bells and whistles from Sass, actually I use libsass locally for compilation, but the possibility to have partials is quite essential to my current workflow.

Currently im considering have my regular Sass structure outside of the assets folder, and just compile into a regular css file which will then get exported to the platform. Have to try if this works, would love to hear if anyone have tried this.

Edit: Just noticed Rodrigo's post above, which im now going through. 

Posts:
3
April 01, 2014

May I ask, how did you get livereload to work for you? I've set it up in the same kind of way, but livereload doesn't seem to be working for me?

 

Any help will be appreciated!

Tyler Tringas Shopify Partner
Posts:
35
Last edited April 04, 2014

Getting a weird bug. I added the timber.scss.liquid from the Timber theme. It looks fine in the Theme Editor but URL produced by {{ 'timber.scss.css' | asset_url | stylesheet_tag }} points here: http://cdn.shopify.com/s/files/1/0015/5142/t/27/assets/timber.scss.css?32575

Which just throws this error and doesn't load the file:

"\xE2" from ASCII-8BIT to UTF-8

NOTE: I've searched the file and removed any ` characters. Still same problem.

UPDATE: The update to v.1.1.2 resolved this issue:

https://github.com/Shopify/Timber/commit/3f06deb9a2bee372da54d7b6021187cd823c3476

Just bump to the latest version here:

https://github.com/Shopify/Timber/blob/master/assets/timber.scss.liquid

Posts:
659
April 04, 2014

Works fine for me, loads no problem.

I'm a million different people
Posts:
659
April 04, 2014

... but now I am seeing the same thing on another site!

I'm a million different people
Posts:
659
April 05, 2014

Fuckin &ndash; (so good in HTML, so bad in SCSS apparently:)

I'm a million different people
Dillon Shopify Partner www.hidillon.com
Posts:
6
Last edited April 25, 2014

Worth noting it is a requirement to remove any "@" symbols from comments, particularly common in the attribution block at the top of a css file..

Will Not Work: 

/* created by xxx @ something media house */

Will Work

/* created by xxx at something media house */

Also, missing inputs from the Theme Settings will cause the SCSS compilation to break.  If there is a theme setting for background color and this is left blank, the lack of output to the scss file will not allow it to compile resulting in a 422 (Uknown Error) response header

Posts:
2
May 07, 2014

Hello, I'm new to Shopify and I'm trying to build my 1st theme. I've started creating a store, following Tetchi's tutorial. Then I've uploaded Timber-1.1.0.zip, duplicated it and renamed it as "flx".

But when I go to my store (http://quasar-web-italia.myshopify.com) I get an unstyled home page. It seems as if the timber.scss stylesheet is not been found/recognized. And any (minor) changes I've made in that stylesheet have been reflected in the store.

The stylesheet file timber.scss.liquid is referenced from theme.liquid with the following code:

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

My browser shows this corresponding line of code:

<link href="//cdn.shopify.com/s/files/1/0403/0301/t/9/assets/timber.scss.css?646" rel="stylesheet" type="text/css" media="all" />
 

However, the store home page is properly rendered when I click on the Live Preview button on the Template Editor

http://quasar-web-italia.myshopify.com/?design_theme_id=8129017

Any suggestions??

Best Regards

Dante

Posts:
44
May 09, 2014

Hey Dante,

There were a few unreadable characters in the early version of Timber's stylesheet that cause a 500 error on it. The issue only happened periodically so it was difficult to reproduce. They have since been fixed, so if you grab a new zip of Timber you should no longer see that issue.

Let me know if that doesn't' solve things and I can help you out some more.

Posts:
5840
Last edited May 11, 2014
g
1
upvotes

Also, missing inputs from the Theme Settings will cause the SCSS compilation to break.  

One way to avoid such errors is to provide defaults in the stylesheet using the default filter like so:

$color-of-text: {{ settings.color_of_text | default: '#555555' }};

That said, if your presets are kosher, that extra precaution is not needed: when you add a theme setting to your theme, don't forget to add a line for it in each preset of your theme, inside settings_data.json.

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Dillon Shopify Partner www.hidillon.com
Posts:
6
May 11, 2014

Thanks for that tip on setting defaults Caroline!  One area I know a lot of themes would struggle without defaults would be background colors.  If no color is desired, often the input in theme settings is left blank, without a default this will definitely break the compilation.

$background-color:  {{ settings.background_color | default: 'transparent' }};

The above may save some folks a lot of headache. 

Posts:
2
May 11, 2014

Hello Carson, Caroline, Dillon and all forum members

Ashley Franklin from Support solved the problem and explained me what happened. The same issue you have mentioned, Carson. Man, Timber is great, thank you!

Caroline, I will take account of your advice.

Thank you all !!

Dante

Gray Shopify Expert shopify.pixelunion.co
Posts:
159
May 26, 2014
g
1
upvotes

We're changing our basic theme skeleton to take advantage of this feature. It'll help reduce the number of theme settings that shop owners need to fill in by using things like lighten() or darken() for hover states – we're looking forward to it!

The only problem, and for us it's a pretty big one, is the lack of Sass compiling on the checkout.css.liquid file. We're not entirely sure what the hold up is on that front (since it was reported as far back as 9 months ago in this very post) but we're hopeful to see it soon.

Would love to get an update on that front, even if it's bad news! It'll definitely help when we start putting the final pieces into place.

Developer for Pixel Union
sanchez Shopify Partner
Posts:
63
June 16, 2014

I LOVE THIS!

I've had no issues using this, it makes life a lot easier, here's my question...

I'm thinking about only using SCSS for my themes, it'll make life a lot easier, but on the themes I sell, I'm worried about having too many partial files.

 

In the case of the Bootstrap framework, there are 40 partial files. Do you envision any effect on performance? Other than being more complex, are there any downsides that would make people not want to buy the theme I create, or are there any rules against using all SCSS?

 

"The painters house always needs painted"
Posts:
44
June 16, 2014
g
1
upvotes

Hey Sanchez,

While Shopify does support SCSS, the build process to generate the CSS is done on the server. Because of this partials are not supported natively, meaning your stylesheet will be a single SCSS file.

I would suggest using a Grunt or Gulp task to concatenate the files locally and generate one SCSS file. That way you can develop your stylesheet anyway you'd like with as many partials as fit your needs, but the end result is still the single file. This method would not have any effect on performance.

sanchez Shopify Partner
Posts:
63
June 16, 2014

Thanks Carson!

I went ahead and manually merged everything, minus the stuff Shopify can't use.

For anyone who might need it, the file is available here: https://github.com/andysanchez/Shopify-Bootstrap-SASS

I've tested it on the theme I'm developing and found that it makes getting settings from the backend much easier. 

"The painters house always needs painted"
sharls Member
Posts:
10
Last edited September 03, 2014
g
1
upvotes

Ok, This is really dumb, but nevertheless i still can't make it work.

Added an additional stylesheet for scss with this code

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

and asset name is flex.scss.liquid

I get this output 

<link href="//cdn.shopify.com/s/files/1/0641/2271/t/1/assets/flex.scss.css?154" rel="stylesheet" type="text/css" media="all">

Output looks fine, but i don't get any styles

Posts:
659
September 03, 2014

Your asset should be named flex.scss.liquid

I'm a million different people
sharls Member
Posts:
10
September 03, 2014

My bad, It's actually named .liquid

Edited the original post

Posts:
659
September 03, 2014

Can you expand the rendered CSS file in your browser's dev tools? You may see an error output there..

I'm a million different people
Posts:
2
November 02, 2014

Works fine for me, loads no problem.Nice nice addition :D

 

Posts:
1
November 20, 2014

How often will this version of Sass be updated? It appears that it's not using a version above 3.3, as nested BEM syntax doesn't work.

This is the syntax I'm referring to:

.note {

  &__content {
    background: white;

    &--featured {
      background: #eee;
    }

  }

}

Please update ASAP!

Posts:
659
February 11, 2015
g
2
upvotes

I am wondering what version of Sass is currently being used? I'm trying to use the Map Data Type that is available in 3.3 to create colour swatches that clients could potentially maintain themselves, but don't seem to get anything but fail for something like this: http://codepen.io/rickydazla/pen/pvpGEq

I'm a million different people
Posts:
44
February 12, 2015

Our CDN currently uses Sass 3.2.6. Themes should support that version.

Because of breaking changes in the Sass project for newer versions, we don't expect to update the version of Sass anytime soon.

Posts:
2
April 23, 2015

I'm in final stages of setting up my shopify store.  I'm using Order Printer App to create a Production form.   The only problem is that the form has a min-height setting of 1000px and basically makes the form unusable with too much space. I'm new to coding and from what I understand I would update the style sheet with the table-tabular setting removing the min-height.  Can someone help me with a html override to the Order Printer style sheet that I don't have access to modify?  Thanks Barry

Posts:
4
June 27, 2015

Hi Carson,

we are following the exact same workflow you proposed below but we are having a recurring issue: the compilement of the SCSS to CSS on the shopify server side is very slow and changes takes a while to show up on the store. Gulp is concatenating the files locally with no issues.

Have you ever heard of this perfomance issue and have any idea how to solve it?

Thanks

 

(While Shopify does support SCSS, the build process to generate the CSS is done on the server. Because of this partials are not supported natively, meaning your stylesheet will be a single SCSS file.

I would suggest using a Grunt or Gulp task to concatenate the files locally and generate one SCSS file. That way you can develop your stylesheet anyway you'd like with as many partials as fit your needs, but the end result is still the single file. This method would not have any effect on performance.)

Posts:
44
June 29, 2015

Hi Guido,

I haven't heard of that issue before. As soon as a new file is uploaded to your shop, a new URL is generated by the CDN (something with a bunch of numbers). While the file name remains the same, it's essentially a brand new file.

When you say it's slow and takes a while to show up on the store, can you give a timeframe of what you mean? Does the same thing happen if you upload a file not through the Gulp task?

Posts:
4
June 29, 2015

Hi Carson, 

the new cache is generated but still doesn't update. It takes between 10min and 30 or more. Sometime 1 hour.

Doesnt happen if just uploading a file or using theme watch. 

We temporarly solved having gulp compiling the CSS locally.

Would be curious to know more tho.

Thanks

 

 

Jason Shopify Expert freakdesign.com.au
Posts:
7363
June 30, 2015

the new cache is generated but still doesn't update. It takes between 10min and 30 or more. Sometime 1 hour.

I've never seen it take that long. A few seconds at most. Are you trying to access the asset without the appended numeric querystring? Without that querystring you'll likely see a stale asset.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
51
Last edited June 30, 2015

the new cache is generated but still doesn't update. It takes between 10min and 30 or more. Sometime 1 hour.

 

Question: Are you running DNS through Cloudflare?

Posts:
8
August 25, 2015

Anyone running into an issue of your *.scss.liquid stylesheets being truncated when compiled on Shopify?

Example: https://cdn.shopify.com/s/files/1/0970/8252/t/2/assets/main.scss.css

That is the latest Bootstrap, Font Awesome, and Slick Carousel compiled locally then concatenated (via Gulp). With a .scss.liquid extension on Shopify the last ~50% of the file is missing, truncated randomly with no error message and the server still returns a HTTP 200/OK.  There is a screenshot attached of what I'm getting in Google Chrome. 

Since this file doesn't actually contain any SCSS (yet) I tried renaming it to .css and it works as expected. If I edit the .scss.liquid file via the Shopify theme editor in the admin the entire file is present. 

Is there a known line length limitation with the Shopify SASS compiler? By default my CSS is already minified by Gulp, but the non-minified version didn't seem to make any difference. 

Thanks!

 

 

Screen shot 2015 08 25 at 3.30.11 am thumb
Posts:
2
November 29, 2015

Thanks for that tip on setting defaults Caroline! 

http://whattogetmygirlfriendforchristmas.com/category/best-christmas-gifts/
jasbra Shopify Partner
Posts:
1
December 09, 2015
g
1
upvotes

Any update on the availablility of sass maps?

Posts:
44
Last edited December 09, 2015

Anyone running into an issue of your *.scss.liquid stylesheets being truncated when compiled on Shopify?

Leantu, are you using Theme Kit to upload your files to Shopify? I ask because there was a bug in Theme Kit 0.3.0 or 0.3.1 that caused the exact same issue. It's been fixed in 0.3.2 which is a pre-release available now here.

Esign Shopify Partner www.esign.eu
Posts:
1
Last edited February 17, 2016

I would like to use sass maps as well. For example in a custom theme where each collection has its own color & background image. With more then 6 collections this would be a nice feature. 

The only solution I can think of is to compile sass locally. ​Any thoughts?

Posts:
3
March 06, 2016

Good article, many thanks :)

http://instamate-review.com :::: http://webinarjeo-review.net/ :::: http://nimbus-review.net
Posts:
7
10 months ago

Hello,

I literally spent about a year of my life customizing my checkout page on Shopify so that it transitioned seamlessly with my website. I worked on the design and my coder customized the CSS on Shopify. Overnight, I can no longer use my CSS code. What Shopify did was 100% wrong! I called them and I have emails proving that Shopify said I could customize their CSS code. They cost me thousands of dollars and hundreds of hours worth of my time. I had my Checkout Pages perfect! No longer. Can you help? Here is a screen shot of what my Shopfiy checkout page used to look like. Can I use the SCSS template editor to achieve the same results? 

Regards,

David  - bigapplephototours.com

 

 

Checkout2.0 thumb
Posts:
1
10 months ago

Thank for this Good article

Posts:
1
7 months ago

Por supuesto, este tipo de personalizaciones no son para los débiles de corazón - se requiere tener conocimientos de HTML y CSS, así como lenguaje de plantillas de Shopify. Hace poco tome ventaja de esta nueva función en mi sitio web http://www.gandhi.com.mx/ con mejoras en transiciones y personalizacion 

Posts:
1
18 days ago

Any plans to update the SCSS version now?