Less入門とインストール

9988 ワード
less
クイックスタート
LessはCSS前処理言語で、CSS言語を拡張し、変数、混合(mixin)、関数などの機能を追加し、CSSをメンテナンスしやすくし、テーマの作成、拡張を容易にします.
Lessはノード、ブラウザ、Rhinoプラットフォームで実行できます.ネット上には、Lessソースのコンパイルを支援するサードパーティ製のツールがたくさんあります.
例:
@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } }

次のようにコンパイルされます.
.box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

Improve this section.
Lessの使用
Lessはnpmでコマンドラインで実行できます.ブラウザ上でスクリプトファイルとしてダウンロードします.あるいは広範なサードパーティツールに統合されています.使用法を参照してください.
インストール
サーバ側で最も容易なインストール方法は、npm(node.jsのパッケージマネージャ)を介して、次のようにします.
$ npm install -g less

コマンドラインの使用方法
Lessをインストールすると、次のようにコマンドラインでLessコンパイラを呼び出すことができます.
$ lessc styles.less

これにより、出力コンパイル後のCSSコードはstdoutになり、出力をファイルにリダイレクトできます.
$ lessc styles.less > styles.css

圧縮されたCSSを出力するには、-xオプションを追加します.より良い圧縮効果を得るためには、--clean-cssオプションでClean CSSを有効にすることもできます.
パラメータなしでlesscを実行すると、使用可能なすべてのオプションのリストがコマンドラインに出力されます.
コードでLessを呼び出す
以下のように、コードでLessコンパイラ(Nodeプラットフォーム)を呼び出すことができます.
var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, css) { console.log(css); });

出力は
.class { width: 2; }

アナライザとコンパイラを手動で呼び出すこともできます.
var parser = new(less.Parser); parser.parse('.class { width: (1 + 1) }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); });

コンフィギュレーション
コンパイラに複数のパラメータを渡すことができます.
var parser = new(less.Parser)({ paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less' // Specify a filename, for better error messages }); parser.parse('.class { width: (1 + 1) }', function (e, tree) { tree.toCSS({ // Minify CSS output compress: true }); });

Grunt
Lessはまた、grunt-contrib-lessプラグインを参照できる人気のあるGrunt構築ツールと統合されています.
サードパーティ製ツール
他のツールの詳細については、使用法節を参照してください.
クライアントの使用方法
ブラウザで走るjsは開発が非常に便利であるが,生産環境には推奨されない.
クライアントでLessを使用する.jsは最も容易な方法であり、開発段階では便利であるが、生産環境では性能と信頼性が非常に重要であり、nodeを使用することを提案する.jsまたは他のサードパーティツールがプリコンパイルされます.
では、始めましょう.ページに.lessスタイルシートのリンクを追加し、relのプロパティを「stylesheet/less」に設定します.
<link rel="stylesheet/less" type="text/css" href="styles.less" />

次に、ダウンロードjsは、<script></script>のラベルを介してページの<head>要素内に配置される.
<script src="less.js" type="text/javascript"></script>

ヒント
  • 必ずless.jsの前にスタイルシートをロードします.
  • 複数の.lessスタイルシートファイルがロードされると、各ファイルは個別にコンパイルされます.したがって、1つのファイルで定義された変数、mixin、またはネーミングスペースは、他のファイルにアクセスできません.

    • ブラウザ側設定パラメータ<script src="less.js"></script>より前にグローバルを定義lessのオブジェクトをLessとすることができる.js設定パラメータ:
    <!-- set options before less.js script --> <script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="less.js"></script>

    Improve this section.
    ブラウザ側のダウンロード
    ソースのダウンロード
    GitHubから最新のLessを直接ダウンロードします.jsソース.
    GitHubによる本プロジェクトのクローンまたはfork
    Bowerでインストール
    BowerでLessを取り付ける.jsプロジェクト.
    bower install less

    Less CDN加速
    CDN . 
    <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>


        ：http://less.bootcss.com/
    体験出力文字の中にどれだけの‘Aがあるか
    cコードの信号処理関数で共有原子オブジェクトにアクセスする