argument '$color' of 'adjust-hue($color, $degrees)' must be a color

[fareez-ahamed]

I get this error

[17:15:00] gulp-notify: [Laravel Elixir] Sass Compilation Failed!: argument `$co
lor` of `adjust-hue($color, $degrees)` must be a color
Backtrace:
        bower_components/flat-ui-sass/vendor/assets/stylesheets/flat-ui/_variabl
es.scss:268, in function `adjust-hue`
        bower_components/flat-ui-sass/vendor/assets/stylesheets/flat-ui/_variabl
es.scss:268
{ [Error: argument `$color` of `adjust-hue($color, $degrees)` must be a color
Backtrace:
        bower_components/flat-ui-sass/vendor/assets/stylesheets/flat-ui/_variabl
es.scss:268, in function `adjust-hue`
        bower_components/flat-ui-sass/vendor/assets/stylesheets/flat-ui/_variabl
es.scss:268]
  message: 'argument `$color` of `adjust-hue($color, $degrees)` must be a color\
nBacktrace:\n\tbower_components/flat-ui-sass/vendor/assets/stylesheets/flat-ui/_
variables.scss:268, in function `adjust-hue`\n\tbower_components/flat-ui-sass/ve
ndor/assets/stylesheets/flat-ui/_variables.scss:268',
  fileName: './bower_components/flat-ui-sass/vendor/assets/stylesheets/flat-ui/_
variables.scss',
  lineNumber: 268,
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass',
  __safety: { toString: [Function] } }
[17:15:00] Finished 'sass' after 1.01 s

Using "flat-ui-sass": "~2.1.3" through bower. Compiling using laravel-elixir which internally uses node-sass

[wingrunr21]

Did you override $brand-primary? Are there any additional Sass functions in your stack that could be overriding tint? https://github.com/wingrunr21/flat-ui-sass/blob/master/vendor/assets/stylesheets/flat-ui/_variables.scss#L268

[fareez-ahamed]

No I'm not manually overriding anything...

I only have these lines in my sass file...

@import 'flat-ui/variables';
@import 'bootstrap';
@import 'flat-ui';

And I use "bootstrap-sass-official": "~3.3.4"

[wingrunr21]

Off the top of my head I don't know what the issue is. Have you tried downgrading bootstrap? Try ~3.2.

[fareez-ahamed]

I tried updating to ~3.2... Still getting the same error :cry:

[wingrunr21]

If 3.1 doesn't work then it is either something in your sass stack or a problem with node-sass. #39 is tasked for making sure node-sass is compatible.

[fareez-ahamed]

Well I have the same issue with 3.1 as well... :(

[wingrunr21]

What version of node-sass has laravel-elixir pulled in?

[fareez-ahamed]

"devDependencies": {
    "gulp": "^3.9.0",
    "laravel-elixir": "^1.0.1"
  }

These are my dependencies... laravel-elixir 1.0.1 uses gulp-sass 1.3.3 which in turn uses node-sass 2.1.1

[fareez-ahamed]

And now I also tried with laravel-elixir 2.3.8 uses gulp-sass 2.0.1. which in turn uses node-sass 3.1.2. Same error

[fareez-ahamed]

You can clone this repo https://github.com/fareez-ahamed/laravel-elixir-flat-ui and run following commands to reproduce my error...

bower install
npm install
gulp

[fareez-ahamed]

@wingrunr21 any update on this?

[wingrunr21]

No, looking at it today

[wingrunr21]

Sorry about that. I came down with something and didn't get to take a look til now.

The issue is the tint function. I've not yet tracked down why it appears to not be returning a color, but if I redefine it (at the top of the app.scss file) to be this:

@function tint($color, $percentage){
  @return mix(#ffffff, $color, $percentage)
}

The compilation succeeds.

[fareez-ahamed]

Hi, it works for me too...! :smiley:

It would be nice to have a permanent solution. The laravel community is using laravel-elixir as its coming out of the box. So it would be nice if it works with it without needing tweaks!!!

[wingrunr21]

That would be what #39 is for. :wink:

[fareez-ahamed]

Thanks for your great work :+1: Happy to have Flat UI in SASS :smile:

[jurgenhaas]

I can confirm that defining the tint function solves this issue for me too.