需要创建css皮肤（使用扩展）

我必须创建一个WP主题的皮肤，所以我需要将具有相似属性的所有选择器组合在一起（例如“颜色”）。需要创建css皮肤（使用扩展）

任何意见如何创建一个类似CSS皮肤少用？我结束了这种解决方案

h1, h2, h3, h4, h5, h6{ 
    &:extend(.heading-color); 
    font-size: 12px; 
} 

.another-selector{ 
    &:extend(.heading-color); 
    font-size: 24px; 
} 

.heading-color{ 
     color: red; 
}

此输出：

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-size: 12px; 
} 
.another-selector { 
    font-size: 24px; 
} 
.heading-color, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.another-selector { 
    color: red; 
}

这完美的作品，只是我需要创建一个“假”类“.heading色”。这是一个很好的方法，或者我失去了一些东西？

来源

2014-08-27 Dee

对于这种情况，您可能甚至不需要扩展。它可以像[this]一样完成（http://codepen.io/hari_shanx/pen/ngsDH）。请注意，这不会在CSS输出中创建任何额外的类。 – Harry 2014-08-27 09:56:44

是的，当然，但我首先需要的是一个单极属性来对所有类似的选择器进行分组，在我的示例中，我只有按时重复“颜色：红色”。使用CMS等更容易覆盖。 – Dee 2014-08-27 10:23:21

我怀疑这样的膨胀结果是否值得“用CMS覆盖”（因此，如果最初需要3个类和99个属性，您必须生成99个选择器组？）还应该有其他方法来执行此操作（但这一切都取决于你的意思是“重写CMS”）。无论哪种方式，都可以通过将这些虚拟类移动到用['reference']（http://lesscss.org/features/#import-options-reference）选项导入的单独文件中来消除这些虚拟类。见[例如]（https://github.com/seven-phases-max/less.curious/blob/master/articles/rbgi.md#method-3-emulating-1177） – 2014-08-27 11:33:37

您可以在单独的.less文件中编写您的“假类”，然后使用@import (reference)。

fake.less：

.fake { 
    color: red; 
}

real.less：

@import (reference) "fake.less"; 

.real { 
    &:extend(.fake); 
}

real.css：

.real { 
    color: red; 
}

萨斯支持占位这是在这种更加得心应手场景。较少的贡献者已考虑实施类似的功能（高优先级，请参阅https://github.com/less/less.js/issues/1177）一年以上......所以我认为上述解决方法可能对您有所帮助。

来源

2014-12-01 08:57:45 Justineo

需要创建css皮肤（使用扩展）

回答

相关问题