css - 尝试为 Angular 6 元素实现导航栏时的语法问题

Question

所以我正在努力学习本教程 here .

我对 .scss 文件有点问题，所以我坚持使用 .css，因为它对我来说更容易理解。第 32 号视频(第 4 节)，第 3 分 21 秒，我开始迷路了。

我尝试转换语法，这样它就可以在 .css 上工作，并且不需要使用任何复杂的东西。这是到目前为止的 udemy 教师代码:

 @import 'variables';

.navbar {
  padding: 20px;
  margin-bottom: 40px;

  .bwm-search {
    height: 50px;
    width: 300px;
  }

  .navbar-brand {
    margin-right: 30px;
    font-size: 30px;
    letter-spacing: 1px;
    color: $main-color;
    font-weight: 500;


  }

  .nav-item {
    font-size: 14px;
  }

  .btn-bwm-search {
    border-color: $main-color;
    color: $main-color;

    &:hover, &:focus, &:active {
      background-color: transparent;
      border-color: $main-color !important;
      color: $main-color !important;
      box-shadow: none;
    }
  }

  .dropdown-item {
    font-size: 14px;

    &:active, &:focus {
      background-color: $main-color;
    }
  }
}

---

这是我正在尝试的:

@import '../variables';

.navbar 
{
    padding: 20px;
    margin-bottom: 40px;

    bwm-search 
    {
      height: 50px;
      width: 300px;
    }

    .navbar-brand 
    {
      margin-right: 30px;
      font-size: 30px;
      letter-spacing: 1px;
      color: red;
      font-weight: 500;
    }

    .nav-item 
    {
      font-size: 14px;
    }

    .btn-bwm-search 
    {
      border-color: red;
      color: red;

      :hover red:focus, red:active
      {
        background-color: transparent;
        border-color: main-color !important;
        color: main-color !important;
        box-shadow: none;
      }
    }
}

正如我所说，我遇到了很多语法问题。

我知道如何修复它们中的大部分，也确实做到了，但有些问题仍然存在。

在修复时 Main-color 不是很清楚，而且我的标识符似乎有一些错误。

Pic of problems

Answer 1

您的 CSS 无效；如果您不使用任何预处理器，它应该是这样的:

.navbar {
  padding: 20px;
  margin-bottom: 40px;
}

.navbar bwm-search {
  height: 50px;
  width: 300px;
}

.navbar .navbar-brand {
  margin-right: 30px;
  font-size: 30px;
  letter-spacing: 1px;
  color: red;
  font-weight: 500;
}

.navbar .nav-item {
  font-size: 14px;
}

.navbar .btn-bwm-search {
  border-color: red;
  color: red;
}

.navbar .btn-bwm-search:hover red:focus,
red:active {
  background-color: transparent;
  border-color: main-color !important;
  color: main-color !important;
  box-shadow: none;
}

}

}