【Sassを覚えよう！Vol.8】ネストをもうちょい使いこなす

Vol.4のSassの基本的な記述方法で書いた「ルールのネスト」ですが、もうちょっと詳しい使い方なんぞを書こうかなと思ってる次第です。 ネストのおさらい 軽くおさらいです。 次のように、通常のCSSでは出来ない入れ子による記述が出来るのがネストです。 #main { width: 600px; p { margin-bottom: 1.5em; } } これで、コピペを都度しないでHTMLの構造に沿った感じで書いていけるので、構造が把握しやすくなったりします。 プロパティをネストする ネストはセレクタの他に、プロパティでも使うことが可能です。 .sample { background: { repeat: no-repeat; position: right top; color: #666; } } これだと、ショートハンドで普通に書いた方が良さそうですが、ショートハンドを利用しつつ入れ

[hama_shun]

border のネスト便利そう！