• sass

    データ型を調べる

    2013/01/16

    関数とか使う前に、まずデータ型を理解する。

    sass.png

     

    scssファイルにかかれた値にはデータ型が定義されています。

    データ型を使って条件分岐や関数を使う為に、しっかり理解しましょう!

     

    ・データ型の種類

    number 数値 1, 50px, 100%(単位も含む)
    color #fff, rgb(0,0,0), red
    boolean 真偽 true, false
    string 文字列型 テキスト, fff
    list リスト 1px solid #fff , 10px 20px
    null ヌル 値が空の状態

    値はこのように色々なデータ型にわけられます。


    数値とか色とか真偽とかはわかりやすいと思うんですが、
    文字列とリストがむむむ・・!となりやすいので(私が)
    データ型を調べてみます。


    データ型を調べるにはこの関数を使います。

    
    type-of()
    
    

    例えばこれをこのように入れればデータ型が出力されますね。

    
    hoge:after{
      content: "#{type-of(調べる値)}型です。";
    }
    
    

    ※#{}インターポレーションで囲むのを忘れずに!
    囲まないとテキストで出ちゃうからね!


     

    よし!これで色々調べてみる!!


    ・00 150は?

     


    ・50px + 1は?

     


    ・1px solid #f00は?

     


    ・colorは?

     


    ・purpleは?

     



    fmfmなるほどー!
    これを使って条件分岐とかできますね!

    こういうのって、色んなの入れて調べたくなりますよね!\(^o^)/

    タグ:Sass

この記事へのコメント

コメントを送る

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

back