slate
slate copied to clipboard
Section stylesheet 'scss' failing to compile
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 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.
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 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?
@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.
Hello @jonathankwok, Is there any chance of getting a newer version of Sass soon? Should I just forget entirely about that beautiful feature?
Think you mean @jonathanmoore 😃
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!