我可以在 SASS 中实现这个多功能的 mixin 吗？答案

【问题标题】：Can I achieve this versatile mixin in SASS?我可以在 SASS 中实现这个多功能的 mixin 吗？
【发布时间】：2020-06-18 17:16:00
【问题描述】：

我正在尝试减少以下 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 个参数的“函数”：

$类名
$宽度

并使用它来生成以下样式的 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);

【问题讨论】：

您已经完成了这项工作，您只是错过了$classname 上的interpolation @mixin。
@Arkellys 刚刚看到您的消息 - 感谢您的链接！非常感激。我现在就试试。

标签： sass mixins

【解决方案1】：

感谢@Arkellys 指出我需要做的就是理解interpolation

我修改后的 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); 
    }

【讨论】：