如何为另一种颜色增加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代码，我应该说好的类名通常应该与状态而不是属性相关-所以类名"myblue"应该被替换为"featured"，"highlight"等。特别是当你要求"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"one_answers"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"选择器之后，链接的颜色属性将覆盖"names"中的颜色设置-保留链接和其他元素的所有其他属性不变。这个解决方案简单地利用CSS级联来达到预期的效果。