Извлечь части свойства границы в SASS

Question

Учитывая допустимое значение свойства границы CSS в переменной SASS (код в синтаксисе 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

Вы ищете типа из ($ части):

@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, например. что-то вроде компаса.

Btw вы можете сделать это таким образом

$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