提取SASS中border屬性的部分

Question

如果給定SASS變量（scss語法中的代碼）中的有效CSS邊框屬性值，我需要知道給定邊框的寬度和顏色。

這可以使用@function來完成，因爲我需要多次這個功能。

的輸入可能看起來像下面的（如果邊框屬性之一是缺少不要緊，因爲這仍然是有效的CSS）：

• 2px dashed white
• 1px #333
• solid black

不幸的是，我甚至不知道從哪裏開始。 我想分割列表，然後返回相應的值，但我不知道如何確定不同的類型，例如我怎麼知道它的邊界寬度值？

---

多數民衆贊成在我目前堅持：

@function getBorderWidth($border) { 
    @each $part in $border { 
     @if(WHAT IS THE CONDITION?) { 
      return $part; 
     } 
    } 
} 

---

非常感謝您的幫助！

Answer 1

您正在尋找（$部分）類型的：

@if type-of($part) == number { @return $part; } 
@if type-of($part) == string { @return $part; } 
@if type-of($part) == color { @return $part; } 

例子：

// Note! the null return will not be rendered 
@function get-border-width($input){ 
    @each $part in $input { @if type-of($part) == number { @return $part; } } 
    @return null; 
} 
@function get-border-style($input){ 
    @each $part in $input { @if type-of($part) == string { @return $part; } } 
    @return null;  
} 
@function get-border-color($input){ 
    @each $part in $input { @if type-of($part) == color { @return $part; } } 
    @return null;  
} 

測試：

$border-1: 2px dashed white; 
$border-2: 1px #333; 
$border-3: solid black; 

test-1 { 
    border-width: get-border-width($border-1); 
    border-style: get-border-style($border-1);  
    border-color: get-border-color($border-1);  
} 

test-2 { 
    border-width: get-border-width($border-2); 
    border-style: get-border-style($border-2);  
    border-color: get-border-color($border-2);  
} 

test-3 { 
    border-width: get-border-width($border-3); 
    border-style: get-border-style($border-3);  
    border-color: get-border-color($border-3);  
} 

輸出：

test-1 { 
    border-width: 2px; 
    border-style: dashed; 
    border-color: white; 
} 

test-2 { 
    border-width: 1px; 
    border-color: #333; 
} 

test-3 { 
    border-style: solid; 
    border-color: black; 
} 

Answer 2

請您詳細說明用例嗎？ SASS並不意味着這種操作，只有當你在SASS之上編寫一個庫/框架時才需要它，例如，像羅盤。

順便說一句，你可以這樣來做

$border: 2px dashed white; 
@function getBorderWidth($border) { 
    @each $part in $border { 
     @if (str-slice(inspect($part),-2,-1) == "px") { 
     @return $part 
     } 
    } 
} 

說明

inspect各部分字符串，並str-slice片的最後2個字符轉換。

工作演示：http://www.sassmeister.com/gist/00b0cf21a7ddeed282015d1c8ce74e0d