How to create CSS classes containing other Bootstrap classes

Question

Is it possible to create CSS classes containing other Bootstrap classes? I have searched but found nothing about it.

Something like:

.minhaclasse {

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #dff0d8;
    border-bottom-color: transparent;
}
}

.minhaclasse2 {

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default;
    background-color: #dff3d8;
    border-bottom-color: transparent;
}
}

But it’s not like that. :/

Has as?

Related question

Answer 1

Yes!

You can create a class to be used together with the Bootstrap component class, so you only change what you really want to change. See this example using the code you used in the question:

.nav-tabs.minha-classe > li.active > a,
.nav-tabs.minha-classe > li.active > a:hover,
.nav-tabs.minha-classe > li.active > a:focus {
  background-color: #FFEB3B;
  border-color: #FFEB3B; 
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

.nav-tabs.minha-classe2 > li.active > a,
.nav-tabs.minha-classe2 > li.active > a:hover,
.nav-tabs.minha-classe2 > li.active > a:focus {
  background-color: #4CAF50;
  border-color: #4CAF50;
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

.nav-tabs.minha-classe3 > li.active > a,
.nav-tabs.minha-classe3 > li.active > a:hover,
.nav-tabs.minha-classe3 > li.active > a:focus {
  background-color: #F44336;
  border-color: #F44336;
  border-bottom-color: transparent;
  cursor: default;
  color: #fff;
  font-weight: bold;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs minha-classe">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-tabs minha-classe2">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

<ul class="nav nav-tabs minha-classe3">
  <li role="presentation" class="active"><a href="#">Home</a>
  </li>
  <li role="presentation"><a href="#">Profile</a>
  </li>
  <li role="presentation"><a href="#">Messages</a>
  </li>
</ul>

Note that I used .nav-tabs.nome-da-classe, this speaks pro css "when the component has the class nav-tabs and the minha-classe use this ....