Question

我的导航方式与我想要的方式相同，但它并没有为我在//调整中创建的颜色提供较少的变量

@ nav-color-active工作得很好，但是@ navc-color和@ nav-color-hover没有。这是为什么？

我正在处理的网站是https://centrecorp.squarespace.com/

    // tweak: { type: 'color', title: 'Navigation Links', target: '.main-navigation'}
@nav-color: #000000;

// tweak: { type: 'color', title: 'Navigation Links (Hover)', target: '.main-navigation'}
@nav-color-hover: #8963f2;

// tweak: { type: 'color', title: 'Navigation Links (Active)', target: '.main-navigation'}
@nav-color-active: #8963f2;

    .main-navigation {
    .nav-font;
    float:right;
  ul {  
    padding-left: 0;

    li  {
      display: inline-block;
      color:@nav-color;

      ul {
        display: none;
      }

      &:not(:last-child) {
        margin-right: .5em;
      }

      &:hover > ul {
        display: inline-block;
        color:@nav-color-hover;
      }

      &.active-link > a {
         color:@nav-color-active;
      }

      &.active-folder > a {
      }
    }
  }
}

Answer 1

将颜色放在.main-navigation li a{和.main-navigation li a:hover

上

你在li上有它们可以使用但href会覆盖这些样式。

** =================== /////编辑///// =============== ==== **

.main-navigation {
    .nav-font;
    float:right;
  ul {  
    padding-left: 0;

   li  {
      display: inline-block;
      a{
        color:@nav-color;
        &:hover{color:@nav-color-hover;}
      }

   ul {
        display: none;
      }

      &:not(:last-child) {
        margin-right: .5em;
      }

      &:hover > ul {
        display: inline-block;
      }

      &.active-link > a {
         color:@nav-color-active;
      }

      &.active-folder > a {
      }
    }
  }
}

导航不会减少变量

1 个答案: