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>

CSS Variables

Generating CSS variables is about as close as you're going to get to being able to manipulate an inherited property. Browser support isn't quite there yet (check caniuse), but here's what that would look like:

Sass:

ul {   --list-color: orange;   --darker-color: darken(orange, 15%);   color: var(--list-color); }  ol {   --list-color: green;   --darker-color: darken(green, 10%);   color: var(--list-color); }  li {   background: var(--darker-color); } 

Output:

ul {    --list-color: orange;    --darker-color: #b37400;    color: var(--list-color);  }    ol {    --list-color: green;    --darker-color: #004d00;    color: var(--list-color);  }    li {    background: var(--darker-color);  }

<ul>    <li>Foo</li>  </ul>    <ol>    <li>Bar</li>  </ol>

If you're using a browser that supports CSS variables, the result should look like this:

Answer 2

I was looking for the same thing, and came across this. Your question was answered, but it didn't solve the problem.

Here's the solution: http://codepen.io/monsto/pen/tiokl

If your HTML was this:

    <div class="main">       <header class="header">         <div class="warning">           <p><strong>Danger,</strong> Will Robinson!</p>         </div>       </header>     </div> 

Then using SASS you could do this:

$bg: #f88;  @mixin colorize {   $bg: darken($bg,15%) !global; // !global flag required for 3.4 or later, remove if using 3.3 or older   background: $bg; }  .warning {   background: $bg;   p {     @include colorize;     strong {       @include colorize;     }   } } 

SASS seems to have no idea of the results of it's output. Therefore, inherit means nothing to it. You're basically asking it to know what the output is before it's output.

It does however know it's variables as, by default, they're tightly scoped. From the docs:

Variables are only available within the level of nested selectors where they’re defined. If they’re defined outside of any nested selectors, they’re available everywhere.

AND THEN variables in mixins:

The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin.

This allows the above mixin to take a known variable, defined in the parent level, and redefines it for the current level and available to it's children. It's like doing $x = $x + 1 inside a multi-nested loop

_{TBPH, this rather changes the way I think about SASS. It's clearly a lot more programmatic than I thought.}