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 而不是属性相关 - 所以类名＆＃34; myblue＆＃34 ;应该被替换为类似＆＃34;特色＆＃34;，＆＃34;突出显示＆＃34;特别是在你要求＆＃34; myblue＆＃34;实际上将颜色改为橙色 - 这可能会让未来的维护者感到困惑。在＆＃34; myblue＆＃34;是一个公司或功能名称，它可能是合法的，但我会仔细考虑是否有一个不包含颜色名称的替代类名。

在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;
        }
  }

作为＆＃34; a＆＃34;选择器包含在＆＃34; .names＆＃34;虽然选择器，这将导致渲染规则 -

.myblue .names a {
    color: orange;
}

As＆＃34;姓名＆＃34;不是＆＃34; myblue＆＃34;的后代。在您的DOM中，选择器将不匹配 - 这不是您想要的。

如果您只希望规则适用于＆＃34; name＆＃34;和＆＃34; myblue＆＃34;我会写这个 -

.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）。

或者，如果你想要＆＃34; myblue＆＃34;类选择器即使没有＆＃34;名称也可以应用＃34;上课，然后干脆就这样做 -

.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;
    }
}

作为＆＃34; myblue＆＃34;选择器出现在＆＃34;名称＆＃34;之后选择器，链接的颜色属性将覆盖＆＃34;名称＆＃34;中的颜色集。 - 保留链接和其他元素的所有其他属性。该解决方案仅使用CSS级联来实现所需的效果。

如何为SASS增加另一种颜色的灵活性

1 个答案: