字符串操作less/scss？

使用较少的功能可以转换为t r b l至t l b r？字符串操作less/scss？

.foo{ 
    border: fn(1px 2px 3px 4px) 
}

来源

2017-10-06 PHPst

没有，有这样的没有内置的功能。虽然有“自定义函数”[插件]（http://lesscss.org/usage/#plugins-list-of-less-plugins）。（顺便说一句，你在上面的代码中在哪里看到一个“字符串”？） –

而且，顺便说一句，你在用什么语言写作？ Sass或更少？这些不是同义词也不是克隆（C++也有变量和函数，你也可以用它来处理CSS，但是你不会在这里添加[cpp]标签，是吗？）。不同的语言通常会采用不同的答案，所以请具体说明。 –

这里是一个解决方案使用的mixin：

.border (@t, @l, @b, @r) { 
    border-top:@t; 
    border-left:@l; 
    border-bottom:@b; 
    border-right:@r; 
} 

.foo { 
    width:100px; 
    height:100px; 
    .border(2px, 1px, 3px, 4px); 
}

这编译为：

.foo { 
    width: 100px; 
    height: 100px; 
    border-top: 2px; 
    border-left: 1px; 
    border-bottom: 3px; 
    border-right: 4px; 
}

UPDATE

提议@七阶段-MAX，在这里是更有效的解决方案：

.border(@t, @l, @b, @r) { 
    border: @t @r @b @l; 
} 

.foo { 
    .border(1px, 2px, 3px, 4px); 
}

哪个编译为：

.foo { 
    border: 1px 4px 3px 2px; 
}

来源

2017-10-06 22:36:25 jfeferman

编辑和改进。谢谢。 – jfeferman

我会将参数顺序更改为'@t @r @b @ l'，以便它的顺序与css边界速记相同。 –

但是OP的问题恰恰是颠倒顺序的一种方法。 – jfeferman

字符串操作less/scss？

回答

相关问题