Проблемы с синтаксисом при попытке реализовать панель навигации для проекта Angular 6

Question

Так что я пытаюсь следовать этому уроку здесь .

У меня возникли некоторые проблемы с файлом .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;
      }
    }
}

Как я уже сказал, я получаю многоСинтаксические проблемы.

Я знал, как исправить большинство из них, и сделал, но некоторые все еще присутствуют.

Основной цвет не так ясен, когда дело доходит до исправления, и похоже, что у меня возникают некоторые ошибки с идентификаторами.

Рис проблем

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

}

}