Topic: SCSS: Functions may not be defined within control directives or other mixins
Roman priority asked 6 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 Wierzbicka staff answered 6 years ago
tkaczykp1 free answered 6 years ago
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 Wierzbicka staff 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 free commented 6 years ago
i hope mdbootstrap team fix this problem soon , thanksMarta Wierzbicka staff commented 6 years ago
In next week will be new package with fixed bugs.Marta Wierzbicka staff 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 Wierzbicka staff 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 Wierzbicka staff 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 Wierzbicka staff answered 6 years ago
MAntoni pro commented 6 years ago
Hello, I see the bug still exists. What is the solution to fix it? Regards, MarkusRoman priority answered 6 years ago
Roman priority answered 6 years ago
Peter free 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.Marta Wierzbicka staff answered 6 years ago
bk@mittnett.no pro answered 6 years ago
Marta Wierzbicka staff answered 6 years ago
Josip Tomašev priority answered 6 years ago
// 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
Roman priority answered 6 years ago
Marta Wierzbicka staff commented 6 years ago
We'll try to improve MDB in our next release, thank you for the opinion.Marta Wierzbicka staff answered 6 years ago
Josip Tomašev priority answered 6 years ago
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
Roman priority answered 6 years ago
Marta Wierzbicka staff answered 6 years ago
h.evers pro commented 6 years ago
Hi Marta, I'm using Koala (Windows 10): http://koala-app.com/ Maybe that helps :)h.evers pro answered 6 years ago
Marta Wierzbicka staff answered 6 years ago
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) { --------------^FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No