Creating a versatile SASS mixin with the ability to utilize both optional and variable parameters

Question

Creating a versatile SASS mixin with the ability to utilize both optional and variable parameters

Is it possible to include both optional and variable elements in a sass mixin?

I have attempted the following:

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

however, the first dimension value is wrongly assigned to $centered.

Switching the parameters order results in compilation errors:

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

The error message reads:

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

Given that the mixin without the optional parameter is extensively used (over 70 times), I am reluctant to modify it entirely to accommodate the new parameters. Is there a way to retain the optionality of this mixin? Or do I need to create a separate override with the new parameter?

For reference, here is the body of the 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 with complete cooking example:

Essentially, I am defining CSS for column widths of my table more efficiently. When using the mixin like this:

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

The output will be:

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

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

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

I am interested in finding a way to center align all columns or specific ones while keeping others left-aligned by default.

css sass mixins

Answer 1

Answer №1

It is not possible to achieve what you are requesting because variable arguments (indicated by the ... syntax) must always be placed at the end. There are two solutions available, with option #2 being the recommended approach.

Solution 1 (check if the last element is a boolean):

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

Solution 2 (utilize the @content directive):

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

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

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

Answer 2

It is not possible to achieve what you are requesting because variable arguments (indicated by the ... syntax) must always be placed at the end. There are two solutions available, with option #2 being the recommended approach.

Solution 1 (check if the last element is a boolean):

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

Solution 2 (utilize the @content directive):

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

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

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

Answer 3

Answer №2

Alright, consider testing the final value in your list because it appears that sass does not accept anything beyond a list as a parameter.

@function last($list) {
  @return nth($list, length($list));
}
//This function returns the last item in 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); }
        }
    }
}

If you use

@include nome("className", 4%, 4%, 4%, 6%, 70%, 12%, true);

and set the last value to true, it should align your div center or achieve whatever effect you are aiming for!

Answer 4

Alright, consider testing the final value in your list because it appears that sass does not accept anything beyond a list as a parameter.

@function last($list) {
  @return nth($list, length($list));
}
//This function returns the last item in 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); }
        }
    }
}

If you use

@include nome("className", 4%, 4%, 4%, 6%, 70%, 12%, true);

and set the last value to true, it should align your div center or achieve whatever effect you are aiming for!

Answer 5

Answer №3

There is a neat trick in Sass known as Arbitrary Keyword Arguments that allows for some interesting possibilities. By passing a keyword argument alongside your other variable arguments, you can then extract and manipulate it using the meta.keywords($args) function.

To better understand this concept, here is a simplified example showcasing how it can be implemented:

@use "sass:map";
@use "sass:meta";

@mixin demo($class-name, $values...) {
    $special: map.get(meta.keywords($values), special) or false;
    $i: 1;
    @each $value in $values {
        .#{$class-name}-#{$i} {
            property: $value;
            @if $special {
                additional-property: value;
            }
        }
        $i: $i + 1;
    }
}

Example outputs:

@include demo("test", 50%, 25%, 25%);
// .test-1 {property: 50%;}
// .test-2 {property: 25%;}
// .test-3 {property: 25%;}

@include demo("demo", 50%, 25%, 25%, $special: true);
// .demo-1 {property: 50%; additional-property: value;}
// .demo-2 {property: 25%; additional-property: value;}
// .demo-3 {property: 25%; additional-property: value;}

The real magic lies in how you handle the keyword argument within the mixin, like the manipulation of $special. It might seem unconventional at first glance, but it's definitely a useful technique to have in your toolkit!

Answer 6

There is a neat trick in Sass known as Arbitrary Keyword Arguments that allows for some interesting possibilities. By passing a keyword argument alongside your other variable arguments, you can then extract and manipulate it using the meta.keywords($args) function.

To better understand this concept, here is a simplified example showcasing how it can be implemented:

@use "sass:map";
@use "sass:meta";

@mixin demo($class-name, $values...) {
    $special: map.get(meta.keywords($values), special) or false;
    $i: 1;
    @each $value in $values {
        .#{$class-name}-#{$i} {
            property: $value;
            @if $special {
                additional-property: value;
            }
        }
        $i: $i + 1;
    }
}

Example outputs:

@include demo("test", 50%, 25%, 25%);
// .test-1 {property: 50%;}
// .test-2 {property: 25%;}
// .test-3 {property: 25%;}

@include demo("demo", 50%, 25%, 25%, $special: true);
// .demo-1 {property: 50%; additional-property: value;}
// .demo-2 {property: 25%; additional-property: value;}
// .demo-3 {property: 25%; additional-property: value;}

The real magic lies in how you handle the keyword argument within the mixin, like the manipulation of $special. It might seem unconventional at first glance, but it's definitely a useful technique to have in your toolkit!

Creating a versatile SASS mixin with the ability to utilize both optional and variable parameters

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the background image on my Jumbotron to fail to load?

Incorporate a Fadein effect into the current CSS for mouseover link interaction

Navigation menu automatically scrolls to the top instantaneously

Display the Bootstrap datetimepicker within a div when hovering the mouse over it

Customize Tab indicator styling in Material-UI

How to target the last child in Flexbox using CSS order property

Tips for updating the content of a div with the click of another div

Bootstrap Modal closing problem

Vue: the placeholder option in the select input is no longer visible once v-model is added

Differences in background-size among various browsers

CSS float layout for arranging boxes of varying sizes

Images with fadeIn-Out effect on a slide restrict the movement of the div

How come my script that is dependent on the viewport does not apply classes?

How to vertically align a div inside another div

Tips for positioning a Div element in the center of a page with a full-page background

Creating a Vertical Stack of Three Divs in ReactJS

Alter the design when the height of a div is adjusted

Guide for reducing the size of the menu upon hovering over a link with jquery

Using CSS with absolute positioning and dynamic height

Developing a vertical accordion menu with AngularJS