"Error: no mixin named breakpoint"

[BenQuirk]

Feel like I'm missing something basic here.

When I do something like this in my scss files:

.grey-footer { padding: 150px; border:20px solid red; @include breakpoint(medium) { padding:0; border:20px solid blue; } }

My terminal reads:

[14:39:59] Starting 'styles'... [14:39:59] assets/styles/scss/footer.scss Error: no mixin named breakpoint on line 12 of assets/styles/scss/footer.scss

@include breakpoint(medium) {

-------------^

Are there additional configuration steps needed to get Foundations mixins for breakpoints imported into the project?

[garretthyder]

Hi @BenQuirk

It appears you have setup a custom footer.scss file where you've used the breakpoint mixin. When you have a custom .scss file and want to use mixins, etc from Foundation you'll need to import the foundation components into your file otherwise yours won't have the required dependency.

Take a look at the style.scss file - https://github.com/JeremyEnglert/JointsWP/blob/master/assets/styles/scss/style.scss *Make sure your code follows the foundation includes.

You at minimum should include settings and foundation. Or if you need specific components instead then place in settings and you can get individual components like; @import "foundation/components/buttons";

That being said if footer is to be included into all your pages you could just make it a partial by naming it _footer.scss and importing it into the base of your style.scss; @import 'footer'; If you go to bottom of the style.scss you'll see this is how _global.scss is imported; https://github.com/JeremyEnglert/JointsWP/blob/master/assets/styles/scss/style.scss#L68

Hope that helps. I'm going to close this as it's not a bug in the theme but a customization. Feel free to reply if you still need help though as I'll be notified.

[BenQuirk]

Many many thanks @garrett-eclipse for your assistance.

[itsvishalpandey]

how can i solve this error anyone suggest?

[garretthyder]

In future @itsvishalpandey I would suggest opening a new ticket.

Your issue isn't really a JointsWP issue but more a SCSS implementation issue. Before you can use your mixins in another file you have to import the mixin file into the other one. https://sass-lang.com/documentation/at-rules/import

[KarunaTz]

I got the same error @itsvishalpandey i also @import 'mixins' in file style.scss it still didn't work.

[garretthyder]

@KarunaTz if you're using the mixin in the _global.scss or other partial you want to import your mixins into that partial file. Importing into style.scss won't import it for all partials, just the style.scss file.

[KarunaTz]

I see thanks it works now !!!

[HectorGitt]

Well the problem was the arrangements of the import, you should always keep mixin and functions imports at the top of the main file then other imports can follow so sass can easily locate the mixin before processing of other files.