Css 提取SASS中的部分边界属性

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

这可以使用

@函数

完成，因为我多次需要此功能

输入可以如下所示（如果缺少一个边框属性并不重要，因为这仍然是有效的CSS）：

• 2px白色虚线

• 1px#333

• 纯黑色

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

---

这就是我目前的困境：

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

---

---

非常感谢你的帮助

你能详细说明一下这个用例吗？SASS不适用于此类操作，只有在您在SASS之上编写库/框架时才需要它们，例如compass之类的东西

顺便说一句，你可以这样做

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

解释

inspect

将每个部分转换为字符串，并

str切片

切片最后2个字符

---

工作演示：

您能详细介绍一下这个用例吗？SASS不适用于此类操作，只有在您在SASS之上编写库/框架时才需要它们，例如compass之类的东西

顺便说一句，你可以这样做

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

解释

inspect

将每个部分转换为字符串，并

str切片

切片最后2个字符

---

工作演示：

您正在寻找的（$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;
}

---

您正在寻找（$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;
}

---

谢谢你，这正是我需要的！谢谢你，这正是我需要的！