如何为 SASS 增加灵活性以获得另一种颜色

Question

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

现在，我有-

<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”将颜色实际更改为橙色的情况下——这很可能会让未来的维护者感到困惑。如果“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 级联来达到预期的效果。