CSS-将参数传递给类

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; 所以我在两个不同的地方使用该类，一个地方的宽度应该是266px，另一个地方的宽度应该是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 的CSS

.class-test.testclass 
{ 
width: 120px;
}

Fiddle: https://jsfiddle.net/1h1w8202/ 小提琴： 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-将参数传递给类

问题描述

4 个解决方案

解决方案1
2 2015-07-22 08:02:30

解决方案2
1 2015-07-22 07:50:10

解决方案3
1 已采纳 2015-07-22 07:54:19

解决方案4
1 2018-03-20 02:30:35

CSS-将参数传递给类

问题描述

4 个解决方案

解决方案1 2 2015-07-22 08:02:30

解决方案2 1 2015-07-22 07:50:10

解决方案3 1 已采纳 2015-07-22 07:54:19

解决方案4 1 2018-03-20 02:30:35

解决方案1
2 2015-07-22 08:02:30

解决方案2
1 2015-07-22 07:50:10

解决方案3
1 已采纳 2015-07-22 07:54:19

解决方案4
1 2018-03-20 02:30:35