Я пытаюсь создать. Простой угловой проект. В файле css /src/styles.css во время написания кода мне показывали синтаксические ошибки.

body {
     margin: 0;
     background: #F2F2F2;
     font-family: 'Montserrat', sans-serif;
     height: 100vh;
}

#container {    display: grid;
    grid-template-columns: 70px auto;
    height: 100%;

    #content {
        padding: 30px 50px;

        ul {//error highlight saying: colon expected css(css-colonexpected)

            list-style-type: none;
            margin:0;padding:0;

            li {
                background: #fff;
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 8px;

                a {
                    font-size: 1.5em;
                    text-decoration: none;
                    font-weight: bold;
                    color:#00A8FF;
                }

                ul {
                    margin-top: 20px;

                    li {
                        padding:0;

                        a {
                            font-size: 1em;
                            font-weight: 300;
                        }//Error highlight saying: at-rule or selector expected css(css-ruleselectorexpected)
                    }
                }
            }
        }
    }
}

Сообщение об ошибке отображается как комментарии

Отображаются следующие синтаксические ошибки: -colon Ожидаемый css (css-colonexpected)

-в правиле или селекторе ожидается css (css-ruleselectorexpected)

-1
David 30 Май 2019 в 14:51

2 ответа

Лучший ответ

Вы используете допустимый SASS или SCSS с вложенными классами в файле .css, и поэтому отображается ошибка. Эквивалент css будет:

body {
  margin: 0;
  background: #F2F2F2;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
}

#container {
  display: grid;
  grid-template-columns: 70px auto;
  height: 100%;
}
#container #content {
  padding: 30px 50px;
}
#container #content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#container #content ul li {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 8px;
}
#container #content ul li a {
  font-size: 1.5em;
  text-decoration: none;
  font-weight: bold;
  color: #00A8FF;
}
#container #content ul li ul {
  margin-top: 20px;
}
#container #content ul li ul li {
  padding: 0;
}
#container #content ul li ul li a {
  font-size: 1em;
  font-weight: 300;
}
1
nircraft 30 Май 2019 в 12:09

Вы используете sass в файле CSS . Итак, эта ошибка отображается. Его расширение файла должно быть .sass или таблица стилей должна быть закодирована в соответствии с синтаксисом CSS.

В CSS это будет выглядеть так:

    body {
  margin: 0;
  background: #F2F2F2;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
}

#container {
  display: grid;
  grid-template-columns: 70px auto;
  height: 100%;
}
#container #content {
  padding: 30px 50px;
}
#container #content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#container #content ul li {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 8px;
}
#container #content ul li a {
  font-size: 1.5em;
  text-decoration: none;
  font-weight: bold;
  color: #00A8FF;
}
#container #content ul li ul {
  margin-top: 20px;
}
#container #content ul li ul li {
  padding: 0;
}
#container #content ul li ul li a {
  font-size: 1em;
  font-weight: 300;
}
0
Priyanka 30 Май 2019 в 12:13