コード ```### 前提・実現したいこと sassを使いたい sass導入手順に従いRuby、sassインストールは問題なく終了していることを確認済です。 VSCodeの拡張機能「Easy Sass」を使い自動コンパイルも問題なく行われ、コードのミスもないことを確認しています。初歩的な質問で申し訳ありませんが宜しくお願い致します。 ### 発生している問題・エラーメッセージ sassで書いたコード(下記に貼りつけています)を保存したのちブラウザで確認しますが反映されておりません。
エラーメッセージ
### 該当のソースコード .header-list { display: flex; li { margin-right: 30px; a{ line-height: 21px; &:hover { border-bottom: 3px solid #E81919; } } } } ```css /* Basic */ * { margin: 0; padding: 0; } body { font-family: 'Yu Gothic'; } .container { width: 1366px; max-width: 100%; margin: 0 auto; } li { list-style: none; } a { text-decoration: none; color: #fff; } /* Header */ header { height: 100px; background-color: #3F51B5; box-shadow: 0 3px 3px; position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 3px 3px #000000; } .header-contents { display: flex; justify-content: space-between; } .header-left { margin: 31px 0 30px 140px; width: 200px; height: 39px; } .header-right { width: 344px; height: 25.5px; margin: 40px 140px 34.5px 0; font-size: 16px } /* Main Page */ .main-wrapper { text-align: center; height:700px; background-image: url(../img/main-img.jpg); background-size: cover; padding-top: 100px; } .main-wrapper h1 { width: 748px; height: 87px; padding-top: 249px; margin-bottom:12px; margin:0 auto; font-size: 68px; line-height: 108px; } .main-wrapper p { width: 342px; height: 49px; padding-bottom:82px; margin:0 auto; font-size: 38px; font-weight: bold; line-height: 61px; } .btn { width: 228px; height: 49px; padding: 17px 81px; margin-bottom: 138px; display: inline-block; background-color:#3F51B5; border-radius: 12px; box-shadow: 0 3px 6px #000000; font-size: 38px; font-weight: bold; }
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="css/style.css"> 9 <title>Document</title> 10</head> 11 12<body> 13 <!-- Start Header --> 14 <header> 15 <div class="container header-contents"> 16 <div class="header-left"> 17 <img src="img/logo.png" class="logo"> 18 </div> 19 <div class="header-right"> 20 <ul class="header-list"> 21 <li><a href="#card">Card</a></li> 22 <li><a href="#news">News</a></li> 23 <li><a href="#price">Price</a></li> 24 <li><a href="#access">Access</a></li> 25 <li><a href="#contact">Contact</a></li> 26 </ul> 27 </div> 28 </div> 29 </header> 30 <!-- End Header --> 31 <!-- Start Main Page --> 32 <section class="main-wrapper"> 33 <div class="container"> 34 <h1>一番伝えたいことを書く</h1> 35 <p>リードリードリード</p> 36 <a href="#" class="btn">お問い合わせ</a> 37 </div> 38 </section> 39 <!-- End Main Page --> 40 <script src="js/script.js"></script> 41</body> 42 43</html>
試したこと
sass導入手順を再度確認しましたが解決策が見つからずここで質問させていただきます。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。