CSS - передать параметр классу

Question

Я не уверен, возможно ли это вообще, но все еще проверяю вас.

Предположим, у меня есть класс с большим количеством свойств, и я хочу использовать этот класс в пределах другого раздела, но с одним значением свойства другим.

Можно ли это сделать?

Пожалуйста, смотрите мой пример:

.class-test { 
     position: relative; 
     display: inline-block; 
     @include border-radius(3px/3px 3px 3px 4px); 
     background-color: GREEN; 
     width: 266px; // This property should be dynamic..  
     .select-something { 
      display: inline-block; 
      font-size: 14px; 
     } 
     .... 
     and much more properties.. 
     .... 
} 

Поэтому я использую этот класс в двух разных местах в одном шириной должна быть 266px и иные шириной должна быть 120px;

<div class="class-test"> 
     ..... 
     // here width should be 266px 
    </div> 

    <div class="class-test"> 
     ..... 
     // here width should be 120px 
    </div> 

Конечно, я могу создать два различных класса с различной шириной , но это будет заканчивается большим количеством повторяющегося кода

Answer 1

Попробуйте это

<div class="class-test"> 
     ..... 
     // here width should be 266px 
    </div> 

    <div class="class-test testclass" > 
     ..... 
     // here width should be 120px 
    </div> 

CSS

.class-test.testclass 
{ 
width: 120px; 
} 

Fiddle: https://jsfiddle.net/1h1w8202/

Answer 2

Я думаю, вы могли бы использовать этот трюк:

<div class="class-test"> 
     ..... 
     // here width should be 266px 
    </div> 

    <div class="class-test" style="width:120px"> 
     ..... 
     // here width should be 120px 
    </div> 

Demo

Answer 3

Вы можете удалить свойство из класса

Затем используйте еще два класса. например.

.width-1 { 
width: 266px; 
} 

.width-2 { 
width: 120px; 
} 

. . .

и включают в себя два класса в каждом элементе

<div class="class-test width-1"> 
     ..... 
     // here width should be 266px 
</div> 

<div class="class-test width-2"> 
    ..... 
    // here width should be 120px 
</div>