Question

因此，我尝试遵循本教程here。

.scss文件有点问题，所以我坚持使用.css，因为它使我更容易理解。视频数字32（第4节），分钟3:21，是我开始迷路的地方。

我尝试转换语法，以便它都可以在.css上运行，而无需使用任何复杂的东西。到目前为止，这是教职员的代码：

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

就像我说的那样，我遇到了很多语法问题。

我知道如何修复大多数问题，确实做到了，但是仍然存在。

固定时主色不清楚，看来标识符好像有一些错误。

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

}

}

尝试为Angular 6项目实施导航栏时的语法问题

1 个答案: