Sassの記法について

Question

progateさんのヘッダーを使って質問させていただきます。

header {
    @include container;
    height: 65px;
    background-color: rgba(34,49,52,0.9);
    position: fixed;
    z-index: 10;
    >.header-left {
        float: left;
        img {
            width: 124px;
            margin-top: 20px;
        }
    }
    >.header-right {
        float: right;
        margin-right: -25px;
        a {
            display: block;
            float: left;
            color: white;
            padding: 0 25px;
            line-height: 65px;
            &:hover {
                transition: all 0.3s;
                background-color: rgba(255, 255, 255, 0.3);
            }
        }
    }
}

現在このようにひとまとめにして書いています。（こちらのほうがまとまって見えるので）
ですがCSSにコンパイルすると

header {
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 65px;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  z-index: 10;
}

header > .header-left {
  float: left;
}

header > .header-left img {
  width: 124px;
  margin-top: 20px;
}

header > .header-right {
  float: right;
  margin-right: -25px;
}

header > .header-right a {
  display: block;
  float: left;
  color: white;
  padding: 0 25px;
  line-height: 65px;
}

header > .header-right a:hover {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: rgba(255, 255, 255, 0.3);
}

header > ◯◯
といった表記が全てに入りますが、実際の現場でこれが仇となることはありますでしょうか？

Answer 1

header > ◯◯

といった表記が全てに入りますが

Sassは、いちいちそれを手書きしなくて済むようにするための言語です。「これが仇となる」ような場面であれば、元のコードを適切に書き直してください。

Comments

[965]

申し訳ございません、当方全くの初心者でして、どのような問題にぶつかりどのような不具合が起こるか全く想像がつかない、割に効率よく勉強したいと思ってしまいこのような質問に至ってしまいました。
回答ありがとうございました

Answer 2

初期構築する人がSassを使いこなせて、
保守運用する人がSassを使えない (技術不足、資料提供が無い、などの理由により)
というシチュエーションでは、
どのファイルを編集していいかわからない、Sassの書き方がわからない、という問題が生じるかもしれません。

初期構築する人が継続して保守運用する場合や、
Sassの設定方法などをきちんとドキュメント化できるのであれば、
仇となることは少ないのではないかと思います。

Comments

[965]

回答ありがとうございます、とりあえずこの形で進めていこうと思います。