imports - Sass-Manipular propiedad heredada?

sass--watch

Question

¿Es posible, en Sass, manipular un valor que un elemento dado ya hereda?

Estoy buscando algo como esto:

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

Answer 1

Herencia

No. Sass no ''sabe'' de qué selector heredar el color. Tendría que saber que strong es un descendiente del body . Parece una suposición bastante razonable para ti y para mí, ya que no se permite la strong fuera del cuerpo, pero ese tipo de suposición no se puede hacer con la mayoría de los selectores. Sass también debería saber que no hay cascadas de otros elementos ancestrales.

ul {
    color: red;
}

ol {
    color: blue;
}

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

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

Sass tampoco otorga acceso a los valores de las variables declaradas previamente de ninguna manera. No hay forma de especificar "ser más oscuro que el color del cuerpo". Las reglas CSS no son objetos o mapeos 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ás usar variables o tiene que ser una característica de CSS vanilla para hacer lo que quieras.

Anticuado CSS

Algunas propiedades pueden dar la ilusión de ser generadas / heredadas dinámicamente usando cosas que han sido compatibles con navegadores por 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 de CSS es lo más cercano que se puede llegar a poder manipular una propiedad heredada. El soporte del navegador todavía no está allí (verifique el caniuse ), pero esto es lo que se vería así:

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

Salida:

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 de CSS, el resultado debería verse así:

Answer 2

Dado que un elemento no puede tener varias de las mismas propiedades que se combinan y el hecho de que inherit no puede saber cuál es el estado procesado actual, sus opciones son:

1) Mantenga un registro del pasado se transforma con las variables SASS: Demo

.parent {
  $firstTrans: translateX(50%);
  transform: $firstTrans;

  .child {
    /* Old followed by new */
    transform: $firstTrans rotate(10deg);
  }
}

2) Aplicar la transformación a un padre (quizás agregando otro contenedor si es necesario): Demo

3) Use Javascript para combinar la transformación actual con la que desea agregar (esta es la única forma en que puede asegurarse de eliminar la transformación aplicada al padre si así lo desea): Demo

Nota : Esta respuesta proviene de una publicación combinada debido a esta meta publicación .

Answer 3

Estaba buscando lo mismo y me encontré con esto. Su pregunta fue respondida, pero no resolvió el problema.

Aquí está la solución: http://codepen.io/monsto/pen/tiokl

Si tu HTML fue esto:

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

Luego, usando SASS, podrías hacer esto:

$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 parece no tener idea de los resultados de su salida. Por lo tanto, inherit no significa nada para eso. Básicamente, le pides que sepa cuál es el resultado antes de que se emita.

Sin embargo, sabe que son variables ya que, por defecto, tienen un amplio alcance. De los documentos:

Las variables solo están disponibles dentro del nivel de selectores anidados donde están definidas. Si están definidos fuera de los selectores anidados, están disponibles en todas partes.

Y LUEGO variables en mixins:

El bloque de contenido pasado a una mezcla se evalúa en el alcance donde se define el bloque, no en el ámbito de la mezcla.

Esto permite que la mezcla anterior tome una variable conocida, definida en el nivel principal, y la redefine para el nivel actual y esté disponible para sus hijos. Es como hacer $x = $x + 1 dentro de un bucle multi-anidado

_{TBPH, esto cambia la manera en que pienso sobre SASS. Claramente es mucho más programático de lo que pensaba.}

Answer 4

Estas respuestas abordan específicamente la función de darken : una posible alternativa es usar el filtro de brightness() CSS brightness() lugar de la función de darken() de SASS (o LESS darken() . Básicamente deberá envolver el color dentro de una etiqueta span para que el filtro no afecte a otros elementos.

Demostración simple:

.red {color: red}
.blue {color: blue}
.green {color: green}

span {
  display: inline-block;
  padding: 1em;
}

.darken span {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
}

<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>

<div class="darken">
  <span class="red">Red</span>
  <span class="blue">Blue</span>
  <span class="green">Green</span>
</div>

jsFiddle: https://jsfiddle.net/azizn/hhorhz9s/

Debe tener en cuenta la compatibilidad del navegador, debería funcionar para IE Edge, las últimas Firefox y Chrome. Ver caniuse o MDN para más información.

En el caso de un oscurecimiento de fondo, puede usar un pseudo selector con opacidad o agregar una imagen de fondo PNG negra semitransparente.