代码之家  ›  专栏  ›  技术社区  ›  noclist

用更少的值创建多选择器变量

  •  0
  • noclist  · 技术社区  · 7 年前

    使用less,是否可以创建一个可以独立扩展变量中每个选择器的多选择器变量?例如,我有以下几点:

    @icons: .fas, .far, .fal;
    
    @{icons} {
        font-size: 1.33333em;
        line-height: .75em;
        vertical-align: -.0667em;
        text-align: center;
        width: 2.5em;
    
        &.fa-search {
            position: absolute;
            font-size: 1em;
            width: 1em;
            top: 12px;
            padding-left: 9px;
        }
    
        &.fa-question-circle {
            font-size: 1.1em;
        }
    }
    

    这编译为以下内容,显然只将嵌套样式应用于 .fal ,列表中的最后一个选择器

    .fas, .far, .fal {
      font-size: 1.33333em;
      line-height: .75em;
      vertical-align: -0.0667em;
      text-align: center;
      width: 2.5em;
    }
    .fas, .far, .fal.fa-search {
      position: absolute;
      font-size: 1em;
      width: 1em;
      top: 12px;
      padding-left: 9px;
    }
    .fas, .far, .fal.fa-question-circle {
      font-size: 1.1em;
    }
    

    当我真正想要的是嵌套样式独立地应用于每个选择器时,例如:

    .fas,
    .far,
    .fal {
      font-size: 1.33333em;
      line-height: .75em;
      vertical-align: -0.0667em;
      text-align: center;
      width: 2.5em;
    }
    .fas.fa-search,
    .far.fa-search,
    .fal.fa-search {
      position: absolute;
      font-size: 1em;
      width: 1em;
      top: 12px;
      padding-left: 9px;
    }
    .fas.fa-question-circle,
    .far.fa-question-circle,
    .fal.fa-question-circle {
      font-size: 1.1em;
    }
    

    谢谢你的建议。

    1 回复  |  直到 7 年前
        1
  •  1
  •   bitstarr    7 年前

    你应该利用延伸。

    http://lesscss.org/features/#extend-feature-extend-all

    .fas {
        font-size: 1.33333em;
        line-height: .75em;
        vertical-align: -.0667em;
        text-align: center;
        width: 2.5em;
    
        &.fa-search {
            position: absolute;
            font-size: 1em;
            width: 1em;
            top: 12px;
            padding-left: 9px;
        }
    
        &.fa-question-circle {
            font-size: 1.1em;
        }
    }
    
    .far:extend( .fas all ) {}
    .fal:extend( .fas all ) {}