CSS - pass parameter to class

Question

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 1

You could remove the property from the class

Then use two more classes. eg.

.width-1 {
width: 266px;
}

.width-2 {
width: 120px;
}

. . .

And include two classes in each element

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

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

Answer 2

I guess you could use this trick :

<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

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/

Answer 4

This seems to let me position a video anywhere on the page.

<!DOCTYPE html> 
<html> 

<head>
<style>
div.relative {
    position: relative;
    z-index: -1;
}
</style>
</head>

<body> 

<div class="relative" style='left:20px; top:30px'>
    <video width="400"  autoplay loop>
      <source src="dinoheads.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
</div>

<p>

</p>

</body> 
</html>

CSS - pass parameter to class

Question

4 answers

solution1
2 2015-07-22 08:02:30

solution2
1 2015-07-22 07:50:10

solution3
1 ACCPTED 2015-07-22 07:54:19

solution4
1 2018-03-20 02:30:35

CSS - pass parameter to class

Question

4 answers

solution1 2 2015-07-22 08:02:30

solution2 1 2015-07-22 07:50:10

solution3 1 ACCPTED 2015-07-22 07:54:19

solution4 1 2018-03-20 02:30:35

solution1
2 2015-07-22 08:02:30

solution2
1 2015-07-22 07:50:10

solution3
1 ACCPTED 2015-07-22 07:54:19

solution4
1 2018-03-20 02:30:35