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 另一方面，宽度应为120px;

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

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

当然我可以创建两个不同宽度的不同类但它以大量重复代码

结尾

Answer 1

您可以从班级

中删除该属性

然后再使用两个班级。例如

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

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

试试这个

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

这似乎让我在网页的任何位置放置视频。

<!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 个答案: