在我编译成main.less
的{{1}}文件中说,我有以下内容:
main.css
显然,这已经变得笨拙,过度混乱了我的main.less文件并添加了可能导致多次不必要更改的重复副本。
我该如何改进?有没有办法可以做这样的事情:
.section1 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
border: 1px solid green;
}
}
.section2 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
border: 1px solid red;
}
}
由于
编辑1:根据@Alessandro Minoccheri的建议,我编译了但是得到的css如下:
.allCellTypes
{
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
}
.section1 .allCellTypes
{
border: 1px solid green;
}
.section2 .allCellTypes
{
border: 1px solid red;
}
完全省略.section1 .allCellTypes
{
border: 1px solid green;
}
.section2 .allCellTypes
{
border: 1px solid red;
}
所涵盖的类的任何提及。也许这有两个原因?
.allCellTypes
的类的定义在别处定义(在编译的引导程序文件中)。 .allCellTypes
文件,也许它有错误?编辑2:我将以下代码放在lessphp page ...
的演示窗口中.less
我得到了以下结果:
.cell1 {
background-color: red;
}
.cell2 {
background-color: green;
}
.cell3 {
background-color: blue;
}
.allCellTypesClass {
.cell1;
.cell2;
.cell3;
}
.section1 {
.allCellTypes {
.allCellTypesClass;
border: 1px solid red;
}
}
所以我害怕你的答案,@ Alessandro Minoccheri,没有做我想做的事!
答案 0 :(得分:3)
我所做的主要内容如下:
我的Mixin:
.red-border () {
border:@value @value @value;
}
申请:
.section-2 [class*="col-"] {
.red-border;
}
如果您不想影响嵌套列,则:
.section-2 > [class*="col-"] {
.red-border;
}
如果您只想要某个列断点:
.section-2 > [class*="col-sm-"] {
.red-border;
}
如果你不想影响表格(没有测试过,但应该可以正常工作)。
.section-2 > [class*="col-"]:not(form) {
.red-border;
}
答案 1 :(得分:1)
以防万一,你可以这样得到它:
.section1 {
.allCells; .allCellsProperties() {
border: 1px solid green;
}
}
.section2 {
.allCells; .allCellsProperties() {
border: 1px solid red;
}
}
.allCells() {.col- {&xs-, &sm-, &md-, &lg- {
&1, &2, &3, &4, &5, &6, &7, &8, &9, &10, &11, &12 {
.allCellsProperties();
}
}}}
但实际上,@ cab建议的基于属性选择器的解决方案更干净,更少膨胀。
答案 2 :(得分:0)
您可以创建一个类.allCellTypes
并添加您想要继承的所有类。您可以调用此类并添加其他属性
你可以这样写:
.allCellTypesClass
{
.col-xs-1;
.col-sm-1;
.col-md-1;
.col-lg-1;
.col-xs-2;
.col-sm-2;
.col-md-2;
.col-lg-2;
.col-xs-3;
.col-sm-3;
.col-md-3;
.col-lg-3;
.col-xs-4;
.col-sm-4;
.col-md-4;
.col-lg-4;
.col-xs-5;
.col-sm-5;
.col-md-5;
.col-lg-5;
.col-xs-6;
.col-sm-6;
.col-md-6;
.col-lg-6;
.col-xs-7;
.col-sm-7;
.col-md-7;
.col-lg-7;
.col-xs-8;
.col-sm-8;
.col-md-8;
.col-lg-8;
.col-xs-9;
.col-sm-9;
.col-md-9;
.col-lg-9;
.col-xs-10;
.col-sm-10;
.col-md-10;
.col-lg-10;
.col-xs-11;
.col-sm-11;
.col-md-11;
.col-lg-11;
.col-xs-12;
.col-sm-12;
.col-md-12;
.col-lg-12;
}
.section1
{
.allCellTypes
{
.allCellTypesClass;
border: 1px solid green;
}
}
.section2
{
.allCellTypes
{
.allCellTypesClass ;
border: 1px solid red;
}
}