CODEWITHSUNDEEP
csssassscss-mixins
Deadpool
Deadpool

Reputation: 8240

Sass function simple example is giving error

I have the following sass code which is giving error. Please help!

main.scss

@function alpha($background, $color, $font-size){
    return {
    background: $background,
    color: $color,
    font-size: $font-size
    }
}

div {alpha(yellow, violet, 24);}
p {alpha(blue, orange, 20);}

Error:

fatal error: parse error: failed at background: $background, (stdin) on line 3

Note: I know this can be done my Mixin. But, what I read is that Mixins & Functions can be used inter-changably. So, I want to do this work by Functions only (to see if they are really do all work of mixins).

Thanks in advance!

Upvotes: 1

Views: 742

Answers (1)

yunzen
yunzen

Reputation: 33449

You are mixing mixins and functions here.

Mixins provide for (nested) rules and values while function only return values.

What you need is a mixin like here

@mixin alpha($background, $color, $font-size) {
   background: $background;
   color: $color;
   font-size: $font-size;
}

div {@include alpha(yellow, violet, 24);}
p {@include alpha(blue, orange, 20);}

Explanation

This is how you use Mixins

@mixin red-align($text-align: left) {
   color: red;
   text-align: $text-align
}


body h1 {
  @include red-align(center);
}

This is how you use Functions

@function red($opacity: 1) {
   @return rgba(255, 0, 0, $opacity);
}
@function align($text-align: left) {
   @return $text-align;
}

body h1 {
  color: red();
  text-align: align(center);
}

Both examples yield:

body h1 {
  color: red;
  text-align: center;
}

Upvotes: 3

Related Questions