用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編譯生產無文件文件的選項。

Answer 1

據我所知，沒有屬性參數：你必須寫下來。

也就是說，函數將返回計算值或指令（屬性和計算值）。

CSS中沒有數以千計的屬性，它不是具有數百個類和函數的CMS，因此您的列表將不會像您想象的那麼長。如果你想做這樣複雜的事情，你應該使用其他CSS預處理器或後端語言來生成你的CSS。或者更好地保持簡單。
這就是說，lessphp allows for user functions：

lessphp有一個簡單的擴展接口，你可以實現將在更少的代碼在編譯過程中會暴露用戶的功能。雖然他們可能有點棘手，因爲你需要使用lessphp類型的系統。

Answer 2

請注意，您還可以輕鬆添加自定義功能爲默認較少編譯器，它使您可以使用客戶端less.js編譯器用於測試和命令行編譯lessc生產。

少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. 運行grunt dist

前面的步驟，你可以在HTML DIST /欠1.x.x/JS或與dist/lessc編譯器編譯更少的代碼之後。

For Less 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;  
}