Sass - Manipulate inherited property?

Question

Is it possible, in Sass, to manipulate a value a given element already inherits?

I am aiming for something like this:

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

Answer 1

Inheritance

No. Sass doesn't 'know' what selector to inherit the color from. It would have to know that strong is a descendant of body. That seems like a reasonable enough assumption for you and I since strong is not allowed outside of the body, but that sort of assumption cannot be made about most selectors. Sass would also have to know that there are no cascades happening from other ancestor elements.

ul {
    color: red;
}

ol {
    color: blue;
}

li {
    // which color do I inherit from ????
}

Well can I specify which selector I want to copy from?

Sass does not grant access to the values of any previously declared variables in any fashion, either. There is no way to specify "be darker than the body's color". CSS rules are not objects or mappings and are not accessible in any way. Your case may be simple, but consider a more complex case like this:

.foo {
    background: mix(white, blue); // fallback for non-rgba browsers
    background: rgba(blue, .5);

    .baz & {
        background: yellow;
    }

    @media (min-width 30em) {
        background: orange;
    }

    @supports (flex-wrap: wrap) {
        background: red;
    }
}

.bar {
    // access which background color from .foo ????
}

Well what can I do?

You'll either need to use variables or it has to be a feature of vanilla CSS to do what you want.

Old-Fashioned CSS

Some properties can give the illusion of being generated/inherited dynamically using stuff that's been supported by browsers for years:

ul.one {
  background: white;
}

ul.two {
  background: yellow;
}

ul {
  background: rgba(0, 120, 255, .2);
  padding: 1em;
}

<ul class="one">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

<ul class="two">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>