将一个类的css样式应用于另一个类

Question

对于下面的bootstrap代码，我必须对所有的表单元素硬编码col sm-2和col sm-10。有没有办法避免这种硬编码，而根据下面的逻辑使用x-col-sm-left和x-col-sm-right？

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>



<div class="form-group">
        <label for="inputEmail3" class="x-col-sm-left control-label">Email</label>
        <div class="x-col-sm-right">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="x-col-sm-left control-label">Password</label>
        <div class="x-col-sm-right">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>

x-col-sm-left {
 extend col-sm-2 (for example)
}
x-col-sm-right{
 extend col-sm-10 (for example)
}

假设稍后我需要将col sm-2更改为col sm-3，我应该能够在不编辑html代码的情况下如下所示进行此更改

x-col-sm-left {
     extend col-sm-3 (for example)
    }
    x-col-sm-right{
     extend col-sm-9 (for example)
    }

Answer 1

我不确定我是否完全理解你的意思，但我想这就是你的意思。

因此，添加一个仅在另一个类中应用的类，您将执行以下操作

.col-sm-2 .x-col-sm-left {
   /*Style you want here*/
}

因此，一旦您有了of sm-2的父级，就可以在of sm-2中使用x-col-sm-left。这将覆盖

.col-sm-2{
  /*Syle*/
}

至于继承，您可以使用,来定义具有相同属性的多个类。但据我所知，CSS中没有直接的inherits // extends。

多重清晰度示例：

.col-sm-2, .x-col-sm-left {
       /*Style you want here*/
    }