john Smith john Smith - 5 months ago 10
CSS Question

CSS - pass parameter to class

I'm not sure if it's possible at all, but still checking with you.

Let's say I have a class with lots of properties and I want to use
that class within another section BUT with one property value different.

Can we do such thing?

Please see my example:

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


So I'm using this class in two different places
in one the width should be 266px
and in another the width should be 120px;

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

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


Of course I can create two different class with different width
but it'll ends with lots of duplicate code

Answer

Try this

<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/