scss - Obtener el valor del atributo padre en sass

selectores avanzados css

Question

Esta pregunta ya tiene una respuesta aquí:

• Sass - Manipular propiedad heredada? 4 respuestas

Estoy intentando crear un estilo <a> alto nivel para mi aplicación con sass. La mayoría de los enlaces en el sitio son de color verde, así que tengo esto como un estilo. (Estoy usando brújula para la función de darken )

a {
  color: green;

  &:hover {
    color: darken(green, 10%);
  }
}

Sin embargo, en ciertos casos, los enlaces no son verdes. En estos casos, tendré que especificar tanto el color del texto como el color de desplazamiento, de lo contrario, pasará automáticamente a verde. Me pregunto si hay una manera de hacer esto DRYer. Idealmente, podría obtener el color de las clases principales, como tal.

a {
  color: green;

  &:hover {
    color: darken(parent(color), 10%);
  }
}

De esta forma, el cursor siempre será el predeterminado para el color específico. ¿Esto tiene sentido? Es algo como esto posible? Si no, ¿cuál es la mejor manera de manejar esto? ¿Un Mixin?

¡Gracias!

Answer 1

Lo que preguntas no es posible con SASS. SASS no construye un modelo de objetos con todos los elementos y propiedades (es imposible sin HTML).

Una mixin es una solución adecuada para un caso reutilizable, pero para un caso ad-hoc es una exageración.

Solo usa una variable:

a {
  $link-color: green;
  color: $link-color;

  &:hover {
    color: darken($link-color, 10%);
  }
}

Tenga en cuenta que puede mover la variable a un parcial por separado donde almacena todas sus variables.

Answer 2

Yo usaría un mixin:

@mixin link($color) {
    a { color: $color};

    &:hover { color: darken($color, 10%) };
}

.foo {
    @include link(green);
}

Rendered CSS:

.foo a { color: green; }

.foo a:hover { color: #004d00; }