在 SASS 中提取部分边框属性

Question

给定 SASS 变量中的有效 CSS 边框属性值（scss 语法中的代码），我需要知道给定边框的宽度和颜色。

这可以使用 a 来完成，@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

您正在寻找type-of($part)：

@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;
}