CODEWITHSUNDEEP
sassmixins
Basil Bear
Basil Bear

Reputation: 463

Can I achieve this versatile mixin in SASS?

I am attempting to reduce the amount of repitition in the following 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;
    }
}

I am wondering whether I can use @mixin (or anything else) to produce a "function" which will take 2 arguments:

and use that to generate CSS rules in the style of the following:

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

I would hope to then replace much of the above with something like:

@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);

Upvotes: 0

Views: 66

Answers (1)

Basil Bear
Basil Bear

Reputation: 463

Thanks to @Arkellys for pointing out that all I needed to do was understand interpolation

My revised SASS is this:


    $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); 
    }

Upvotes: 1

Related Questions