迷い人

日々勉強。勉強の先に何か見つかるといいなぁ

Sassでちょっとつまったところ

CSS html scss

SCSSを使っていて、ちょっとつまったのでメモを残しておきます。

 

 

 

うまく行かないコード

 

以下のようなHTML、SCSS（CSS）を書きました。

 

※SCSSはLive Sass CompilerでCSSに変換しています。

 

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hamburger_Menu</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul class="parents">
      <li class="child"><a href="">トップ</a></li>
      <li class="child"><a href="">概要</a></li>
      <li class="child"><a href="">お問い合わせ</a></li>
    </ul>
    <ul class="parents red">
      <li class="child"><a href="">トップ</a></li>
      <li class="child"><a href="">概要</a></li>
      <li class="child"><a href="">お問い合わせ</a></li>
    </ul>
</html>

 

SCSS

@mixin child {
  display: inline-block;
    padding: 30px 20px;
    a {
      text-decoration: none;
      color: white;
    }
}
body {
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
}
.parents {
  text-align: center;
  background-color: black;
  .child {
    @include child;
  }
  .red {
    text-align: center;
    background-color: red;
    .child {
      @include child;
    }
  }
}

 

CSS

body {
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

.parents {
  text-align: center;
  background-color: black;
}

.parents .child {
  display: inline-block;
  padding: 30px 20px;
}

.parents .child a {
  text-decoration: none;
  color: white;
}

.parents .red {
  text-align: center;
  background-color: red;
}

.parents .red .child {
  display: inline-block;
  padding: 30px 20px;
}

.parents .red .child a {
  text-decoration: none;
  color: white;
}

 

JavaScriptでclass名「red」を付与したら、ナビゲーションの背景色が変更される事を想定して、SCSSを書きました。

 

ただ、思うような結果になりませんでした。

 

f:id:oyaoya1123:20200301165748p:plain

 

ご覧のとおり、背景色が黒のままです。

 

そこで以下のように変更したらうまく行きました。試行錯誤した過程も含めてコードを示します。

 

うまく行ったコード（経緯含む）

 

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hamburger_Menu</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <ul class="parents">
      <li class="child"><a href="">トップ</a></li>
      <li class="child"><a href="">概要</a></li>
      <li class="child"><a href="">お問い合わせ</a></li>
    </ul>
    <ul class="parents red">
      <li class="child"><a href="">トップ</a></li>
      <li class="child"><a href="">概要</a></li>
      <li class="child"><a href="">お問い合わせ</a></li>
    </ul>
    <ul class="parents blue">
      <li class="child"><a href="">トップ</a></li>
      <li class="child"><a href="">概要</a></li>
      <li class="child"><a href="">お問い合わせ</a></li>
    </ul>
    <ul class="parents">
      <div class="red">
        <li class="child"><a href="">トップ</a></li>
        <li class="child"><a href="">概要</a></li>
        <li class="child"><a href="">お問い合わせ</a></li>
      </div>
    </ul>
  </body>
</html>

 

SCSS

@mixin child {
  display: inline-block;
    padding: 30px 20px;
    a {
      text-decoration: none;
      color: white;
    }
}
body {
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
}
.parents {
  text-align: center;
  background-color: black;
  .child {
    @include child;
  }
  .red {
    text-align: center;
    background-color: red;
    .child {
      @include child;
    }
  }
}
.parents.blue {
  text-align: center;
  background-color: blue;
  .child {
    @include child;
  }
}

 

CSS

body {
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

.parents {
  text-align: center;
  background-color: black;
}

.parents .child {
  display: inline-block;
  padding: 30px 20px;
}

.parents .child a {
  text-decoration: none;
  color: white;
}

.parents .red {
  text-align: center;
  background-color: red;
}

.parents .red .child {
  display: inline-block;
  padding: 30px 20px;
}

.parents .red .child a {
  text-decoration: none;
  color: white;
}

.parents.blue {
  text-align: center;
  background-color: blue;
}

.parents.blue .child {
  display: inline-block;
  padding: 30px 20px;
}

.parents.blue .child a {
  text-decoration: none;
  color: white;
}

 

ちょっと長いですが、こう記述する事で以下のような結果となります。

 

f:id:oyaoya1123:20200301170328p:plain

 

きちんと背景色が青と赤に変わりました。

 

結局どういう事？

今回何がわかったかというと、CSSで以下の２つの違いがわかった。

 

CSS

.parents .red {
}

.parents.blue {
}

 

.parentsと.redの間に半角スペースがあるのがポイント。

.parentsと.blueの間に半角スペースはありません。

 

これらのCSSに対応したHTMLの書き方は以下のとおり。

 

<div class="parents">
    <div class="red">
        ・・・
    </div>
</div>

<div class="parents blue">
    ・・・
</div>

 

JavaScriptでよく使う形式は<div class="parents blue">の方だと思います。

 

最初、CSSをredの書き方にしていたので思ったように動作しないという話でした。