Why is my sass mixin not compiling into css?

Question

I'm new to sass and currently exploring it. I want to try using mixin but when I tried it, it's just not working. Here's the code:

@mixin container($radius, $width, $height, $bg, $color) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;

    $width: $width;
    $height: $height;

    $bg: $bg;
    $color: $color;

    margin: 0 auto;
}

.container {
    @include container(10px, 80%, 700px, $white, $dark-grey)
}

So I have a div and class container and want to put the mixin in there but it's just not working. Can someone help??

score 2 · Accepted Answer · answered Feb 01 '19 at 08:35

2

this?

$white: #fff;
$dark-grey: #666;

@mixin container($radius, $width, $height, $bg, $color) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;

    width: $width;
    height: $height;

    background: $bg;
    color: $color;

    margin: 0 auto;
}

.container {
    @include container(10px, 80%, 700px, $white, $dark-grey)
}

answered Feb 01 '19 at 08:35

Onuralp Karataş

196
3
6

this works! and I just realized where my problems are. Thank you so much for helping! – catto1297 Feb 01 '19 at 08:51

Jakob E · Answer 2 · 2019-02-01T08:58:56.253

1

It looks like your variables are a bit messed up

This should work:

@mixin container($radius, $width, $height, $bg, $color) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;

    width: $width;         //  <= here
    height: $height;       //  <= here

    background-color: $bg; //  <= here
    color: $color;

    margin: 0 auto;
}

.container {
    @include container(
      10px, 
      80%, 
      700px, 
      white,    // <= here
      darkgrey  // <= here
    )

}

CSS


.container {
  border-radius: 10px;
  width: 80%;
  height: 700px;
  background-color: white;
  color: darkgrey;
  margin: 0 auto;
}

edited Feb 01 '19 at 08:58

answered Feb 01 '19 at 07:01

Jakob E

4,476
1
18
21

nope, sadly it's still not working, and by the way the colors are from variables that I declared before :( – catto1297 Feb 01 '19 at 08:00
Then something else is wrong – I've added the output below. I just replaced $white and $dark-grey because they didn't show in your example – if they are just leave them :). Link: https://www.sassmeister.com/gist/2eced6d6a821713f0bc4e28584962ff3 – Jakob E Feb 01 '19 at 09:10

Why is my sass mixin not compiling into css?

2 Answers2