SASS Mixin с необязательными и переменными параметрами

Question

Есть ли способ использовать как необязательные, так и переменные элементы в sass mixin?

я стараюсь

@mixin name($className, $centered: false, $dimension...) 

но первое значение размера присваивается $centered

переключения параметров заказа не компилировать

@mixin name($className, $dimension..., $centered: false) 

ошибка:

SASSInvalid CSS after "..., $dimension...": expected ")", was ", $centered: fa..." 

, так как mixin без необязательного параметра используется во многих местах (более 70), я не хочу, чтобы вы меняли все, чтобы добавить новые параметры, поэтому я хочу оставить его необязательным?

Любой способ изменить этот микс или я должен оставить оригинал без $centered и создать ovverride с новым параметром?

для информации это Mixin тело:

@for $i from 1 through length($dimension){        
     @if($centered) { 
      .#{$className}Td#{$i}, .#{$className}Th#{$i} { 
       width: nth($dimension, $i); 
       text-align:center; 
      } 
     } 
     @else{ 
      .#{$className}Td#{$i}, .#{$className}Th#{$i} {width: nth($dimension, $i); } 
     } 
    } 

EDIT с полным cowking Например:

просто IAM определения CSS для ширины столбца моей таблицы в более быстрый способ, так это

@include nome ("columnsName", 40%, 30%, 30%);

оказывается таким образом:

.columnsNameTd1, .columnsNameTh1{width: 40%;} 

.columnsNameTd2, .columnsNameTh2{ width: 30%; } 

.columnsNameTd3, .columnsNameTh3{ width: 30%;} 

я хочу способ выравнивания текста центр все мои столбцы, возможно, может быть интересно посмотреть, если есть способ сделать, чтобы указать, какой столбец в центре, что делает все остальное осталось по умолчанию

Answer 1

Вы не можете делать то, что вы просите, потому что переменные аргументы (синтаксис ...) обязательно должны быть последними. У вас есть 2 варианта, я рекомендую вариант №2.

Вариант 1 (рассмотреть последний элемент, чтобы увидеть, если это логическое значение):

@mixin name($className, $dimension...) { 
    $last: nth($dimension, length($dimension)); 
    $centered: if(type-of($last) == bool, $last, false); 
    $length: if(type-of($last) == bool, length($dimension) - 1, length($dimension)); 

    @for $i from 1 through $length { 
     .#{$className}Td#{$i}, .#{$className}Th#{$i} { 
      width: nth($dimension, $i); 
      @if($centered) { 
       text-align: center; 
      } 
     } 
    } 
} 

Вариант 2 (используйте @content директиву):

@mixin name($className, $dimension...) { 
    @for $i from 1 through length($dimension) { 
     .#{$className}Td#{$i}, .#{$className}Th#{$i} { 
      width: nth($dimension, $i); 
      @content; 
     } 
    } 
} 

// usage 
@include name(rar, 10%, 20%, 30%); 

@include name(rar, 10%, 20%, 30%) { 
    text-align: center; 
} 

Answer 2

ОК, что если вы попробуете проверить последнее значение своего списка, так как кажется, что sass не поддерживает ничего другого после списка в качестве параметра.

@function last($list) { 
    @return nth($list, length($list)); 
} 
//returns the last item of a list 

@mixin nome($className, $dimension...) { 
    @for $i from 1 through length($dimension){ 
     @if(last($dimension) == true) { 
      .#{$className}Td#{$i}, .#{$className}Th#{$i} { 
       width: nth($dimension, $i); 
       text-align:center; 
      } 
     } 
     @else{ 
      .#{$className}Td#{$i}, .#{$className}Th#{$i} {width: nth($dimension, $i); } 
     } 
    } 
} 

поэтому при добавлении @include nome("className", 4%, 4%, 4%, 6%, 70%, 12%, true); и последнее значение true должно центрирования DIV, или все, что вы пытаетесь сделать!