SASS scss - Overriding an existing placeholder (silent class)

sass extend multiple classes
sass extend placeholder
sass extend vs include
css extend class
css extend bootstrap class
sass extend from another file
scss override class
sass placeholder

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.

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;
}

SASS scss - Overriding an existing placeholder , 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  They are very similar to class selectors, but instead of using a period (.) at the start, the percent character ( %) is used. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.

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

The Extend Concept, All three of the most popular CSS preprocessors support extend. Of course there are exceptions to every rule, which we'll get into later. Sass and Stylus have placeholder selectors. In Sass: %grid-1-2 { float: left; width: 50%; } run into a case where the selector is re-written earlier than another selector which overrides it. When I started playing with Sass about a year and a half ago, one thing that took me some time to understand was the difference between including a mixin and extending a placeholder. Actually even

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.

Extending silent classes in Sass – CSS Wizardry – Web , This means that we can limit the reach of our @extend s, and not have that placeholder class appear in our compiled stylesheet(s). Our Sass now  Sass variables are all compiled away by Sass. CSS variables are included in the CSS output. CSS variables can have different values for different elements, but Sass variables only have one value at a time. Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same.

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

travco/postcss-extend: A PostCSS plugin to minimize the , Define a "silent" extendable selector — a "placeholder selector" — to which you can mirror Sass's @extend with % placeholders (a.k.a. "silent classes") and real rules. and add them to an abstract placeholder selector, or another existing rule. Extending will never override declarations already present while copying. You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren't extending a class that's nested elsewhere in your styles, which can result in unintended selectors in your CSS.

Sass Specification - Origami, Origami component styles are authored in Sass, specifically the SCSS syntax. overly-specific selector - make the existing one less specific, or use new class names. Placeholder selectors ( % ) must not be used to reference other components, Silent mode means a component's Sass will compile to an empty string, but  Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich. Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead. Mature

Sass placeholder, Less was designed to be as close to CSS as possible, and as a result existing CSS can Bankole Cardoso Abstract class in Sass / Scss via the placeholder selector Super in the build process, rather than manually overwriting a lot of CSS rules by hand. Jan 07, 2014 · 7 January, 2014 Extending silent classes in Sass. A placeholder may be extended if defined within the same component. Sass Silent Mode. Silent mode means a component’s Sass will compile to an empty string, but provides mixins or variables which may be used by dependent code. Silent mode enables projects to include styles granularly, and components to include styles from other components.

Zurb Foundation 5 'silent' placeholder classes? - css - html, The issue is that some classnames in the existing css files there are classes defined that You will be overriding properties and values, making it unstable and increasing your It uses SASS and there are 3 ways of getting started using it. I agree with Stephen here. The confusion is cut down if you only extend silent classes (placeholders). Knowing when to extend . (class), # (id), or % (silent class) can be troublesome. This allows you to create files of just extendable silent classes that can be imported anywhere and get on with your coding.

Comments
  • Are you saying that there is no way to overwrite or redefine a silent class?
  • They can be overwritten/redefined in the same way that ordinary classes can be overwritten/redefined. So to answer your question: no.