Question

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

这可以使用@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;
}

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将最后两个字符切片。

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

在SASS中提取部分边界属性

2 个答案: