css class is undefined?

Question

css

There is such a class.

.btn_cubic {
  span {
    position: relative;
    display: block;
    padding: 18px 7px;
    background: @gray;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    &:before {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: @gray-hover;
      line-height: 61px;
      content: attr(data-hover);
      -webkit-transition: background 0.3s;
      -moz-transition: background 0.3s;
      transition: background 0.3s;
      -webkit-transform: rotateX(-90deg);
      -moz-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
      -webkit-transform-origin: 50% 0;
      -moz-transform-origin: 50% 0;
      transform-origin: 50% 0;
    }
  }
  &:hover {
    span {
      -webkit-transform: rotateX(90deg) translateY(-22px);
      -moz-transform: rotateX(90deg) translateY(-22px);
      transform: rotateX(90deg) translateY(-22px);
      &:before {
        background: #d3cece;
      }
    }
  }
  &--orange {
    span {
      background: @orange;
    }
    &:hover {
      span:before {
        background: @orange-hover;
      }
    }
  }
}

And here I am trying to use it

&-btn {
      .btn_cubic;
      .btn_cubic--orange;
      text-align: center;
      cursor: pointer;
      span {
        .font(16rem, 20rem);
        color: #fff;
        font-weight: 400;
        padding: 13px 7px;
        border-radius: 5px;
      }
      &:hover {
        span:before {
          line-height: 47px;
          border-radius: 5px;
        }
      }
    }

It just .btn_cubicworks great. As soon as I add more .btn_cubic--orangegulp starts to swear. What am I doing wrong?

Answer 1

Try:

&-btn {
    .btn_cubic();
    .btn_cubic--orange();
    ...
}

Or class declarations must be separated:

.btn_cubic {
    ...
}

.btn_cubic--orange {
    ...
}