Question

我正在开发一个项目，我需要使用一个小div并使用除此之外的所有相同的css特性。我遇到的问题是我尝试过的方法不起作用，我唯一要做的就是完全复制整个css类并改变一个特性。这种方法有效，但它不是一种非常干燥的方式，我想知道是否还有另一种方法。

我的前端是这样的

%a.btn.button.test{ 'ui-sref' => 'visit.report({ id: visitId })' } v        Save a Spot

我的css就是这样

.button {
color: $button-text;
background: $button-background;
width: 100%;
margin-top: 7px;
margin-bottom: 7px;
padding: 20px;
opacity: 1;
transition: all .1s ease-in-out;

&:hover {
    color: $button-text;
    opacity: .9;
    box-shadow: 3px 4px 4px $button-hover;
}

&:focus {
    color: $button-text;
    outline: none;
}

i {
    position: relative;
    vertical-align: middle;
    top: -3px;
}
}

所以我只是认为解决这个问题的方法是在按钮类中添加我的.test类（我正在使用scss），并且根据需要进行更改。

像这样：

  ....code

   i {
    position: relative;
    vertical-align: middle;
    top: -3px;
    }

   .test{
   width: 50%;
    }
}

然而，这种方法不起作用。到目前为止，我唯一能做的就是获取.button类中的所有内容，复制它，重命名.test，然后改变宽度。所以我再次想知道是否有一种干燥的方式基本上在一个类中窃取一个元素而不必重新复制代码。

Answer 1

你关闭了。您已在 .test元素中为.button元素添加了样式。

你的意思是：

&.test { width: 50%; }

扩展为：

.button.test { width: 50%; }

我有一个div使用另一个除了一个之外的所有特征。使用scss，我可以使用任何继承吗？

1 个答案: