SCSS: Functions may not be defined within control directives

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: SCSS: Functions may not be defined within control directives or other mixins

Roman pro premium priority asked 7 years ago

Hello,

I got this message after compiling the file mdb.scss:

Error: Functions may not be defined within control directives or other mixins

The error shows me this piece of code:

101: // New mixins
 102: @mixin make-button($name, $color) {
 103: .btn-#{$name} {
 104: @function set-notification-text-color($color) {
 105: @if (lightness($color) > 80) {
 106: @return $black; // Lighter backgorund, return dark color
 107: } @else {
 108: @return $white; // Darker background, return light color

I don't understand SCSS very well but I think there is i problem with @function inside @mixin. How can I compile the whole MDB?

Marta Szymanska staff pro premium answered 6 years ago

Dear Roman and Peter, you're right, the function still exists within mixin "make badge". We're sorry for this bug but I can only say we will fix this in another version of MDB and if you need this now, you can remove this function from the mixin by yourself. We're sorry again. Best, Marta

Josip Tomašev pro premium priority answered 7 years ago

Hi Marta   I tested more solutions (reinstalled sass and ruby on my linux, reinstalled Koala, edited mixins), and only one whitch worked for me was last one:   sass/mdb/free/data/_mixins.scss from line 101 to line 111: 
// New mixins
 @function set-notification-text-color($color) {
 @if (lightness($color) > 80) {
 @return $black; // Lighter backgorund, return dark color
 } @else {
 @return $white; // Darker background, return light color
 }
 }

@mixin make-button($name, $color) {
 .btn-#{$name} {
I moved problematic function outside / before of mixin and everithing worked with no problem :) As I tested, I think the problem is in the version of sass and ruby ​​that is embedded in Koala (older one), so it no support for embeded function in mixin, and my solution is only possible, for now.   Regards Josip  

Marta Szymanska staff pro premium answered 7 years ago

Hi Josip, thank you for solving this issue, it is a great help for us. For sure I will take one into consideration in our current update. Best, Marta

Marta Szymanska staff pro premium answered 6 years ago

Hi Markus,

the solution for this is to change some things in mixins.scss file. Replace @mixin make-button and @mixin make-badge with this code:

@function set-notification-text-color($color) {
@if (lightness($color) > 80) {
@return $black; // Lighter backgorund, return dark color
} @else {
@return $white; // Darker background, return light color
}
}
@mixin make-button ($name, $color) {
.btn-#{$name} {
background-color: $color !important;
color: set-notification-text-color($color) !important;
&:hover {
background-color: lighten($color, 5%);
}
&:focus,
&.focus {
@extend .z-depth-1-half;
}
&:focus,
&:active,
&.active {
background-color: darken($color, 20%);
}
&.dropdown-toggle {
background-color: $color!important;
&:hover,
&:focus {
background-color: lighten($color, 5%) !important;
}
}
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
@extend .z-depth-1-half;
background-color: darken($color, 20%) !important;
}
&:not([disabled]):not(.disabled):active:focus,
&:not([disabled]):not(.disabled).active:focus,
.show > &.dropdown-toggle:focus {
@extend .z-depth-1-half;
}
}
.#{$name}-ic {
color: $color !important;
&:hover,
&:focus {
color: $color;
}
}
}
@mixin make-badge($name, $color) {
.badge-#{$name} {
background-color: $color !important;
color: set-notification-text-color($color) !important;
}
}

Best,

Marta

 

Marta Szymanska staff pro premium commented 6 years ago

I'm not sure what you mean. I can only say that we're constantly developing our code and fix the bugs as fast as we can.

underfire pro commented 6 years ago

Hello, get new error message when i use this code :( "ArgumentError: wrong number of arguments calling radial_gradient (1 for 2)"

Marta Szymanska staff pro premium commented 6 years ago

Hi, I'm not sure what you mean, we don't have such a variable or class or any setting like 'radial_gradient'. Please, provide more information.

Marta Szymanska staff pro premium answered 7 years ago

Hi, which preprocessor do you use? A function inside a mixin is not the problem. When I compile my MDB project, everything is fine. Could you send me your whole project to m.szymanska@mdbootstrap.com? I'll check what is wrong. Best, Marta

Lê Văn Văn pro commented 6 years ago

Hi ! Error with gulp Error in plugin 'sass' Message: scsscore_mixins.scss Error: Functions may not be defined within control directives or other mixins. on line 215 of scss/core/_mixins.scss >> @function set-notification-text-color($color) { --------------^

h.evers pro answered 7 years ago

Hi, I have the same problem. Using a freshly unzipped mdb jquery 4.4.5 and koala for compiling sass. It worked with mdb jquery 4.4.4   Greetings Henrik

Marta Szymanska staff pro premium answered 7 years ago

Hi, I'm not sure why you guys have this issue with compiling sass and I can't reproduce the problem because I've compiled MDB 4.4.5 in two preprocessors - Gulp and Prepros and everything is fine. Please tell me what operating system you use and which version. I'll try to figure out what is the issue. Best, Marta

h.evers pro commented 7 years ago

Hi Marta, I'm using Koala (Windows 10): http://koala-app.com/ Maybe that helps :)

Roman pro premium priority answered 7 years ago

Hello, here you can see steps I have done. https://youtu.be/3YCPhkxG-9M

h.evers pro commented 7 years ago

You're using Koala as well. That's what I experienced.

Roman pro premium priority commented 7 years ago

I have downloaded Koala just as an example. I have also tried other preprocesors with the same result.

Josip Tomašev pro premium priority answered 7 years ago

Hi I have same problem, and here is full backtrace log from Koala v2.3.0 on my Linux:   
Error: Functions may not be defined within control directives or other mixins.
 on line 104 of /home/josip/Radna površina/Dropbox/RAZVOJ/RESURSI/MDB4/MDB Pro/sass/mdb/free/data/_mixins.scss
 from line 37 of /home/josip/Radna površina/Dropbox/RAZVOJ/RESURSI/MDB4/MDB Pro/sass/mdb.scss

99: }
100: 
101: // New mixins
102: @mixin make-button($name, $color) {
103: .btn-#{$name} {
104: @function set-notification-text-color($color) {
105: @if (lightness($color) > 80) {
106: @return $black; // Lighter backgorund, return dark color
107: } @else {
108: @return $white; // Darker background, return light color
109: }

Backtrace:
/home/josip/Radna površina/Dropbox/RAZVOJ/RESURSI/MDB4/MDB Pro/sass/mdb/free/data/_mixins.scss:104
/home/josip/Radna površina/Dropbox/RAZVOJ/RESURSI/MDB4/MDB Pro/sass/mdb.scss:37
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:15:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:51:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:38:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:17:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:51:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:75:in `visit_mixindef'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:17:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:51:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:59:in `visit_root'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/check_nesting.rb:17:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:24:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:328:in `block in visit_import'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/stack.rb:88:in `block in with_import'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/stack.rb:135:in `with_frame'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/stack.rb:88:in `with_import'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:326:in `visit_import'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:162:in `block in visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/stack.rb:79:in `block in with_base'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/stack.rb:135:in `with_frame'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/stack.rb:79:in `with_base'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:162:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `map'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:171:in `block in visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:183:in `with_environment'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:170:in `visit_children'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:190:in `visit_root'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/base.rb:36:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:161:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/visitors/perform.rb:10:in `visit'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/root_node.rb:36:in `css_tree'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/tree/root_node.rb:20:in `render'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/engine.rb:290:in `render'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/exec/sass_scss.rb:400:in `run'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/exec/sass_scss.rb:63:in `process_result'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/exec/base.rb:52:in `parse'
/usr/share/koala/rubygems/gems/sass-3.5.2/lib/sass/exec/base.rb:19:in `parse!'
/usr/share/koala/rubygems/gems/sass-3.5.2/bin/sass:13:in `<top (required)>'
/usr/share/koala/bin/sass:22:in `load'
/usr/share/koala/bin/sass:22:in `<main>'
I think the problem is in Koala and preprocessor, maybe?   Greetings Josip

Marta Szymanska staff pro premium answered 7 years ago

Hi guys, try to download Prepros or install Gulp and test compiling MDB with these preprocessors and tell me if the same problem exists. Best, Marta

Roman pro premium priority answered 7 years ago

Hi, Prepros works fine, thank you for a chance to use MDB better than before. Unfortunatelly this is not a good solution for me. I have tried 3 compilers and all af them finished with the error I have described. So I don't think it is a problem of compiler. I would be happy if the MDB worked with all common used compilers, not only with a selection of them.

Marta Szymanska staff pro premium commented 7 years ago

We'll try to improve MDB in our next release, thank you for the opinion.

bk@mittnett.no pro answered 6 years ago

Hi guys, You should update ASAP, because the mixin is invalid SASS. The only reason you have got away with it is due to a bug in libsass. The error msg clearly states: "functions may not be defined within control directives or other mixins" A rule which this mixing clearly breaks: // New mixins @mixin make-button($name, $color) { .btn-#{$name} { @function set-notification-text-color($color) { @if (lightness($color) > 80) { @return $black; // Lighter backgorund, return dark color } @else { @return $white; // Darker background, return light color } }

Marta Szymanska staff pro premium answered 6 years ago

Hi bk@mittnett.no, we fixed this in our current update of MDB which we're working on now. The new version of MDB should be soon and we're sorry for the bug. Best, Marta

Roman pro premium priority answered 6 years ago

Hello, as I can see it hasn't been fixed in the last large update to MDB 4.5.0. The bug is still there, e.g. in the file _mixins.scss, line 215.

Peter commented 6 years ago

I can confirm Roman’s report. I am on 4.5.0 now and sass does not compile giving exactly the same error. The offending code is now on line 215 of _mixins.scss.

Roman pro premium priority answered 6 years ago

Hello, thank you for your response. Now I know how to avoid this problem but I just wanted to refer to this bug. I am looking forward to the next release.

Marta Szymanska staff pro premium answered 6 years ago

Hi, Thanks again for report this bug. Best, Marta

MAntoni pro commented 6 years ago

Hello, I see the bug still exists. What is the solution to fix it? Regards, Markus

tkaczykp1 answered 6 years ago

Thanks @marta This also works for me (just change make-badge) The problem was: 
Module build failed: ModuleBuildError: Module build failed: 
 @function set-notification-text-color($color) {
 ^
 Functions may not be defined within control directives or other mixins.

Marta Szymanska staff pro premium commented 6 years ago

Yes, we know the problem, sorry for that and it will be fixed in the nearest release.

Nguyễn Ngọc Sang commented 6 years ago

i hope mdbootstrap team fix this problem soon , thanks

Marta Szymanska staff pro premium commented 6 years ago

In next week will be new package with fixed bugs.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
Roman
Pro User Premium support
192Support score
19Questions 16Answers
0Snippets likes 3Snippets