LessCSSでユーザー定義関数？

Question

私は最近、LessCSSに入ってしまいました。私は大きな制限であると感じていることにぶち当たっていますし、これを行う方法があるかどうか疑問に思っていましたか？私はSassがユーザー定義の関数を許可しているが、LessCSSは同じことをするだろうということをどこかで読んでいると言いたい。私がやりたいと思ってる何

：

@fs: 16; 

// either return the value 
.s(@t,@s,@u) { 
    // return @t/@s*@u; 
} 
#elem { 
    margin-top: .s(30,@fs,1em); 
    width: .s(900,@fs,1em); 
    .child { 
     width: .s(100,900,100%); 
    } 
} 

// or have a property argument 
.s(@t,@s,@u,@p) { 
    @{p}: @t/@s*@u; 
} 
#elem { 
    .s(30,@fs,1em,margin-top); 
    .s(900,@fs,1em,width); 
    .child { 
     .s(100,900,100%,width); 
    } 
} 

私はそれを把握することができる唯一の方法が、私は複数のミックスインを持っている必要があるため、それは非常に限られている：

.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; } 
// margin[-top|-right|-bottom|-left] 
// padding[-top|-right|-bottom|-left] 
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; } 
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; } 

私が知っていますless.jsファイルを変更して、組み込みのround()やceil()のようなスペーシング機能を追加することができます。しかし、それはLessPHP、Crunch、SimpLessを使用して、.lessファイルをコンパイルするオプションを無効にします。

Answer 1

私が知る限り、プロパティの引数はありません：あなたはそれを書き留めなければなりません。

つまり、関数は、計算された値または命令（プロパティ/ iesおよび計算値）を返します。

CSSには何千ものプロパティはありませんが、それは何百ものクラスと関数を持つCMSではないので、あなたのリストはあなたが想像できるほど長くはありません。このような複雑なことをしたい場合は、他のCSSプリプロセッサやバックエンド言語を使用してCSSを生成する必要があります。またはそれをよりシンプルに保つこと。言っ
、lessphp allows for user functions：

lessphpは、コンパイル時にLESSコードにさらされるユーザ関数を実装することができます単純な拡張インターフェイスを備えています。あなたはlessphpタイプのシステムで作業する必要があるので、少し難しいかもしれません。あなたも簡単にテストと生産のためのコマンドラインlesscコンパイラのために、クライアント側less.jsコンパイラを使用することができますデフォルト少ないコンパイラ、にカスタム機能を追加することができ

Answer 2

注意してください。あまりの1.x

1. ダウンロードについては

   とでgithubのからソースを解凍します。https://github.com/less/less.js/releases/latest

2. 実行npm install
3. オープンlib/functions.jsファイル

4. は、カスタム関数を追加します（returncenter()でこの例では、tree.functionsオブジェクト内に次のように入力します。

   tree.functions = { 
   returncenter: function() { 
   return new(tree.Anonymous)('center'); 
   }, 
   //original function below 
   } 
   

5. あなたがHTMLでDIST /あまり1.x.x/JSを含めるかdist/lesscコンパイラを使用してより少ないコードをコンパイルすることができ、前のステップの後grunt dist

ラン。

以下2。X

1. ダウンロードとでgithubのソースを解凍します：https://github.com/less/less.js/archive/master.zip
2. 実行npm install

3. は、ファイルcaleld lib/less/functions/custom.jsを作成し、そこに以下の内容を書き留め：

   var Anonymous = require("../tree/anonymous"), 
       functionRegistry = require("./function-registry"); 
   
   functionRegistry.addMultiple({ 
   returncenter: function() { 
   return new(Anonymous)('center'); 
   } 
   }); 
   

4. 開きますlib/less/function/index.jsファイルを使用し、の直前に、require("./custom");をレジスタ関数のリストに追加します

5. 実行grunt dist

は今、あなたは、次の少ないコードを使用することができます。

selector { 
property: returncenter();  
} 

前のより少ないコードには、以下のCSSコードにコンパイルされます：

selector { 
property: center;  
}