我在为PostCSS创建插件时遇到问题。
要了解我想做什么,请看以下代码:
button {
button: button;
button-border: 3px solid #abcde1;
}
这是我想做的。
如果未设置button-border,那么我希望有一个默认值:
border: none;
但是,如果设置了button-border,那么我想使用在button-border中设置的值。上面的例子是:
border: 3px solid #abcde1;
我以为可以通过设置变量来做到这一点,但是我认为范围存在问题。这是我尝试过的代码:
css.walkDecls(decl => {
var buttonBorder = 'none',
button = [
'cursor: pointer;',
'display: inline-block;',
'min-height: 1em;',
'outline: none;',
'border:' + buttonBorder
],
joinButton = button.join('');
if (decl.prop === 'button-border') {
var buttonBorder = decl.value;
decl.remove();
}
if (decl.prop === 'button') {
decl.replaceWith(joinButton);
}
});
您对我做错了什么以及如何正确做有任何想法吗?
谢谢,
摩西
最佳答案
这是我在Postcss github页面上收到的答案:https://github.com/postcss/postcss/issues/691#issuecomment-168686832
我试过了,它起作用了。
关于javascript - 在PostCSS中使用变量,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34592682/