Visual Studioでのcssでの記述に対する警告の対処方法が分かりません。

前提・実現したいこと

Visual studio 2019でCSSを記述していたのですが、
text-align を追加した後以下のような警告が出てきてしまい困っています。
試行錯誤したのですが警告を消すことが出来なかったので、質問させていただきます。
HTMLの方にはエラーは出ていませんでしたが、一部を載せておきます。
お力をお貸ししていただければ幸いです。

発生している警告

スタイル ルールにセレクターがありません　（CSS3行目）
ブロックが閉じられていません。'}' が必要です。　（CSS3行目の｛　）
予期しない文字のシーケンスです。　（CSS８行目の　｝）
宣言の "(プロパティ) : (値)" で、コロン (':') の前にプロパティ名がありません。　（CSS3行目の.）

該当のソースコード

CSS
1body {
2
3    .bigentry h1{
4    font-size: 100%;
5    color: #ffd800;
6    text-align: center;
7    }
8}

HTML
1<body>
2    <div class="bigentry">
3        <h1>"文字"</h1>
4    </div>
5</body>

試したこと

.bigentryの.にdivをつける
text-alignの削除
その他項目の削除（color等）
一旦CSSを削除しもう一度書いてみる
Visual Studioの再起動

補足情報（FW/ツールのバージョンなど）

Visual Studio 2019
Windows 10 home

行動規範の内容に同意します

回答2件

ベストアンサー

通常のCSSでは、

body {
    .bigentry{
       （中略）
    }
}

のように書いても、bodyの中のbigentryクラスのことにはなりません。（これはSCSSというものの書き方です）

body .bigentry h1 {
  font-size: 100%;
  color: #ffd800;
  text-align: center;
}

とすればよいかと思います。

投稿2021/06/04 10:39

hallen0225

総合スコア587

Plgkn872

2021/06/04 10:45

なるほど。別のクラスを追加してみてもエラーが出ず記述することが出来ました。SCSSについても調べてみます。ありがとうございました。

行動規範の内容に同意します

SCSS を書いていると思いますので、拡張子を.scssに変更してみてはどうでしょうか。

なお、SCSSはそのままではブラウザで表示されません。VSCodeを使っているならば、Live Sass Compiler などをインストールしてみましょう。

投稿2021/06/04 10:44

Lhankor_Mhy

総合スコア36156

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！