• sass

    演算

    2012/07/30

    Sassの機能、演算について。

    sass.png

    Sassでは演算子を使って計算することができます。


    ・使える演算子

    + 加算 数値、色、テキストに使用可
    - 減算 数値、色に使用可
    * 乗算 数値、色に使用可
    / 除算 数値、色に使用可
    % 余り 数値、色に使用可

     

    例えば

    
    width:100px + 5px;
    
    

    出力結果↓

    
    width: 105px;
    
    

    このように計算できるわけです!


    演算子の注意点としては以下があります。


    ・-を使用する場合は演算子のうしろにスペースを入れる。
    これは-10px等マイナスと区別する為です。

    
    width: 100px - 10px;
    
    

    出力結果↓

    
    width: 90px;
    
    

     

    ・/を使用する場合は()の中に記述する。(単体使用の場合)
    これはフォントの一括指定等する場合の/と区別する為です。

    
    width: (100px / 10px);
    
    

    出力結果↓

    
    width: 10px;
    
    

     

    変数と一緒に使用する場合、または演算子とあわせて使われた場合は()はいりません。

    
    $width: 100px;
    width: $width / 10px;
    height: 100px / 20px - 5px;
    
    

    出力結果↓

    
    width: 10px;
    height: 45px;
    
    

     

    +演算子では、テキストの結合もできます。

    
    content:"こんに" + "ちは" + "!";
    
    

    出力結果↓

    
    content:"こんにちは!";
    
    


    インターポレーション

    演算を行わず、数式として出力したい場合はインターポレーション#{}で囲みます。

     

    たとえばこんな時。

     

    
    $font-size: 14px;
    font: $font-size / 2 ;
    
    

    これは、font-size: 14px / line-height: 2の一括指定になりますが、

    変数と/演算子が一緒に使用されているため、計算されてしまいます。

     

    こんな出力結果に・・・↓

    
    font: 7px;
    
    

    そんな時にインターポレーションです(キリッ

    
    $font-size: 14px;
    font: #{$font-size} / 2 ;
    
    

    こう#{}で囲むことで、その箇所を計算せずに出力してくれます。

    出力結果↓

    
    font: 14px / 2;
    
    

    また。逆の使い方もあります。

    演算できない場所で演算したい場合です。

    
    content: "横幅は#{ 900 - 20 }pxです";
    
    

    このようにテキスト内で計算を行いたい場合も、インターポレーション(キリッ。

    出力結果↓

    
    content: "横幅は880pxです";
    
    



     

    タグ:Sass

この記事へのコメント

コメントを送る

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

back