SASS scss - Overriding an existing placeholder (silent class)

Question

I must not be understanding something to think that SASS does not allow for overriding of an existing silent class (placeholder). Take the code below...

%testing {
  font-size: 1em;
}
%testing {
  font-size: 4em;
}
.i-expect-4em {
  @extend %testing;
}

Why does this output the following?

.i-expect-4em {
  font-size: 1em;
}
.i-expect-4em {
  font-size: 4em;
}

Both are outputted where I am only aiming to have the ability to refine a silent class later in the flow, but before the output.

Answer 1

The output you're getting is intended. The only difference between a normal class and a silent class in Sass is that the selector for the silent class is not found in the generated CSS. Change your silent class to a normal class to see what's really happening:

.testing {
  font-size: 1em;
}
.testing {
  font-size: 4em;
}
.i-expect-4em {
  @extend .testing;
}

Output:

.testing, .i-expect-4em {
  font-size: 1em;
}

.testing, .i-expect-4em {
  font-size: 4em;
}

Answer 2

You can "overwrite" a silent class in a following manner

%item {
  // common properties
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

%leader { @extend %item;
  // extra properties
  min-width: auto;
  display:flex;
  .....
}

.loud_class_one { @extend %leader;
  font-size: 2em;
}

.loud_class_two { @extend %leader;
  color: green;
}

do not be afraid to @extend a silent class by other silent one

Answer 3

It's not only normal but also really useful.

Imagine such case:

.testing {
  font-size: 1em;
}
.testing {
  font-weight: bold;
}
.i-expect-4em {
  @extend .testing;
}

If it won't extend both of them you will lose one of the properties. Also it's not a problem because the order is preserved and it won't change computed style. Size overhead will be greatly reduced by the gzip.

Answer 4

You could use sass map as an altrenative without placeholders

$sizes: (
    testing-1: 5em,
    testing-2: 10em,
    testing-3: 15em
);


h1 {
   font-size: map-get($sizes, testing-2);
 }

OUTPUT

h1 {
  font-size: 10em;
}

An example: http://sassmeister.com/gist/4828e67e45eb4857a8bf