Menu icon Foundation
Beginner Mixins - "no mixin named" error

Hello,

Unfortunately, I'm not getting to far, trying to figure out mixins.

I've set up my Sass environment as described under, "Creating a Libsass Project" and everything seems to work well when using grunt and making my changes in the scss/_settings.scss file with the variables that are there, as well as using @extend on a tag.

What I cannot do, is use the following mixin:

            

.custom-button-class { 
 @include button($padding, $bg, $radius, $full-width, $disabled, $is-input); 
}

I will get an error in grunt:

> File "scss/_settings.scss" changed.
Running "sass:dist" (sass) task
>> no mixin named button
>> 
>> Backtrace:
>>     scss/_settings.scss:1563
>>   Line 1563  Column 14  scss/_settings.scss
Warning:  Use --force to continue.


The following will result in another error:

    .custom-panel {
      @include panel();
    }


>> File "scss/_settings.scss" changed.
Running "sass:dist" (sass) task
>> no mixin named panel
>> 
>> Backtrace:
>>     scss/_settings.scss:1562
>>   Line 1562  Column 16  scss/_settings.scss

Seems I'm missing a critical part about how to use mixins.

Also, seems like, there's a misspelling in the docs at:

http://foundation.zurb.com/docs/components/panels.html

"$panel-pg" should probably be, "$panel-bg"

mixins

Hello,

Unfortunately, I'm not getting to far, trying to figure out mixins.

I've set up my Sass environment as described under, "Creating a Libsass Project" and everything seems to work well when using grunt and making my changes in the scss/_settings.scss file with the variables that are there, as well as using @extend on a tag.

What I cannot do, is use the following mixin:

            

.custom-button-class { 
 @include button($padding, $bg, $radius, $full-width, $disabled, $is-input); 
}

I will get an error in grunt:

> File "scss/_settings.scss" changed.
Running "sass:dist" (sass) task
>> no mixin named button
>> 
>> Backtrace:
>>     scss/_settings.scss:1563
>>   Line 1563  Column 14  scss/_settings.scss
Warning:  Use --force to continue.


The following will result in another error:

    .custom-panel {
      @include panel();
    }


>> File "scss/_settings.scss" changed.
Running "sass:dist" (sass) task
>> no mixin named panel
>> 
>> Backtrace:
>>     scss/_settings.scss:1562
>>   Line 1562  Column 16  scss/_settings.scss

Seems I'm missing a critical part about how to use mixins.

Also, seems like, there's a misspelling in the docs at:

http://foundation.zurb.com/docs/components/panels.html

"$panel-pg" should probably be, "$panel-bg"

Rafi Benkual almost 4 years ago

I would start by looking in the app.scss and make sure you are importing all of foundation, or al least button and panels.

@import "settings";
@import "foundation";

Justin J almost 4 years ago

Yup, everything is getting imported - I started the project exactly as the docs, uh, document:

cd path/to/sites
foundation new project_name --libsass
cd project_name
grunt build

There seems to be a step I may be missing to use this sort of mixin, I'm guessing.

Rafi Benkual almost 4 years ago

Where are you writing this SCSS? What file?

Justin J almost 4 years ago

In the, scss/_settings.scss file - see my initial post for the output I'm seeing in grunt.

According to the docs (http://foundation.zurb.com/docs/using-sass.html) that does seem to be the place to do such work, if I'm reading this right. I tried the example that's on that page by adding it to the _settings.scss file and saving. That's when grunt comes back with the error.

Justin J almost 4 years ago

Here's the simpliest way I can recreate the problem:

# These first lines are right from the docs:  
foundation new project_name --libsass
cd project_name
grunt build
# add the mixin: 
echo '.custom-button-class {  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);  }' >> ./scss/_settings.scss
#compile: 
grunt

Output:

Running "sass:dist" (sass) task
>> no mixin named button
>> 
>> Backtrace:
>>   scss/_settings.scss:1490
>>   Line 1490  Column 34  scss/_settings.scss
Warning:  Use --force to continue.

Aborted due to warnings.

So... what am I doing incorrectly?

Lisa Lisa almost 4 years ago

Have you looked at the SASS-lang guide? Perhaps this website guide will help you... If you are like me, it is something silly (and in retrospect - simple).

http://sass-lang.com/guide

If you go about 3/4 of the way down, it shows you what the mixin definition should look like and how you can use it in your scss. To quote:

SCSS SYNTAX

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

.box { @include border-radius(10px); }

To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-radius. We're also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this:

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

Of course, I might be way off...

Justin J almost 4 years ago

No, it's not to do with the syntax. Here, this works:

 # These first lines are right from the docs:  
foundation new project_name --libsass
cd project_name
grunt build
# add the mixin: 
echo '.custom-button-class {  @include button();  }' >> ./scss/app.scss
#compile: 
grunt

Putting the mixin in app.scss at least doesn't produce an error as it does for _settings.scss - I haven't checked if it produces the .css I wanted yet.

The flow of the docs on this page:

http://foundation.zurb.com/docs/using-sass.html

Introduce _settings.scss, then mixins, then the app.scss. To me, that's a little out of order and not clear or apparrent.

Would you introduce your mouth, food, and your butt, and then have people go, "well, I guess I stick food in my butt!".

Just say, "Hey, mixins go in this file (then introduce the file)" and bang! your docs are better.

Rafi Benkual almost 4 years ago

I would try re-installing a fresh copy. Without digging through all the files I can't think of what would cause it since I cant replicate it here.

Justin J almost 4 years ago

Reinstalling a fresh copy? That's exactly what I had done. If you follow the thread, the fix was to put the mixin in scss/app.scss, not scss/_settings.scs.

I then lamented on how the docs weren't clear.

I deal with bug reports all the time. The big thing is to be able to recreate the bug.

Here's how I can recreate the problem - Can you verify that you tried the following, and have it did not give back the error I'm also reporting?

 # These first lines are right from the docs:  
foundation new project_name --libsass
cd project_name
grunt build
# add the mixin: 
echo '.custom-button-class {  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);  }' >> ./scss/_settings.scss
#compile: 
grunt