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>