LESSのヒントとツールを使った効果的な作業

前回のチュートリアルでは、ChrunchAppなどのアプリケーションを使用してコードをコンパイルすることによって、LESSを実用的な方法で使用する方法を学びました。今回は、LESS構文をコンパイルするときにパフォーマンスと生産性を向上させることができる便利なヒントをいくつか紹介します。現在のエディタで構文の強調表示を有効にし、自動コンパイラツールを使用してプリセットMixinを使用し、それらをすべて同期させることでデスクトップ/作業環境を設定します。.

さて、準備ができたら、始めましょう.

免責事項： 以下に説明するヒントは、Webデザイナーとしての私の日々の経験から得られたものです。そのため、さらに詳しく説明する前に、ヒントは一部のデザイナーには適しているが他のデザイナーには適していないことを説明します。 Web上で見つけた他のヒントと同じように。それにもかかわらず、私はあなたが以下の助言から役に立つ何かを享受することができると思います.

1.コードハイライト

前述のとおり、ChrunchAppを紹介しました。ただし、このアプリはすべてのWebデザイナーの好みではないかもしれません。それぞれのデザイナーは、自分が選んだコードエディタを含め、それぞれ独自の作業環境を持っているからです。.

別のコードエディタをインストールするのではなく、実際に現在のものを使用して構文の強調表示を有効にすることができます。そこで、この記事では、2つの有名なテキストエディタにLESSコードの強調表示を追加するためのヒントをいくつか紹介します。 崇高なテキスト2 そして メモ帳++.

崇高なテキスト2

このエディタは私がコードを作成するのを手助けするための現在の私の選択です。このアプリはWindows、Linux、およびOSXで利用可能ですので、あなたのOSが何であれ、あなたはまだこのヒントに従うことができるでしょう.

それでは、公式Webサイトからダウンロードして、このエディタを試してみましょう。次に、以下の指示を読んで、LESSカラーハイライトを有効にします。.

注意： 無料版は評価のみを目的としているため、ダウンロードする前にライセンスを読んでいることを確認してください.

パッケージコンソールをインストールする

まず、Sublime Text 2を開き、このメニューからコンソールを表示します。 表示>コンソールを表示

次に、次のコマンドラインをコピーしてコンソールに貼り付け、Enterキーを押してwBond.netからパッケージコントロールをインストールします。

urllib2、osをインポートします。 pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path（）; os.makedirs（ipp）でない場合os.path.exists（ipp）その他なし。 urllib2.install_opener（urllib2.build_opener（urllib2.ProxyHandler（）））; open（os.path.join（ipp、pf）、 'wb'）.write（urllib2.urlopen（ 'http://sublime.wbond.net/'+pf.replace（ "、'％20 '））） read（））; print 'Sublime Textを再起動してインストールを完了してください。'

この パッケージコンソール highlight-packageのインストールに役立ちます.

LESS強調パッケージのインストール

Sublime Text 2を再起動し、このメニューからコマンドパレットを表示させてください。 ツール>コマンドパレット. パッケージリストがすべて読み込まれるまで待ちます。それから、タイプしなさい パッケージをインストールする パッケージリポジトリの検索と読み込み.

次に、リポジトリリストからLESSパッケージを検索してEnterキーを押します。.

次の通知がステータスバーに表示されるまで、Sublime Text 2がパッケージをダウンロードしてインストールするのをしばらく待ちます。.

メニューへ 表示>構文, リストにLESSが表示されます。それはSublime Text 2が支持していることを意味します .もっと少なく そしてあなたのLESS構文にも適切な色の強調表示があるはずです.

メモ帳++

Notepad ++は無料のオープンソースのコードエディタで、その機能を拡張するための便利なプラグインが数多くあります。それはまた多くのウェブデザイナー/開発者、特にWindowsオペレーティングシステムを扱う人々によって広く使用されています。だから、私はそれのためのLESSテキストハイライトを追加するためのヒントも含めることにしました.

メモ帳にLESS-highlightをインストールする++

Notepad ++でLESSカラーハイライトを有効にするのはとても簡単です。.

このリンクから最初にNotepad ++用のLESSパッケージをダウンロードします（userDefineLang_LESS.xml）。それから、 表示>ユーザー定義ダイアログ.

下記のポップアップボックスが現れます。クリック インポート… ボタンをクリックしてダウンロードした場所を探します .xml ファイル。その後、メモ帳を再起動します。++.

あなたの.lessファイルを開き、言語メニューに行きます。 LESSが含まれているはずです。あなたのLESS構文にカラーハイライトを適用するためにそれを選択してください.

その他の資料

市場には他にもたくさんの編集者がいます。あなたが上記のエディタのどれも使わないならば、それで、ここで我々はあなたのために若干の役に立つリンクを含みます.

アドビドリームウィーバー

間違いなく、Dreamweaverには巨大なユーザーベースがあります。 MacとWindowsの両方で利用可能です。したがって、このエディタを使用する場合は、Adobe DreamWeaverでLESSハイライトをインストールするための優れたソースの1つがここにあります。.

コーダ

あなたがMacを使用しているなら、おそらくCodaを知っているでしょう、このエディタはMacユーザの間で最も人気のあるものの1つです。そして、これがLESSをCodaにインストールする方法です。.

ジーニー

Linuxユーザーの間で最も人気のあるコードエディタの1つです。私のオフィスの一部のLinux上で動作するコンピュータもGeanyを使用しています。あなたがそれを同様に使うならば、あなたはSuperUser.comでこの指示に従うことによってLESSハイライトを含めることができます

2.レスコンパイラ

LESSコンパイラが組み込まれているChrunchAppとは異なり、他のエディタはデフォルトでそれを持っていません。含める方法はいくつかありますが、一般ユーザーにとってはかなり技術的です。だから私が持っている最善の解決策は、次のツールを使ってコンパイルすることです。 WinLESS または LESS.app. WinLESSはWindows用に設計されたコンパイラですが、LESS.appはOSX用に構築されています.

これらのツールは、ファイルを保存してコードにエラーがある場合は直接報告するので、LESSコードを静的CSSに自動的に変換できます。さて、私はあなたにこのツールがいかに便利であるかをお見せしましょう：

まず、WinLESSをダウンロードしてインストールします.

[フォルダを追加]ボタンをクリックして、自分のディレクトリを置くディレクトリを探します。 .もっと少なく ファイル（私はあなたが既に少なくとも1つを作成したと思います）。追加したらWinLESSはすべてをスキャンして見つけます .もっと少なく ファイルをリストに表示します.

メニューへ ファイル>設定, そしてこれらのオプションがチェックされていることを確認してください。

保存時にファイルを自動的にコンパイルする
コンパイルが成功したらメッセージを表示する

他の場所に保存したい場合は、出力フォルダを設定することもできます。しかし、この例では、このオプションをそのままにします。これは、出力ファイルがと同じディレクトリに保存されることを意味します。 .もっと少なく ファイル.

あなたを開く .もっと少なく 追加したディレクトリからファイルを作成し、いくつか変更を加えて保存します。.

ファイルが正常にコンパイルされると、WinLESSから通知されます。 .CSS またはコードにエラーがある場合これにより、コードのコンパイルが完了するのを待たなくても、.css出力を直接確認できます。.

Macを使用している場合は、WinLESSと同じ機能を持つLESS.appを使用できます。.

プリセットミックスイン

現在のWebデザインでは、Gradient、Shadow、Border RadiusなどのCSS3プロパティを次のように使用します。

-webkit-border-radius：3ピクセル。 -moz-border-radius：3ピクセル。 border-radius：3ピクセル。

または

背景：-moz-linear-gradient（top、＃f0f9ff 0％、＃a1dbff 100％）;背景：-webkit-linear-gradient（トップ、＃f0f9ff 0％、＃a1dbff 100％）;背景：-o-linear-gradient（上、＃f0f9ff 0％、＃a1dbff 100％）。背景：-ms-linear-gradient（上、＃f0f9ff 0％、＃a1dbff 100％）;背景：線形勾配（上、＃f0f9ff 0％、＃a1dbff 100％）。

前回のチュートリアルでは、この構文を単純化するためにいくつかのMixinを作成しました。幸いなことに、Webデザインコミュニティの何人かの人々はこれらの有用なMixinをコンパイルする時間を割けるほど十分に寛大であるので、我々はそれを最初からコンパイルする必要はありません。.

そして、私のお気に入りの1つは、多くの便利なCSS3プリセットルールを含むLess Elementsです。したがって、退屈なベンダープレフィックスから作成するコードの行数を減らすことができます。.

すべての権利、今、上記のこれらすべてのヒントが本当にどのように役立つことができるか見てみましょう.

それらをすべてまとめる

この例では、単純なリンクボタンを作成します。まず、新しいHTML文書を作成して、次のマークアップを付けます。

 もっと少なく    私をクリック

を作成 styles.less メインのLESSスタイルシートとして、HTMLドキュメントと同じフォルダに保存し、そのフォルダをWinLESSに追加します。.

をインポート elements.less この構文を使用する前にダウンロードしました。

@import "elements.less";

これで、elements.lessから提供される任意のMixinを使用できます。 .勾配, .丸みを帯びた, そして .接して. Mixinsの名前は一目瞭然です。.

次に、以下のLESSルールをスタイルシートに入れます。そして、もう一度それを保存する

 display：inline-block;パディング：10px 20px。カラー：＃555。テキスト装飾：なし。 .bw-gradient（#eee、240、255）;に囲まれた。ぎこちなく＆：hover .bw-gradient（#eee、255、240）;

私たちの .もっと少なく ファイルはWinLESSに追加され、自動的にコンパイルされます。 .CSS. それでは結果を見てみましょう.

このボタンは必要な数よりも少ない行数で作成されているので、それほど悪くはありません。そして、これが実際に生成された静的CSSです。

 display：inline-block;パディング：10px 20px。カラー：＃555。テキスト装飾：なし。背景：#eeeeee;背景：-webkit-gradient（線形、左下、左上、カラーストップ（0、＃f0f0f0）、カラーストップ（1、#ffffff））;背景：-ms-linear-gradient（下、＃f0f0f0 0％、＃f0f0f0 100％）;背景：-moz-linear-gradient（中央下、＃f0f0f0 0％、#ffffff 100％）。 -webkit-border-radius：2ピクセル。 -moz-border-radius：2ピクセル。 border-radius：2ピクセル。 -moz-background-clip：パディング。 -webkit-background-clip：パディングボックス。 background-clip：パディングボックス。ボーダートップ：実線1px #eeeeee。左ボーダー：実線1px #eeeeee。右ボーダー：実線1px #eeeeee。ボーダーボトム：実線1px #eeeeee。 a：hover background：#eeeeee;背景：-webkit-gradient（線形、左下、左上、カラーストップ（0、＃fffff）、カラーストップ（1、＃f0f0f0））;背景：-ms-linear-gradient（下、#ffffff 0％、#ffffff 100％）。背景：-moz-linear-gradient（中央下、#ffffff 0％、＃f0f0f0 100％）。

要約すれば

これが、この記事で論じたことの概要です。

現在のエディタで構文の強調表示を有効にすることで、LESS構文を作成するためだけに追加のエディタをインストールする必要はありません。これにより、ディスク上のスペースやメモリを節約できます。.
また、前回のチュートリアルで行ったように、LESS.jsライブラリをダウンロードしてHTMLヘッドセクションにリンクする必要もありません。このようにして、私たちのHTML文書はきれいできれいなままです.
WinLESSやLESS.appなどのコンパイラツールを使用すると、静的CSS出力を即座に生成できます。そのため、構文に問題がある場合は、すぐに調べることができます。.
LESS Elementsのようなプリセットミックスインは私たちの親友です。面倒なCSS3プロパティをコンパイルするとき、本当に時間を節約できます。.