• sass

    実践まとめ①

    2012/10/05

    環境の準備〜開始まで。

    compass.png

    Macの人向け、さらに独自のやり方になりますが

    私が実際に作業する時の手順についてまとめてかいていこうと思います。

     

    まずは環境の準備

    ・sassのインストール

    【Sass】導入〜基本操作

     

    ・compassのインストール

    【Sass】Compassの導入

     

    ・Dreamweaverでscssファイルを編集できるようにする

    【Sass】Dreamweaverの設定


     

    作業を開始する前に・・

     

    ・作業ディレクトリに移動する

    
    $ cd 作業ディレクトリまでのパス
    
    

    ・compassを導入する

    
    $ compass create
    
    

    ・compassの設定を行う

    【Sass】Compass設定ファイル(config.rb)

     

    私はこのように設定しています。(黄色枠内が変更した箇所)

    rb.png

    <設定内容>

    ・scssファイルと同じディレクトリにcssファイルが生成される

    ・出力方法はexpanded(一般的なcss構造)

    ・(出力元ファイルの)コメントあり

     

     

    最終的には変更しますが、作業中はこの設定にしていると楽です!

     

    ・compass導入時にできたファイルやフォルダを整理する

    compassを導入すると、自動で

    「sass」フォルダ、「stylesheet」フォルダ、「ie.scss」「print.scss」「screen」が作成されます。


    これを使用してもいいのですが、私は全部削除して、このような構造にしています。

    folda.png




    作業開始!


    ・compassで監視する

    
    $ compass watch
    
    

     

    まとめ②に続く。

    タグ:まとめ , Compass , Sass

この記事へのコメント

コメントを送る

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

back