css - 如何为 SASS 添加另一种颜色的灵活性

Question

我继承了一些 Sass，如下所示。我希望能够指定一个 CSS 标记来区分绿色和另一种颜色(请参阅 anchor 标记和注释)。

现在，我有-

<div class="names"></div>

链接显示为绿色。我希望能够做类似的事情-

<div class="names myblue"></div> 

取而代之的是不同的颜色。

   &.SpeakerCount3 {
      .names {
        text-align: center;            

        li {
          text-align: center;
          display: inline-block;
          width: 82px;
          margin-left: 5px;

          &:first-child {
            margin-left: 0;
          }
        }

        img {
          max-width: 100%;
        }

        h3 {
          margin-top: 0;

          a {
            font-size: 10px;
          }
        }
      }
    }


    .names {
      min-height: 180px;

      .photo {
        margin-top: -21px;
      }

      img {
        display: block;
        border: 3px solid #282828;
        margin: 0 auto;
      }

      h3 {
        margin-top: 5px;
      }

      a {
        font-size: 20px;
        color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
        text-decoration: none;
      }
    }

    .description {
      margin-bottom: 15px;
      min-height: 120px;

      h3 {
        margin: 5px 0 20px 0;
        min-height: 40px;
      }
    }

Answer 1

看到隐藏在你的问题中的 HTML 代码后，我应该说好的类名通常应该与 state 而不是属性相关 - 所以类名“myblue”可能应该被替换带有诸如“特色”，“突出显示”等之类的东西。尤其是当您要求“myblue”实际将颜色更改为橙​​色时 - 这很可能会使 future 的维护者感到困惑。如果“myblue”是公司名称或功能名称，它可能是合法的，但如果有不包含颜色名称的替代类名称，我会仔细考虑。

在 Sass 中你可以做这样的事情-

a {
    font-size: 20px;
    color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
    text-decoration: none;
        .myblue & {
            color: orange;
        }
  }

由于“a”选择器包含在“.names”选择器中，因此这将导致呈现规则 -

.myblue .names a {
    color: orange;
}

由于“names”在您的 DOM 中不是“myblue”的后代，因此选择器将不匹配 - 这不是您想要的。

如果您只想在同时出现“names”和“myblue”的地方应用规则，我会这样写-

.names {
  min-height: 180px;

  .photo {
    margin-top: -21px;
  }

  img {
    display: block;
    border: 3px solid #282828;
    margin: 0 auto;
  }

  h3 {
    margin-top: 5px;
  }

  a {
    font-size: 20px;
    color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
    text-decoration: none;
  }

    &.myblue {
        a {
            color: orange;
        }
    }
}

& 符号产生一个组合选择器，而不是你用空格得到的后代选择器(这仅是 Sass - 不是有效的 CSS)。

或者，如果您希望在没有“names”类的情况下应用“myblue”类选择器，那么只需执行此操作-

.names {
  min-height: 180px;

  .photo {
    margin-top: -21px;
  }

  img {
    display: block;
    border: 3px solid #282828;
    margin: 0 auto;
  }

  h3 {
    margin-top: 5px;
  }

  a {
    font-size: 20px;
    color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
    text-decoration: none;
  }
}

.myblue {
    a {
        color: orange;
    }
}

由于“myblue”选择器出现在“names”选择器之后，链接的颜色属性将覆盖“names”中设置的颜色——保持链接和其他元素的所有其他属性不变。该解决方案简单地利用 CSS 级联来实现所需的效果。