Using mathematical operations in Sass mixins with variable arguments

Question

Using mathematical operations in Sass mixins with variable arguments

When working with CSS sizing, I prefer using rem units with pixel fallbacks and am currently creating mixins to streamline the process. For setting font sizes, it's a simple task:

@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
}

However, when dealing with padding, margins, and similar properties, the mixin needs to accept variable arguments. The Sass documentation mentions that this is achievable here.

The issue arises when using the following mixin - instead of dividing by 10, the numbers are being combined with a slash. For example:

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

This results in:

.class {
    padding: 24px;
    padding: 24/10rem;
}

What I actually want is:

.class {
    padding: 24px;
    padding: 2.4rem;
}

Is there a way to ensure that Sass recognizes the variables as numbers so that the division operator works correctly?

Upon further testing, I noticed that the concatenation only occurs on the last variable.

css sass mixins

Answer 1

Answer №1

Give this a shot:

padding: #{$padding / 10}rem;

In SASS/SCSS, concatenation follows Ruby syntax. Mixing a mathematical equation with concatenation may lead to issues because it involves variable type mixing.

When using expressions and variables within #{here}, they are evaluated separately from the rest of the line. This helps prevent unintentional quoting in your output (you can also use the unquote() function for this purpose).

Answer 2

Give this a shot:

padding: #{$padding / 10}rem;

In SASS/SCSS, concatenation follows Ruby syntax. Mixing a mathematical equation with concatenation may lead to issues because it involves variable type mixing.

When using expressions and variables within #{here}, they are evaluated separately from the rest of the line. This helps prevent unintentional quoting in your output (you can also use the unquote() function for this purpose).

Answer 3

Answer №2

After realizing that using a list instead of a variable argument was the key to manipulating each value separately, I attempted to achieve this using the @each directive within a declaration block. However, my initial approach led to an error:

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

Subsequently, I opted for a more verbose solution where I handled the four possible cases individually (1, 2, 3, or 4 arguments). This revised method achieved the desired outcome:

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

To make this and other rem mixins accessible, I have compiled them as a Gist here: https://gist.github.com/doughamlin/7103259

Answer 4

After realizing that using a list instead of a variable argument was the key to manipulating each value separately, I attempted to achieve this using the @each directive within a declaration block. However, my initial approach led to an error:

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

Subsequently, I opted for a more verbose solution where I handled the four possible cases individually (1, 2, 3, or 4 arguments). This revised method achieved the desired outcome:

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

To make this and other rem mixins accessible, I have compiled them as a Gist here: https://gist.github.com/doughamlin/7103259

Answer 5

Answer №3

Utilizing calc in conjunction with interpolation (also known as #{}) can be beneficial. For instance.

$height: 10px;
$padding: 2px;

height: calc(#{$height} + #{$padding * 2}); // calc(10px + 4px)

This approach differs from...

height: calc($height + #{$padding * 2});
// results in...
height: calc($height + 4px); // ERROR

height: #{$height + $padding * 2};
// results in...
height: 10px + 4px; // ERROR

Answer 6

Utilizing calc in conjunction with interpolation (also known as #{}) can be beneficial. For instance.

$height: 10px;
$padding: 2px;

height: calc(#{$height} + #{$padding * 2}); // calc(10px + 4px)

This approach differs from...

height: calc($height + #{$padding * 2});
// results in...
height: calc($height + 4px); // ERROR

height: #{$height + $padding * 2};
// results in...
height: 10px + 4px; // ERROR

Using mathematical operations in Sass mixins with variable arguments

Answer №1

Answer №2

Answer №3

Similar questions

Using Font Color in Gmail HTML Emails

Tips for achieving equal width li elements within various columns in Bootstrap 4 beta 2 and ensuring they span the full screen width

Alert: Font preload was not utilized within a short timeframe after the window's load event

Display or conceal a YouTube video with a click

Using a subheader in conjunction with a virtual repeater in markdown does not function correctly

CSS cascading not happening

Update the appearance of an element in real-time using VUEJS

Displaying images in a carousel below a fixed navigation bar using Bootstrap

The feature of Jquery click and cursor: pointer only focuses on a single element at a

photos arranged in rows rather than a single row

Enhance your inline content by adding adjacent inline blocks

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

Achieving Vertical Content Alignment in Bootstrap 4

The hover effect is not functioning properly after loading jQuery with load();

The alignment of the image in the Bootstrap dropdown menu is disrupted

Ways to enable file/result downloads on a website using HTML

dynamic resizing, uniform dimensions

Paragraph opacity adjustments can alter both the text and background opacities

Experiencing an issue with the left side menu bar in Bootstrap, looking to incorporate additional sub menu items

Error Encountered: TemplateSyntaxError on the User Profile Page