字符串操作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？

回答

相關問題