Как стиль бутстрапа col-lg- * classes?

Question

Я новичок в Меньше. Я хочу написать строку типа «Column-div» в любом div с col-lg- [anyNumber] или col-md- [anyNumber] класс.

Например, что-то вроде этого кода:

.col-lg-*:before { 
    content: "Column-div"; 
    color: #28a4c9; 
} 

Как я могу сделать это с меньшими?

Answer 1

с меньшими:

Одним из вариантов было бы в принципе создать Less петлю, как в приведенном ниже примере кода. Однако проблема заключается в том, что число фиксировано и поэтому (а) статически генерирует столько классов, сколько числа (что означает раздутый код) и (б) если класс имеет более высокое значение суффикса, он не будет покрыт.

.loop(@count) when (@count > 0){ // execute the function only when condition matches. 
    .loop(@count - 1); // call the iteration again with a decremented count 
    .col-lg-@{count}:before { // using selector interpolation to add the count number 
    content: "Column-div"; 
    color: #28a4c9; 
    } 
} 

.loop(100); // call the loop with the no. of iterations as the parameter 

Codepen Demo

---

С чистого CSS:

Существует также чистый CSS альтернативный для такого рода сопоставления с образцом. Вы можете использовать любой из CSS3 Attribute Selectors в зависимости от ваших потребностей. Несколько фрагментов доступны в фрагменте.

[class^='col-lg']:before { /* class name starts with col-lg */ 
 
    content: "Column-div"; 
 
    color: yellow; 
 
} 
 
[class$='col-lg']:before { /* class name ends with col-lg */ 
 
    content: "Column-div2"; 
 
    color: beige; 
 
} 
 
[class*='col-lg']:before { /* contains col-lg in class name */ 
 
    background: chocolate; 
 
} 
 

 
/* Just for demo */ 
 

 
div:before{ 
 
    display: block; 
 
}

<div class='col-lg-1'></div> 
 
<div class='col-lg-2'></div> 
 
<div class='col-lg-3'></div> 
 

 
<div class='a-col-lg'></div> 
 
<div class='b-col-lg'></div> 
 
<div class='c-col-lg'></div>