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 和另一个宽度应该是120像素;

<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; 
} 

小提琴：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>