• sass

    制御構文

    2012/06/06

    Sassの機能、制御構文について。

    sass.png

    Sassではjavascriptなどでよく使う制御構文を使うことができます。


    @if(条件分岐)

    @for(繰り返し)

    @while(繰り返し)

    @each(繰り返し)


    @if

    「もし〜なら」という条件分岐。

    javascriptなどでよく使うif文と同じです。頭に@が付きます。

    @elseや@else ifを使ってさらに条件を増やすことができます。


    <書き方>
    @if 条件1{
        結果
      }@else if 条件2{
        結果
      }@else{
        結果
    }
    ・使える比較演算子

    == 等価 > 大なり
    != 否定 <= 以下
    < 小なり >=


    ・使える論理演算子

    and かつ
    or または
    not 否定



    <使用例>

    変数$pageを作って、
    「もし(@if) トップページなら、コンテンツのpaddingを10pxに、
    そうでなくて、もし(@else if) サブページ または(or) エンドページなら、コンテンツのpaddingを8pxに、
    そうでない場合(@else) コンテンツのpaddingは0にしてね!」
    という条件分岐を書いてみます。

    
    $page: top;
    
    .contents{
      @if $page==top{
      padding: 10px;
      }@else if $page==sub or $page==end{
      padding: 8px;
      }@else{
      padding: 0;
      }
    }
    
    

    <コンパイル結果>

    
    .contents{
      padding: 10px;
    }
    
    

    変数$pageにtopが宣言されていたので、.contentsのpaddingは10pxが出力されました!


     

    @for

    ある条件の中で1つずつカウントアップしながら何度も処理する、繰り返し文です。

    書き方は2つあります。

    <書き方1>
    @for $i from 開始値 to 終了値{
        処理
    }

    <書き方2>
    @for $i from 開始値 through 終了値{
        処理
    }

    終了値の指定方法にはtoとthroughがあります。

    to・・・指定された終了値の1つ前まで

    through・・・指定された終了値まで


    <使用例>

    1pxずつ足したクラスpaddingXを3回繰り返して出力してみます。

    
    @for $i from 1 through 3{
      .padding#{$i} {
        padding: #{$i}px;
      }
    }
    
    

    ※演算を行わず、そのまま出力したい数式は#{}で囲みます(インターポレーション)

    <コンパイル結果>

    
    .padding1{
      padding: 1px;
    }
    .padding2{
      padding: 2px;
    }
    .padding3{
      padding: 3px;
    }
    
    

     

    @while

    条件にあてはまる間ずっと繰り返し処理を行います。

    @forのように1ずつではなく、増え方をかえることができます。

    <書き方>

    @while 条件{
        処理
    }
    <使用例>

    5pxずつ足したクラスpaddingXを20までの間分繰り返して出力してみます。

    
    $i: 5;
    @while $i <= 20{
      .padding#{$i}{
        padding:#{$i}px;
      }
      $i: $i+5 //5ずつプラスしていく処理
    }
    
    

    <コンパイル結果>

    
    .padding5{
      padding: 5px;
    }
    .padding10{
      margin: 10px;
    }
    .padding15{
      padding: 15px;
    }
    .padding20{
      margin: 20px;
    }
    
    

    20までの間に4つのクラスpaddingXが出力されました!


     

    @each

    ・指定したリストが存在する間ずっと、繰り返し処理をおこないます。
    ・指定するリストは文字列も指定できます。

    <書き方>
    @each $i in 条件{
        処理
    }
    <使用例>

    
    @each $color in red, black, blue{ //カラーのリスト
      .color-#{$color}{
        color:#{$color};
      }
    }
    
    

    <コンパイル結果>

    
    .color-red{
      color:red;
    }
    .color-black{
      color:black;
    }
    .color-blue{
      color:blue;
    }
    
    

    用意したカラー分出力されました!


    なんだか難しそうな制御構文ですが、使いこなせればきっと便利・・・!

    私頑張る!

    タグ:Sass

この記事へのコメント

コメントを送る

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

back