CODEWITHSUNDEEP
htmlcsssass
john Smith
john Smith

Reputation: 1605

Can I pass a parameter to a CSS class?

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

Upvotes: 1

Views: 2591

Answers (4)

Luis Lopez
Luis Lopez

Reputation: 11

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>

Upvotes: 1

Sanchita Santra
Sanchita Santra

Reputation: 359

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>

Upvotes: 2

Elie M
Elie M

Reputation: 263

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

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

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/

Upvotes: 1

Related Questions