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

Highlighted
Tourist
13 0 2

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?

0 Likes
Highlighted
Shopify Expert
49 0 12

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
0 Likes
Highlighted
Tourist
13 0 2

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.

0 Likes
Highlighted
Shopify Expert
41 0 1

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.
0 Likes
Highlighted
Shopify Partner
5 0 0

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

0 Likes
Highlighted
Shopify Expert
351 0 39

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

1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 150

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

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Shopify Expert
351 0 39
done, thanks.
0 Likes
Highlighted
Tourist
4 0 2

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)

0 Likes
Highlighted
Shopify Partner
1 0 0

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'

 

0 Likes