第3章これだけはマスターしたいSassの基本機能

3-1 ルールのネスト（Nested Rules）

ネストの基本

<div id="main">
    <section>
        <h1>見出し</h1>
        <p>段落</p>
        <p class="notes">注意書き</p>
        <ul>
            <li>リスト</li>
        </ul>
    </section>
    <section>
        <h1>見出し</h1>
        <p>段落</p>
    </section>
<!-- / #main --></div>

#main section {
  margin-bottom: 50px;
}
#main section h1 {
  font-size: 140%;
}
#main section ul, #main section p {
  margin-bottom: 1.5em;
}
#main section p.notes {
  color: red;
}

#main {
    section {
        margin-bottom: 50px;
        h1 {
            font-size: 140%;
        }
        p, ul {
            margin-bottom: 1.5em;
        }
        p.notes {
            color: red;
        }
    }
}

子孫セレクタ以外のセレクタを使うには

#main {
    section {
        + section {
            margin-top: 50px;
        }
        > h1 {
            font-size: 140%;
        }
    }
}

#main section + section {
  margin-top: 50px;
}
#main section > h1 {
  font-size: 140%;
}

#main {
    section + section {
        margin-top: 50px;
    }
    section > h1 {
        font-size: 140%;
    }
}

@media のネスト

#main {
    float: left;
    width: 640px;
    @media screen and (max-width: 640px) {
        float: none;
        width: auto;
    }
}

#main {
  float: left;
  width: 640px;
}
@media screen and (max-width: 640px) {
  #main {
    float: none;
    width: auto;
  }
}