Sass: ¿manipular la propiedad heredada?

Herencia

No. Sass no "sabe" de qué selector heredar el color. Debería saber que stronges descendiente de body. Esa parece una suposición bastante razonable para usted y para mí, ya que strongno está permitido fuera del cuerpo, pero ese tipo de suposición no se puede hacer con la mayoría de los selectores. Sass también tendría que saber que no se producen cascadas de otros elementos ancestrales.

ul {
    color: red;
}

ol {
    color: blue;
}

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

Bueno, ¿puedo especificar desde qué selector quiero copiar?

Sass tampoco otorga acceso a los valores de ninguna variable previamente declarada de ninguna manera. No hay forma de especificar "ser más oscuro que el color del cuerpo". Las reglas CSS no son objetos ni asignaciones y no son accesibles de ninguna manera. Su caso puede ser simple, pero considere un caso más complejo como este:

.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 ????
}

Bueno, ¿qué puedo hacer?

Necesitará usar variables o tendrá que ser una característica de CSS básico para hacer lo que quiera.

CSS anticuado

Algunas propiedades pueden dar la ilusión de ser generadas/heredadas dinámicamente utilizando elementos que han sido compatibles con los navegadores durante años :

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>

Variables CSS

Generar variables CSS es lo más parecido a poder manipular una propiedad heredada. La compatibilidad con el navegador aún no está disponible (consulte caniuse ), pero así es como se vería:

Hablar con descaro a:

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

Producción:

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>

Si está utilizando un navegador que admite variables CSS, el resultado debería verse así:

Feb 17 '2013 12:02 cimmanon