Question

我的目标是将content: '\e826';从图标类导入另一个选择器，以防将来内容属性发生变化。

.icon-hi:before {content: '\e826';}

.panel {
    background: white;
    .panel-title {
        &:before {
            @include .icon-hi;
            text-align: center;
            width: 20px;
            height: 20px;
        }
    }
}

当然@import不起作用，但还有其他方法吗？

Answer 1

为了在一个地方定义一个值，你应该使用变量：

@icon-hi: '\e826';

.icon-hi:before {content: @icon-hi;}

.panel {
    background: white;
    .panel-title {
        &:before {
            content: @icon-hi;
            text-align: center;
            width: 20px;
            height: 20px;
        }
    }
}

您实际上可以'将一个选择器导入另一个选择器'。这基本上就是mixins的作用。这些是较少文档中的前两个功能 - http://lesscss.org/features/

第三种选择是使用扩展功能：http://lesscss.org/features/#extend-feature

Answer 2

你可以，这是一个例子：

.icon-hi{
  &:before{
    content: '\e826';
  }
}

.panel {
    background: white;
    .panel-title {
    .icon-hi;
            &:before {
                text-align: center;
                width: 20px;
                height: 20px;
            }
        }
    }

你必须定义.icon-hi类并在之前使用嵌套定义，以便preproccessor可以知道要获取的内容。

在LESS中，是否可以将一个选择器的内容导入另一个？

2 个答案: