Using loops in Sass mixins causes errors

Question

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format.

 background: -webkit-linear-gradient(top, 50%);
 background: -moz-linear-gradient(top, 50%);
 background: linear-gradient(top, 50%);

This is the SASS mixin code I created for this purpose:

@mixin linear-gradient($name, $arg1, $arg2){
    @each $vendor in ('-webkit-', '-moz-','') {
        background: #{$vendor}#{$name}(#{$arg1}, #{$arg2});
    }
}
@include linear-gradient(linear-gradient, top, 50%);

However, I encountered an error while testing it. Can someone help me figure out why?

css sass compass-sass mixins

Answer 1

Answer №1

I have chosen to exclude the $name parameter in my initial example as it appears unnecessary. However, in the second example, I have included $name to demonstrate an alternative approach that ensures proper compilation of the parentheses.

@mixin linear-gradient($arg1, $arg2){
    @each $vendor in ('-webkit-', '-moz-','') {
        background: #{$vendor}linear-gradient(#{$arg1}, #{$arg2});
    }
}

@mixin linear-gradient($name, $arg1, $arg2){
    @each $vendor in ('-webkit-', '-moz-','') {
        background: #{$vendor}$name+'('+$arg1+', '+$arg2+')';
    }
}

#myElement {
    @include linear-gradient(top, 50%);
}

/* Output */

#myElement {
  background: -webkit-linear-gradient(top, 50%);
  background: -moz-linear-gradient(top, 50%);
  background: linear-gradient(top, 50%);
}

Answer 2

I have chosen to exclude the $name parameter in my initial example as it appears unnecessary. However, in the second example, I have included $name to demonstrate an alternative approach that ensures proper compilation of the parentheses.

@mixin linear-gradient($arg1, $arg2){
    @each $vendor in ('-webkit-', '-moz-','') {
        background: #{$vendor}linear-gradient(#{$arg1}, #{$arg2});
    }
}

@mixin linear-gradient($name, $arg1, $arg2){
    @each $vendor in ('-webkit-', '-moz-','') {
        background: #{$vendor}$name+'('+$arg1+', '+$arg2+')';
    }
}

#myElement {
    @include linear-gradient(top, 50%);
}

/* Output */

#myElement {
  background: -webkit-linear-gradient(top, 50%);
  background: -moz-linear-gradient(top, 50%);
  background: linear-gradient(top, 50%);
}

Using loops in Sass mixins causes errors

Answer №1

Similar questions

My goal is to dynamically adjust the height of this section based on its content

What is the best way to generate multiple progress bars by leveraging a for loop?

Split a column into two at the md breakpoint with Bootstrap

My fixed navigation bar is being impacted by the link decorations

URL for CSS Background-Image

Creating a background color without using the <canvas id> element can be achieved by utilizing CSS properties such as

The content's div is not extending completely in the horizontal direction

Position the image slider uniformly at the bottom using CSS (utilizing the Slick Carousel library)

I'm wondering why my second div is displaying a different size compared to the rest, even though they all share the same container-fluid class

Jquery Toggle not applying class change on mobile devices

Neighbor wrapping causing Flex to shrink

The challenge of handling overflow in CSS slide-in and slide-out animations

I recently attempted a meyers reset and now I'm struggling to get my unordered list to display in a horizontal layout

Problematic response design

Attempting to align an image in the middle of a webpage using CSS styling

What is the best way to place an image above a step progress bar?

Broaden the default className attribute of the component

Video with a personalized play button overlay

Internet Explorer Fails to Display CSS Background Images

Clicking to remove dotted borders