es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Bulma, la variable de color de fondo de SASS no funciona.

28 Jul, 2023 Programación

Estoy tratando de cambiar la variable $navbar-item-hover-background-color de Bulma para cambiar el color de fondo de un elemento en mi barra de navegación de Bulma cuando el puntero del mouse se encuentra sobre el elemento, pero no funciona, el color sigue siendo el mismo.
Este es mi archivo scss:

@charset "utf-8";
$blue1: #0070c0;
$blue2: #00259e;
$blue3: #285aff;

//Color personalizado de Bulma
$info: $blue2;
$primary: $blue3;

$lime: #05F554;

$navbar-item-hover-background-color: $lime;
@import "../node_modules/bulma/bulma.sass";

Estoy siguiendo esta guía https://bulma.io/documentation/components/navbar/#basic-navbar

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay algunas cosas que podrían estar causando el problema con la variable $navbar-item-hover-background-color que no funciona:

    1. Asegúrese de que su archivo SCSS se esté compilando y aplicando correctamente a su HTML. Verifique las rutas de archivo y asegúrese de que su archivo HTML haga referencia al archivo CSS compilado.

    2. Verifique que esté utilizando el nombre de variable correcto. Según la documentación de Bulma, el nombre de la variable debería ser $navbar-item-hover-background.

    3. Intente anular la variable en lugar de establecerla inicialmente. Agregue el siguiente código después de su declaración de importación:

    $navbar-item-hover-background: $lime;

    Esto debería anular la variable predeterminada de Bulma.

    1. Si ninguna de las soluciones anteriores funciona, intente usar un selector de CSS más específico para apuntar al elemento de la barra de navegación cuando se realiza un hover. Por ejemplo:

    .navbar-item:hover {
    background-color: $lime;
    }

    Esto apuntará a todos los elementos .navbar-item cuando se realice un hover sobre ellos y aplicará el color de fondo $lime.

Comments are closed.