gpt4 book ai didi

less - 使用 LessCSS 的用户定义函数?

转载 作者:行者123 更新时间:2023-12-04 12:48:57 26 4
gpt4 key购买 nike

我最近刚刚进入 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 文件以用于生产的选项。

最佳答案

据我所知,没有属性(property)论据:你必须把它写下来。

也就是说,函数将返回计算值或指令(属性和计算值)。

CSS 中没有成千上万的属性,也不是拥有数百个类和函数的 CMS,因此您的列表不会像您想象的那么长。如果你想做这么复杂的事情,你应该使用其他 CSS 预处理器或后端语言来生成你的 CSS。或者最好保持简单。
也就是说,lessphp allows for user functions :

lessphp has a simple extension interface where you can implement user functions that will be exposed in LESS code during the compile. They can be a little tricky though because you need to work with the lessphp type system.

关于less - 使用 LessCSS 的用户定义函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9958682/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com