Css класс is undefined?

Question

[Aleksandr]

Есть такой класс.

.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;
			}
		}
	}
}

И вот пытаюсь его заюзать

&-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;
				}
			}
		}

Просто .btn_cubic работает отлично. Как только добавляю еще .btn_cubic--orange gulp начинает ругаться. Что я не так делаю?

Answer 1

[Котик Антон]

Попробуйте:

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

Либо объявления классов надо разделить:

.btn_cubic {
    ...
}

.btn_cubic--orange {
    ...
}

Comments

[Aleksandr]

27cm первый вариант не работает. Второй да. Спасибо