• sass

    ネスト(入れ子)

    2012/07/30

    Sassの機能、ネスト(入れ子)について

    sass.png

    Sassではセレクタをネスト(入れ子)して記述することができます。


    例えば

    
    div{
      position:relative;
    
      p{
        position:absolute;
        top:0;
        left:0
    
        span{
          color:#000;
        }
      }
    }
    
    

    出力結果↓

    
    div{
      position:relative;
    }
    div p{
      position:absolute;
      top:0;
      left:0
    }
    div p span{
      color:#000;
    }
    
    

    このように、ネストして記述することで深い階層になっても親子関係がわかりやすいですね!



    子セレクタや、隣接兄弟セレクタを指定したい場合はこのようにかきます。

    
    div{
      position:relative;
      
      >p{
      position:absolute;
      top:0;
      left:0
      
        +span{
        color:#000;
        }
      }
    }
    
    

    出力結果↓

    
    div{
      position:relative;
    }
    div >p{
      position:absolute;
      top:0;
      left:0
    }  
    div >p +span{
      color:#000;
    }
    
    

     

    上記2つの出力結果を見るとわかりますが、ネストされた親子関係にはスペースが入って出力されます。

    スペースを入れずに出力したい場合は&を使います。

    &をセレクタの前に書くことで親セレクタを参照し、スペースをはさまず出力されます。

     

    
    a{
      &:link{
      color:#f90;
      }
      &:hover{
      color:#000;
      }
      &:visited{
      color:#999;
      }
    }
    
    .box{
      width:200px;
      height:200px;
    
      &.red{
      background:#f00;
      }
    }
    
    

    コンパイル結果

    
    a:link{
      color:#f90;
    }
    a:hover{
      color:#000;
    }
    a:visited{
      color:#999;
    }
    
    .box{
      width:200px;
      height:200px;
    }
    .box.red{
      background:#f00;
    }
    
    

    ほら!ね!



    カンマを使って複数のセレクタに同じスタイルを指定する場合。
    例えばこういう時。

    
    div p span,
    div p strong{
      color:#000;
    }
    
    

    これをネストする場合はこのように記述します。

    
    div{
      p{
        span,strong{
          color:#000;
        }
      }
    }
    
    

    ネストを使うことで記述が減ったり見やすくなったりしますが、使いすぎには注意です。

    一見スッキリ見えるネストでも、出力されたCSSの長さを見てびっくり・・・!なんてことも。
    ネストするのは○階層まで!など、ルールを決めて使うといいかもしれません。

    タグ:Sass

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back