Less とコンパイル ツールの紹介_html/css_WEB-ITnose

LESSCSS とは

LESSCSS は、CSS 前処理言語の一種である動的スタイル言語であり、CSS に似た構文を使用し、変数、継承、操作、関数などの CSS 動的言語機能を提供します。 CSS の記述と保守が容易になります。

LESSCSS は、ブラウザ、デスクトップ クライアント、サーバーなどの複数の言語と環境で使用できます。

言語機能のクイックプレビュー:

変数:

変数を使用すると、一連の一般的なスタイルを個別に定義し、必要に応じて呼び出すことができます。したがって、全体的なスタイルを調整する場合、数行のコードを変更するだけで済む場合があります。

LESS ソース コード:

@color: #4D926F;#header {    color: @color;}h2 {    color: @color;}

コンパイルされた CSS:

#header {    color: #4D926F;}h2 {    color: #4D926F;}

Mixins

Mixins は、定義されたクラス A を別のクラス B に簡単に導入でき、それによって単純にクラス B を実装します。クラス A のすべてのプロパティを継承します。関数を使用するのと同じように、パラメーターを使用して呼び出すこともできます。

LESS ソース コード:

.rounded-corners (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    -ms-border-radius: @radius;    -o-border-radius: @radius;    border-radius: @radius;}#header {    .rounded-corners;}#footer {    .rounded-corners(10px);}

コンパイルされた CSS:

#header {    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    -ms-border-radius: 5px;    -o-border-radius: 5px;    border-radius: 5px;}#footer {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    -ms-border-radius: 10px;    -o-border-radius: 10px;    border-radius: 10px;}

ネスト

継承を実現するために 1 つのセレクター内に別のセレクターをネストすることができ、コードの量が大幅に削減され、コードがより明確になります。

LESS ソース コード:

#header {    h1 {        font-size: 26px;        font-weight: bold;    }    p {        font-size: 12px;        a {            text-decoration: none;            &:hover {                border-width: 1px            }        }    }}

コンパイルされた CSS:

#header h1 {    font-size: 26px;    font-weight: bold;}#header p {    font-size: 12px;}#header p a {    text-decoration: none;}#header p a:hover {    border-width: 1px;}

関数と演算

演算では、属性値と色に対する演算を実行できます。属性値間の複雑な関係を実装します。 LESS の関数は JavaScript コードにマップされているため、必要に応じてプロパティ値を操作できます。

LESS ソース コード:

the-border: 1px;@base-color: #111;@red:        #842210;#header {    color: (@base-color * 3);    border-left: @the-border;    border-right: (@the-border * 2);}#footer {    color: (@base-color + #003300);    border-color: desaturate(@red, 10%);}

コンパイルされた CSS:

#header {    color: #333;    border-left: 1px;    border-right: 2px;}#footer {    color: #114411;    border-color: #7d2717;}

その他の手順

詳しい構文機能については、言語ドキュメントを参照してください

すぐに始めましょう

LESSCSS の使用は非常に簡単です。まず、使用します最も一般的に使用されるコード エディターを使用して、LESSCSS の構文規則に従って .less ファイルを作成します。次に、コンパイル ツールを使用してそれを .css にコンパイルし、最後にページにインポートします。

GUI コンパイル ツール

便宜上、初心者は .less ファイルをコンパイルするために GUI コンパイル ツールを使用することをお勧めします。 以下にいくつかのオプションの GUI コンパイル ツールを示します:

1.koala (Win/Mac/Linux)

中国人が開発したLESSCSS/SASSコンパイルツール。ダウンロード アドレス: http://koala-app.com/index-zh.html 無効な場合は、ここをクリックして Baidu Cloud Disk からダウンロードできます。

koala を選ぶ 7 つの理由:

1. 多言語サポート: Less、Sass、CoffeeScript、Compass Framework をサポートします。
2. リアルタイム コンパイル: ファイルを監視し、ファイルが変更されると自動的にコンパイルを実行します。これはすべて手動操作なしでバックグラウンドで実行されます。
3. コンパイル オプション: ファイルのコンパイル オプションを一律に設定することも、特定のファイルのコンパイル オプションを個別に設定することもできます。
4. 強力なファイル右クリック機能: ファイル要素を右クリックして、一般的に使用される 6 つの機能 (ファイルを開く、ファイル ディレクトリを開く、出力ファイル ディレクトリを開く、出力ファイル ディレクトリの設定、コンパイル、削除) を操作します。
5. エラー プロンプト: コンパイル中に構文エラーが発生した場合、開発者がコード エラーの場所を見つけやすくするために、koala は右下隅にエラー メッセージをポップアップ表示します。
6. クロスプラットフォーム: Windows、Linux、Mac はすべて完璧に実行できます。
7. 無料と責任: Koala は完全に無料であり、作者は非常に責任を負います。質問がある場合は、作者に直接コメントを送信することができ、通常は次のバージョンで解決されます。

その利点を理解した後、そのインターフェイスに慣れてみましょう。これが実際にそれを選んだ理由の 1 つです。

シンプルで美しいパネル

上の 4 つの数字は 4 つの領域に対応しています:

最初の領域: 最初のボタンはプロジェクトを追加するために使用され、2 番目のボタンはコンパイルされたファイルのエラーを開きますヒント、3 番目のボタンは koala を設定するためのもので、すべてのファイルのデフォルトのコンパイルと出力モード、フィルタリングが必要なファイル、インターフェース言語 (中国語/英語) などを設定できます。もちろん、koala の現在のバージョン番号や作成者などの情報も含まれます。

2 番目の領域: プロジェクト領域。プロジェクトをこの領域に直接ドラッグできます。

第四区域：设置文件编译的选项，这个区域得选中第三个区域的某个需要编译的文件才会出现。以sass为例，第一个选项表示是否启用动态编译；第二组 表示是否启用这四个功能，我这边为了方便调试所以启用debug info，当然如果你使用compass那就得启用compass；第三组表示输出的css格式，分为四 种：nested，compressed，compact，expanded；最后一个compile按钮可以手动编译。

既然熟悉了界面，我们就实际使用下吧，步骤走起：

简单的使用步骤

第一步：首先点击我们第一区域的那个齿轮按钮，设置下默认文件的编译方式，并把界面语言设置为中文。

第二步：添加我们要编译的项目文件，可通过第一区域的加号那个按钮添加，也可以直接将项目拖到第二个project区域。

第三步：单击我们需要编译的文件，出现第四区域设置下该文件具体的编译方式，如果没什么特别的，直接用默认设置的就ok，如果不需要动态编译，直接勾掉“即时编译”那个checkbox，其余的按照上面说的操作。

第四步：右键单击需要编译的文件，出现我们常用的几个操作：打开文件，打开文件目录，打开输出文件目录，设置输出文件目录，编译，删除。一般这里我们需要设置下我们输出文件的目录。

第五步：如果你的文件既有less，sass还有coffee，那么就最好有必须点击下面的过滤条件，选择你要动态编译的文件，不然一锅煮头都大了。

2.Codekit(Mac)

一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/

3.WinLess(Win)

一款LESS编译软件。下载地址http://winless.org/，如果无效，点击这儿百度云盘下载。

winless使用步骤：

a.下载工具 WinLess，然后点击安装.

b.建立一个文件夹，比如 MyLessTest，并在其中建立子文件夹 less 和 css

MyLessTest
--less
--css

c.打开 WinLess，如下图，点击 Add folder 按钮，将刚才建立的 MyLessTest 添加进去（注意：不是添加 less 文件夹，而是它的上层目录 MyLessTest，方便将结果输出到 less 的同级目录 css）

d.WinLess 右侧会出现所有的 less 文件（如果没有出现，请点击“Refresh”按钮进行刷新），以及输出的路径(output file)。

e.选中需要编译的文件，比如 “bootstrap.less”（注意：请不要全选，在这里，其他一些文件只是被 bootstrap.less 引用而已），点击 “Compile” 按钮开始编译。然后，请打开 less 的同级目录 css 查看结果。

4.SimpleLess(Win/Mac/Linux)

一款LESS编译软件。下载地址http://wearekiss.com/simpless

Node.js库

LESSCSS官方有一款基于Node.js的库，用于编译.less文件。

使用时，首先全局安装less（部分系统下可能需要在前面加上sudo切换为超级管理员权限）：

npm install -g less

接下来就可以使用lessc来编译.less文件了：

lessc example/example.less example/example.css

更多选项可以直接运行lessc查看说明。

浏览器端使用

LESSCSS也可以不经编译，直接在浏览器端使用。

使用方法：

1. 下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。

2. 在页面中引入.less文件

<link rel="stylesheet/less" href="example.less" />

需要注意rel属性的值是stylesheet/less，而不是stylesheet。

　　3.引入第1步下载的.js文件

<script src="lesscss-1.4.0.min.js"></script>

需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。

还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。

参考地址：http://www.1024i.com/demo/less/

http://www.cnblogs.com/mrhgw/p/4535429.html