search

Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 364 forks source link

Section stylesheet 'scss' failing to compile #934

Open eduardobbrito opened 5 years ago

eduardobbrito commented 5 years ago

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?

t-kelly commented 5 years ago

@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.

eduardobbrito commented 5 years ago

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!

t-kelly commented 5 years ago

@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?

jonathanmoore commented 5 years ago

@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.

codeams commented 5 years ago

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

jonathankwok commented 5 years ago

Think you mean @jonathanmoore 😃

anhkhoi commented 5 years ago

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!