Sass – Manipulate inherited property?

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:

enter image description here

Leave a Comment