LessのコンパイルができるソフトPreprosを使ってみよう!

2016/06/02

8_1
lessのコンパイルが必要になり調べていたらPreprosという便利なソフトがありました。Preprosの使い方を検索するとSassと合わせた説明が多くあったので、今回は私が必要としていたLessのコンパイルにスポットを当てて使い方をご紹介します!

Preprosniについて

PreprosはWindos・Mac・Linux用に提供されているGUIコンパイラです。
PCにRubyやSassなどをインストールしなくてもコンパイルできたり、FTP接続してファイルのアップロードできたり、ローカルサーバーを内蔵していたりと便利な機能があります!
 

そして、対応言語もたくさんあります!

・Sass

・Less

・Jquery

・Compass

・LiveScript

・Slim …etc

ダウンロード

まずはpreprosのサイトからダウンロードをします。
無料お試しと有料$29がありますが、どちらもLessのコンパイルはできるので最初は無料お試しでいいと思います。
ダウンロードページはこちら
 

8_2
使用しているOSから選んでダウンロードしてください。

起動

 
8_3
起動するとこんな画面が開くので無料お試しで使用する場合はContineTrialをクリックして先へ進みます。
 
 

8_4
初期画面はこんな感じでPROJECTSのところにファイルをドロップします。
 
 

8_5
ファイルをドロップすると一覧で表示されます!

コンパイル

コンパイルしたいファイルを選択します。今回はLessなので.lessのファイルを選びます。
 

8_6
ファイルを選ぶと右側にコンパイルメニューが出るのでProcessFileをクリックします。
 
 

8_7
これで同じディレクトリ内にコンパイルされた.cssのファイルが出力されます!

コンパイル設定

 

8_8
ファイルを選んで右側に表示されるコンパイルメニューで設定することができます。その中でも私がよく使いそうなのはこの3つでした!

OUTPUT PATH

ここから.cssファイルを出力するディレクトリを選択することができるのでcssディレクトリをつくって出力先にしておくと便利です。

Auto Compile

.lessファイルを編集して更新すると自動でコンパイルを出力してくれます。

Compress CSS

これにチェックを入れると改行がなく圧縮された.cssファイルが出力されます。

使っていると無料お試しで続けるか有料にするかのポップアップが表示されますが、これだけ機能的で使いやすさも良いソフトなので$29の価値はあると思います。
頻繁に使うようであれば有料に切り替えてみてはいかがでしょうか!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend