cssが10倍効率よく記述できるLESSの使い方

こんにちわ。

 

みなさん「LESS」をご存知でしょうか？

ウェブ業界は日進月歩で日々便利な技術がどんどん増えていっています。

今回は、CSSをより便利に使うことができるLESS(レス)についてご紹介致します。

 

LESS（レス）とはなに？LESSのいいところ

LESSってなんなの？と、初耳な人もいるでしょう。

今までCSSで記述していたのに今更変えるのって・・・という方は考え直してください！

実はLESSはCSSを拡張したもので、導入したとしてもCSSのみでも問題ありません。

LESSは専用のLESSファイルを作り、それをコンパイル(プログラムが分析)し、CSSファイルを作るといった技術になります。

LESSファイルは一般的にCSSのファイル名そのままの拡張子が「.less」のファイルを作ります。

コンパイルすることにより、CSSではよくある文法エラーなどもチェックすることができるので、より完璧なCSSを記載できることも利点の一つ。

さらに、自動圧縮もできるのでファイルサイズが軽くなります。

 

LESSの導入方法

windowsではWinLESSがオススメです。

Macの場合はLESS.appなどもあります。（自分の場合は使ったことがありませんが・・・）

アプリをインストールすると、そのままLESSを利用することができます。

ほぼ同じ使い方になりますが、設定として、

1. 生成したいcssファイルと同名の拡張しが「.less」ファイルを生成する
2. インストールしたアプリにて管理するLESSファイルを指定する
3. LESSファイルを更新すると、自動コンパイルされCSSファイルが生成される。
4. HTMLでは生成されたCSSを読み込む

といった流れになります。

 

DreamwaverでLESSファイルを認識させる

僕の場合は、PhpStomeを利用しており、LESS専用のプラグインもあるため導入が楽でしたが、

Dreamwaverでは少し設定が必要になります。

 

LESSファイルを認識させる

初期では.lessの拡張子はDreamwaverでは認識できません。

そこでアプリ内でまずファイルを認識できるように変更致します。

 

Windowsの場合

C:¥Users¥<ユーザー名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS6¥ja_JP¥configuration¥Extensions.txt

Macの場合

/Users/<ユーザー名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/Extensions.txt

 

CSS:Style Sheets → CSS,SCSS,LESS:Style Sheets
に変更。

 

コードヒントを使えるようにする

Windowsの場合

C:¥Users¥<ユーザー名>¥AppData¥Roaming¥Adobe¥Dreamweaver CS6¥ja_JP¥Configuration¥DocumentTypes¥MMDocumentTypes.xml

Macの場合

/Users/<ユーザー名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/DocumentTypes/MMDocumentTypes.xml

<documenttype id=”CSS” internaltype=”Text” winfileextension=”css” macfileextension=”css” file=”Default.css” writebyteordermark=”false” mimetype=”text/css” >

↓

<documenttype id=”CSS” internaltype=”Text” winfileextension=”css,scss,less” macfileextension=”css,scss,less” file=”Default.css” writebyteordermark=”false” mimetype=”text/css” >

に変更。

 

参考：DWでSASSやLESSをCSSと同じ扱いにするための設定

 

Dreamewaverのバージョンによってファイルは変わります。

最近のウィンドウズの場合は、パーミッションの関係がかなりきつくなっているため、

変更されない場合、デスクトップに一度コピーしてから変更し、上書きしてみてください。

 

次回は、LESSの具体的な記述方法をご説明します。