Error no mixin named

sage
1

Hey folks,

I’m trying to use a mixin to create a linear gradient for background,

I check sass doc and search online but there must be something I’m not seeing as it seem like i’m doing what I’m suppose to but I’m surely doing something wrong.

I have created styles/components/ _mixins.scss

@mixin linear-gradient($from, $to) {
  background: $to;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $from), color-stop(100%, $to));
  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
  background: -o-linear-gradient(top, $from 0%, $to 100%);
  background: linear-gradient(to bottom, $from 0%, $to 100%);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to});
}


called it in _page.scss

#home {
padding: 100px;
@include linear-gradient(map-get($theme-colors, primary), map-get($theme-colors, secondary));
}

and imported it in main.scss
@import “components/mixins”;

I’m getting this error “no mixin named linear gradient”.

I don’t understand why it’s not finding the mixin.

Any clue?

Edit : found the solution! :slight_smile:

apparently there is an order for @import in main.scss
I had added @import “components/mixins”; as last line which wasn’t working but when
I add it not as last line but after the last file in the same folder (here components) like so

@import “common/global”;
@import “components/buttons”;
@import “components/comments”;
@import “components/forms”;
@import “components/wp-classes”;
@import “components/mixins”;
@import “layouts/header”;
@import “layouts/sidebar”;
@import “layouts/footer”;
@import “layouts/pages”;
@import “layouts/posts”;
@import “layouts/tinymce”;

it’s working.

I leave this post in case another noob got the same problem.

2

It looks like you’re using Bootstrap? If so, you might want to use the included gradient mixins instead, e.g:

3

Thank you for your reply,

yes, I’m using bootstrap, aaaaaaah I didn’t know this file was there.
I’m going to look into how to do it this that way.

Is this the good practice or a better practice than what I did ?

4

yep, something like this (using Bootstrap’s mixin) should get you going:

#home {
  padding: 100px;
  @include gradient-y($primary, $secondary);
}
5

mmm, when I do that the gradient is made from the $primary and $secondary set in
theme-directory/node_modules/bootstrap/scss/_variables.scss not from
theme-directory/resources/assets/styles/common/_variables.scss which are not the colors I set from my theme.
I tried to

  padding: 100px;

@include gradient-x(map-get($theme-colors, $primary), map-get($theme-colors, $secondary));
}

it compile successfully but not working on the front-end.

I'm confused about how to go about this now..

edit: my bad, I put $ in front of primary in the map-get()

correct solution is 

#home {
  padding: 100px;

  @include gradient-x(map-get($theme-colors, primary), map-get($theme-colors, secondary));
}

Thanks for your help, man :smiley:
6

Oops, my variables are setup a bit differently than yours.

However, both these should work (they do on my end).

@include gradient-y(map-get($theme-colors, primary), map-get($theme-colors, secondary));
@include gradient-x(map-get($theme-colors, primary), map-get($theme-colors, secondary));

Feel free to PM me with other questions.

7

yep, exactly just left a $ in front of primary and secondary in the map-get() :slightly_frowning_face:

8

This topic was automatically closed after 42 days. New replies are no longer allowed.