Bootstrap: Sass color functions fail / Bootstrap 4-beta upgrade path

[rordi]

Sass color functions fail in Bootstrap version 4.0.0-beta (35f80bb)

Running "sass:dist" (sass) task

Error: argument $color of darken($color, $amount) must be a color

   Backtrace:
     scss/variables.scss:167, in function `darken`
     scss/variables.scss:167
    on line 167 of scss/variables.scss

$link-hover-color: darken($link-color, 15%) !default;
------------------------^
Warning: Use --force to continue.

Aborted due to warnings.

[WG75]

i think the reason why you're getting this error is because the way you order the imported sass files. _functions.scss should be imported before _variables.scss since $link-color variable needs the "theme-color" function to calculate it's value.

[rordi]

Good catch! I was coming from the Bootstrap 3 SASS port and did upgrade to the 4-alpha version some time ago, where having the settings first worked well.

The way to go for the 4-beta upgrade is to import the Bootstrap functions first, then variables, then the mixins and Bootstrap components/modules one needs in the project.

I also had to update my application-specific SASS code that referenced any of the $brand-... colors (replace with theme-color('...') and well as switching the $gray-... for $gray-500, etc.

Hope that this can help others in the upgrade path. I will close the ticket here.