Question

首先，让我说我只使用了一点LESS，而我现在正试图接受SCSS，因为Bootstrap 4是用SCSS编写的。我正在尝试将带有LESS的现有Bootstrap 3转换为使用SCSS的Bootstrap 4。

我要做的是将Bootstrap的.btn和.btn-default值继承到我自己的类中，名为.menu-item。我用以下代码用LESS做到了。这允许我控制我希望菜单项只用一个类看的方式。

.menu-item {
    .btn;
    .btn-default;
    color: @header-text-color;
}

所以，从我看过的有关SCSS的视频中我会使用@extends但是我没有得到与LESS相同的效果。当我胡佛时，按钮似乎没有改变颜色，我试图使用文本权限将它们对齐到Bootstrap网格的右侧，但它们仍然是左对齐的。

这可能是由于BS3与BS4的不同，但我主要是想确保使用SCSS正确地继承值，还是应该为继承做其他事情呢？

这是我的SCSS版本：

.menu-item{
    @extend .btn;
    @extend .btn-default;
    color: $header-text-color;
}

这就是我在_Layout.cshtml页面中使用它的方式。

<div class="col-md-6 text-right">
    <div class="btn-group">
        <a href="@Url.Action("Details", "Schedule")" class="menu-item">Schedule</a>
        <a href="@Url.Action("Index", "LogOut")" class="menu-item">Log Out</a>
    </div>
</div>

我很困惑使用@extend继承SCSS的另一个类？

0 个答案: