seven-phases-max / less-plugin-functions Goto Github PK
View Code? Open in Web Editor NEWWrite custom Less functions in Less itself
License: MIT License
Write custom Less functions in Less itself
License: MIT License
Got this error on compile (i use "grunt-contrib-less": "~1.2.0", which is LESS v2.6.1):
Running "less:core" (less) task
>> TypeError: plugin.install is not a function
>> at PluginManager.addPlugin (F:\LavkaLavka\Shop\node_modules\less\lib\less\plugin-manager.js:29:12)
>> at PluginManager.addPlugins (F:\LavkaLavka\Shop\node_modules\less\lib\less\plugin-manager.js:19:18)
>> at Object.parse (F:\LavkaLavka\Shop\node_modules\less\lib\less\parse.js:34:27)
>> at Object.render (F:\LavkaLavka\Shop\node_modules\less\lib\less\render.js:25:18)
>> at F:\LavkaLavka\Shop\node_modules\less\lib\less\render.js:16:24
>> at Object.render (F:\LavkaLavka\Shop\node_modules\less\lib\less\render.js:15:20)
>> at compileLess (F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\tasks\less.js:164:17)
>> at F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\tasks\less.js:63:9
>> at F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\node_modules\async\lib\async.js:662:13
>> at iterate (F:\LavkaLavka\Shop\node_modules\grunt-contrib-less\node_modules\async\lib\async.js:146:13)
Warning: Error compiling .less/F133.less Use --force to continue.
Inside gruntfile
// LESS compilation task.
less: {
options: {
strictImports: true,
plugins: [
require('less-plugin-functions')
]
},
core: {
src: '.less/<%= pkg.name %>.less',
dest: 'css/<%= pkg.name %>.css'
},
project: {
src: '.less/style.less',
dest: 'css/style.css'
}
},
Maybe i'm doing something wrong?
I've intialized and used few less plugins this way successfully, so thought i need to write it here)
I reaaaaaallly need this functionality in less now!))
Hi,
I have a problem with using less-plugin-functions. Could you please help me?
I've installed less-plugin-functions, but not globally: npm install --save-dev less-plugin-functions
Here is my grunt task:
less: {
production: {
options: {
paths: ["assets/css"],
cleancss: true,
plugins: [
new (require('less-plugin-functions'))
],
cleancssOptions: {
keepSpecialComments: 0
}
},
files: {
"static/css/tip.css": "static/less/styles.less"
}
}
},
But it does nothing. What I'm doing wrong?
Thanks.
I want to use this plugin along with Less2Css in Sublime text2. Would you please tell me the way? thanks.
To reproduce the issue, check this https://github.com/yuxuan/less-plugin-functions-issue.
The less code:
@padding: 12px;
.cls {
padding-right: calc(@padding - var(--width));
}
if compile with LessPluginFunctions
, it would throw Cannot read property 'numerator' of undefined
error. If without the plugin, it compiled successfully.
Please help.
Hi,
This is related to less/less.js#2747
I'd like to be able to add custom functions for usage in mixin guards.
The thing is that I'm not really interested declaring these fonctions in Less syntax but just register some custom useful functions in my build process.
Is it possible to do?
It would be less invasive like sass's @function
instead of using a scope or a prefix to define the functions.
How can I use the plugin for sublime ?
I want to use this plugin in vue.Then I add this plugin like this.
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less', {
plugins: [new require('less-plugin-functions')]
}),
sass: generateLoaders('sass', {indentedSyntax: true}),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
But it reportes this error.
Could you please tell me how to use this plugin with webpack?
Thank you.
Maybe I misuse the plugin somehow, but I get the following problem.
My code:
// 1. variable used in function
@foo: 11px;
// 2. function
.function-bar() {
return: 42 * @foo;
}
// 3. variable that uses function (just for more readability)
@qux: (1px + bar());
// 4. media (@qux value can be copied here directly to media condition as well)
@media (min-width: (@qux)) {
.baz {
less: rulez;
}
}
Expected CSS result:
@media (min-width: 912px) {
.qux {
less: rulez;
}
}
Actual result:
OperationError: Operation on an invalid type in /path/to/myfile.less on line 13, column 28:
12 // 4. media (@qux value can be copied here directly to media condition as well)
13 @media (min-width: (@qux)) {
14
Thanks this awesome project makes possible to use css variables in less project. The problem was less
would not pass compiling less functions, such as fade
, tint
etc., if are css variables string passed into it. I used this plugin to override those native less functions and passes through whatever params. I used it in my project which based on ant.design, and used css variables to override less variables to achieve multiple themes and dark mode.
I just would like to appreciate the author made this awesome work. My solution may not be elegant but it works :P
undefinedError: Cannot read property 'trim' of undefined
Hello Max,
Thanks for the 2 less plugins you created (lists & this functions one) - I personally think both are much needed addition to less. π
I played with this less-plugin-functions yesterday and couldn't get it to work when I used uppercase characters in my funtion names.
Example:
.function-getStyleNamespace { return: "namespace-"; }
@style-ns: getStyleNamespace();
@{style-ns}box { display: block; color: black; }
Output:
.function-getStyleNamespace {
return: "namespace-";
}
getStyleNamespace()box {
display: block;
color: black;
}
If I lowercase the function name then everything works fine.
Regards,
R.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.