slate icon indicating copy to clipboard operation
slate copied to clipboard

Section stylesheet 'scss' failing to compile

Open eduardobbrito opened this issue 6 years ago • 7 comments

Hi, it seems that the section {% stylesheet 'scss' %} is failing to compile nested elements:

{% stylesheet 'scss' %}
  .footer {
    color: red;
    &__main {
      border: 1px solid red;
    }
  }
{% endstylesheet %}

I couldn't get any error log. Perhaps it's the same issue as stated in #370, if so, is there a way to compile these locally?

eduardobbrito avatar Jan 03 '19 12:01 eduardobbrito

@eduardobbrito Liquid is not compiled by Slate, it is done on Shopify servers. The problem you are having is not with Slate.

Why do these styles need to live in Liquid? If you can include them in a .scss file, Slate can compile them locally.

t-kelly avatar Jan 03 '19 14:01 t-kelly

Hi @t-kelly yes, thanks for your reply, it's what I'm currently doing. I intended to use the stylesheet tag so that critical portions of the page could be styled faster.

I guess there's still this limitation on what Shopify's Sass compiler can do, so I'll just use regular css on these few sections!

eduardobbrito avatar Jan 03 '19 15:01 eduardobbrito

@eduardobbrito Makes sense! Would love to improve this workflow for themes. Related https://github.com/Shopify/slate/issues/267

@NathanPJF I always seem to forget the limitations of Shopify's SCSS compilation. Does it include nesting?

t-kelly avatar Jan 03 '19 16:01 t-kelly

@eduardobbrito Even on Shopify's servers, the SCSS you wrote will not compile. Shopify uses a forked version of Sass v3.2 that removes the @import directives (security reasons).

The BEM style SCSS you're writing is something that was introduced in Sass v3.3, and unfortunately, Shopify's servers aren't going to be able to flatten that out.

In the end both #267 (loading critical CSS) and Shopify/theme-scripts/issues/61 (dynamically loading section resources) should help solve a lot of the issues.

jonathanmoore avatar Jan 03 '19 19:01 jonathanmoore

Hello @jonathankwok, Is there any chance of getting a newer version of Sass soon? Should I just forget entirely about that beautiful feature?

codeams avatar Mar 07 '19 07:03 codeams

Think you mean @jonathanmoore 😃

jonathankwok avatar Mar 07 '19 13:03 jonathankwok

Need to upgrade SASS to 3.3 or higher to support BEM style. http://alwaystwisted.com/articles/2014-02-27-even-easier-bem-ing-with-sass-33

I appreciate for this upgrade!

anhkhoi avatar Aug 14 '19 07:08 anhkhoi