css - 如何为其他颜色增加SASS的灵活性

我有一些继承的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;
      }
    }

最佳答案

看到隐藏在您的问题中的HTML代码后，我应该说好的类名通常应与状态而不是属性相关-因此，类名“ myblue”可能应替换为“ featured”，“ higheded”等等。在您要求“ myblue”将颜色实际更改为Orange的情况下尤其如此，这可能会使将来的维护人员感到困惑。在“ 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;
        }
  }

由于“ .names”选择器中包含“ a”选择器，因此将呈现以下规则：

.myblue .names a {
    color: orange;
}

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

如果您只希望该规则适用于同时存在“名称”和“ 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）。

另外，如果您希望“ myblue”类选择器即使在没有“ names”类的情况下也可以应用，则只需执行以下操作-

.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”选择器之后时，链接的color属性将覆盖“ names”中设置的颜色-保留链接和其他元素的所有其他属性。该解决方案仅利用CSS级联来实现所需的效果。