• sass

    導入〜基本操作

    2012/06/08

    Sassの導入と基本操作。※Macの人用です。

    sass.png

    Sassを利用する為にはRubyが必要です。

    MacはRubyがインストールされている為、Rubyのインストールは必要ありません。

    ※Windowsの場合はRubyのインストールからになります。

     

    まずはターミナルを起動

     

    1.Rubyの確認

    
    $ ruby -v
    
    

    ※OSのバージョンが10.7以降であれば、Ruby 1.8.7がプリインストールされているため、この作業は不要です。
    ※Ruby 1.8.7より低い場合は、Rubyをアップデート!


    2.RubyGemsを最新版にアップデート

    
    $ sudo gem update --system
    
    

    3.Sassのインストール

    
    $ sudo gem install sass
    
    

    なんかダダダ!って出てきます。

    インストールはこれで終わり!
    しかし!念のためインストールされたか確認しましょう!

    
    $ sass -v
    
    

    sass導入済みでupdateしたい時はこれ。

    
    $ sudo gem update sass
    
    

    これで準備は完了!!
    さっそくSassを使ってみましょう!



    基本操作


    作業ディレクトリ.scssファイル作成

    作業ディレクトリへ移動

    
    $ /Users/~
    
    

    監視する=Scssが更新されると自動でcssファイルを出力させる

    ・SCSSファイルのある場所、CSSを出力する場所を指定して監視

    
    $ sass --watch sass:css --style expanded
    
    

    ※sass:css = SCSSファイルのある場所:CSSを出力する場所


    ・フォルダ単位で監視

    
    $ sass --watch フォルダのパス
    
    

    ・出力されるCSSの書き出し方を設定できます。

     

    ・デフォルト(expanded)

    
    $ sass --watch sass:css --style expanded
    
    

    ↓出力結果

    
    .hoge{
    display:block;
    font-size:14px;
    }
    .hogehoge{
    display:block;
    font-size:14px;
    }
    
    

    ・1行にまとめる(compact)

    
    $ sass --watch sass:css --style compact
    
    

    ↓出力結果

    
    .hoge{display:block;font-size:14px;}
    .hogehoge{display:block;font-size:14px;}
    
    

    ・すべて圧縮(compressed)※コメントも削除

    
    $ sass --watch sass:css --style compressed
    
    

    ↓出力結果

    
    .hoge{display:block;font-size:14px;}.hogehoge{display:block;font-size:14px;}
    
    

    監視の終了は Ctrl + C


    【注意】

    Sassに記述ミスなどエラーがあると、CSSは正しく出力されません。
    監視状態でサクサクっとSassを書いて、いざブラウザで確認すると。
    スタイルが全く効いてない!!
    さらに、ターミナルを見るとエラーエラーエラーの文字が・・・!!
    さらにさらに、出力されたCSSファイルを見るとわけのわからん英語がズラッと・・・!!!!!

    ・・なんてことはよくありますが、落ち着いてエラーの文を見ましょう。
    何行目の何がおかしいよ!ってちゃんと書いてあります!
    書きなおしたあと、正常にコンパイルされているのを見ると、なんともホッとします。
    このホッと感を是非体験してください。

    タグ:Sass

この記事へのコメント

コメントを送る

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

back