css - 在 SASS 中提取部分边界属性

Question

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

这可以使用 @function 来完成，因为我多次需要此功能。

输入可能如下所示(如果缺少边框属性之一也没关系，因为这仍然是有效的 CSS):

• 2px 白色虚线
• 1px #333
• 纯黑色

不幸的是，我什至不知道从哪里开始。 我想拆分列表然后返回相应的值，但我不知道如何确定不同的类型，例如我怎么知道它的边框宽度值？

---

这就是我目前卡住的地方:

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