Могу ли я добиться этого универсального миксина в SASS? - PullRequest
0 голосов
/ 17 июня 2020

Я пытаюсь уменьшить количество повторений в следующих CSS:

$width_altyp_name : 220px;
$width_view_dates : 140px;
$width_alog_status: 60px;

tr,
td {

    line-height: 3;

    .view_date_raised,
    .view_date_sent {
        max-width: $width_view_dates;
        min-width: $width_view_dates;
    }

    .altyp_name {
        max-width: $width_altyp_name;
        min-width: $width_altyp_name;
    }

    .alog_ID {
        max-width: $width_altyp_name;
        min-width: $width_altyp_name;
    }

    .alog_status_text {
        max-width: $width_alog_status;
        min-width: $width_alog_status;
    }
}

Мне интересно, могу ли я использовать @mixin (или что-то еще) для создания «функции», которая будет возьмите 2 аргумента:

  • $ classname
  • $ width

и используйте это для генерации CSS правил в следующем стиле:

@mixin set-column-width($classname, $width) 
    $classname {
        max-width:  $width;
        min-width:  $width;
    }
}

Я надеюсь затем заменить большую часть вышеперечисленного на что-то вроде:

@include set-column-width(".view_date_raised", $width_view_dates);
@include set-column-width(".altyp_name", $width_altyp_name);
@include set-column-width(".alog_status_text", $width_alog_status_text);

1 Ответ

1 голос
/ 18 июня 2020

Спасибо @Arkellys за указание, что все, что мне нужно сделать, это понять интерполяцию

Мой исправленный SASS таков:


    $width_alog_ID    : 60px;
    $width_alog_status: 60px;
    $width_altyp_name : 220px;
    $width_emp_names  : 150px;
    $width_view_dates : 140px;

    @mixin set-column-width($c, $w) {
        #{$c} {
            max-width: $w;
            min-width: $w;
        }
    }

    tr,
    td {
        line-height: 2;

        @include set-column-width('.view_date_raised', $width_view_dates); 
        @include set-column-width('.view_date_sent', $width_view_dates); 
        @include set-column-width('.altyp_name', $width_altyp_name); 
        @include set-column-width('.alog_ID', $width_alog_ID); 
        @include set-column-width('.alog_status_text', $width_alog_status); 
        @include set-column-width('.emp_drafter', $width_emp_names); 
        @include set-column-width('.emp_sender', $width_emp_names); 
    }

...