csstools/precss

Nesting mixins

Opened this issue · 2 comments

I've got a mixin like this:

@define-mixin device-width $width {
  @media only screen and (min-width: $width) {@mixin-content;}
}

The @mixin works, and when using normal css and variables in the @mixin-content it works fine, but if I try to use another mixin inside the @mixin-content such as this:

h1 { 
  @mixin font-size 1.5;

  @mixin device-size $breakpoint__small {
    @mixin font-size 2.5;
  }
}

The CSS I get out of it is this:

h1 {
    font-size: 24px;
    font-size: 1.5rem;
}
@media only screen and (min-width: 768px) {
    h1 {
        @mixin font-size 2.5;
    }
}

As you can see, the first time the mixin works fine, but not if within another mixin. Is this feature supported, or am I doing something wrong?

Confirmed - experiencing the same issue.

The non-Sass-like @define-mixin syntax has been dropped in v3 in favor of the Sass-like @mixin syntax.