sassのネスト

sassはネストして記述することができる。
セレクタをネストすることもできるし、プロパティもネストすることができる

まずはセレクタのネスト。

#main {
    margin: 10px;
    p {
        padding: 10px 5px;
        .red {
            color: #D22B4C;
        }
    }
}

これをコンパイルすると以下のようになる。

#main {
  margin: 10px;
}
#main p {
  padding: 10px 5px;
}
#main p .red {
  color: #D22B4C;
}

次にプロパティのネスト

.item {
    border:{
        top: 5px solid #ccc;
        bottom: 1px solid #fff;
    }
}

これをコンパイルする。

.item {
  border-top: 5px solid #ccc;
  border-bottom: 1px solid #fff;
}

プロパティのネストとか便利なんですかね。
いまいち良くわかりません。

個人的にはあまり利用しない気がします。

スポンサードリンク

RSS購読のススメ

RSS

定期的に読んでいただけるかたはRSS登録しておくと便利です。RSS登録はこちら!!

びーおーぷんどっとねっとのRSS登録

Twitterでも情報をつぶやいているので、フォローしてみるといいかもしれません。

コメントを残す

サブコンテンツ

Profile

twitter

google+
@beopener12on Google+

Facebook

サイト内検索

記事を検索したいときはここにキーワードを入れて検索ボタンをクリックすれば見つかるかも・・・

スポンサードリンク

おすすめ

このページの先頭へ