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

Unable to use Sass functions with liquid variables #937

Closed james-prado closed 5 years ago

james-prado commented 5 years ago

Problem

Using css variables with sass functions doesn't work, even with CSS var loader.

theme.scss

body {
  background-color: darken($color-body, 10%);
}

Error:

background-color: darken($color-body, 10%);
                 ^
      Argument `$color` of `darken($color, $amount)` must be a color

I understand normally this would be a limitation of css custom properties, but since slate uses CSS var loader, this should be possible right?

Replication steps

From a fresh slate repo, add the following to theme.scss

body {
  background-color: darken($color-body, 10%);
}
jonathanmoore commented 5 years ago

This is related to an open issue with Slate and how liquid variables and SCSS work together. There is a lot of good information on how it can work together now, and ultimately there will be improvements to Slate in general down the road. #541 CSS Custom Variable - Liquid variable or control flow tags

Another closed issue that discusses SCSS functions specifically: #503 CSS Custom Variable - SCSS operations and functions

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.