Конфигурационная карта Sass со значениями по умолчанию

Question

Я создаю css, используя SASS, и хотел бы, чтобы другой разработчик создал пользовательский css, изменив переменные sass. Это прекрасно работает, когда я в моем базовый файл использовать одну переменные так:

$text-color: #000 !default; 

Для проверки переопределения я создаю новый проект, в котором я первый декларировать переопределение переменного, а затем импортировать «базовый» файл Sass ,

$text-color: #0074b;  
@import "base-file"; 

Но я также хотел бы использовать карты для конфигурации, но тогда я не получу переопределение для работы. Как использовать карты конфигурации, которые можно переопределить? !

$colors: (text-color: #000, icon-color: #ccc); 

Добавление по умолчанию после того, как # 000 дает мне ошибку компиляции: expected ")", was "!default,") Добавление по умолчанию после того, как) не дает никакой ошибки, но переменные не перезаписываются либо!.

Любые идеи о том, что я делаю неправильно?

Answer 1

Я не думаю, что функциональность, которую вы хотите, существует в стандартном Sass. Я построил эту функцию, хотя это делает то, что вы просите:

//A function for filling in a map variable with default values 
@function defaultTo($mapVariable, $defaultMap){ 

    //if it's a map, treat each setting in the map seperately 
    @if (type-of($defaultMap) == 'map'){ 

     $finalParams: $mapVariable; 

     // We iterate over each property of the defaultMap 
     @each $key, $value in $defaultMap { 

      // If the variable map does not have the associative key 
      @if (not map-has-key($mapVariable, $key)) { 

       // add it to finalParams 
       $finalParams: map-merge($finalParams, ($key : $value)); 

      } 
     } 

     @return $finalParams; 

    //Throw an error message if not a map 
    } @else { 
     @error 'The defaultTo function only works for Sass maps'; 
    } 
} 

Использование:

$map: defaultTo($map, (
    key1 : value1, 
    key2 : value2 
)); 

Тогда, если у вас есть подмешать к чему-то, что вы можете сделать такую ​​вещь:

@mixin someMixin($settings:()){ 
    $settings: defaultTo($settings, (
     background: white, 
     text: black 
    ); 
    background: map-get($settings, background); 
    color: map-get($settings, text); 
} 

.element { 
    @include someMixin((text: blue)); 
} 

, выдаваемого CSS:

.element { background: white; color: blue; } 

Таким образом, вы бы использовать его как это основано на том, что вы сказали в вопросе:

$colors: defaultTo($colors, (
    text-color: #000, 
    icon-color: #ccc, 
));