single identifier for multiple css classes - css

Question

I have frequent bundling together of css classes like this:
<div class="row z-depth-2 gradient-background">
... Blah
</div>
I have these three classes: row z-depth-2 gradient-background used together in more than 200 places. How can I introduce a single class for these three taken together?
I don't mind CSS or SASS. One other problem is that row and z-depth-2 are defined in materialize.css which I don't wanna touch. So I can't simply extend these classes in SASS like so:
.input-group {
#extend .row, .z-depth-2, .gradient-background
}
So I want to be able to do something like this:
<div class="input-group">
... Blah
</div>

Answer 1

Why not simply use the three classes as one selector like this .row.z-depth-2.gradient-background. It will allow you to select elements that have these 3 classes (it can have more of course) :
div {
margin:10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {/* pay attention as there is no spaces between the classes*/
background: red;
}
<div class="row z-depth-2 gradient-background">
<!-- Select this one -->
</div>
<div class="row gradient-background">
</div>
<div class="row z-depth-2">
</div>
<div class="row gradient-background z-depth-2 more-class">
<!-- Select this one -->
</div>
Usefull links to get more details :
https://css-tricks.com/multiple-class-id-selectors/
Using two CSS classes on one element
UPDATE
If you want to use a new class that will later be replaced with these 3 ones, you can use a small jQuery script in order to do what you need, like this :
//select all element with class input-group
$('.input-group').each(function() {
$(this).removeClass('input-group'); //remove input-group
$(this).addClass('row z-depth-2 gradient-background'); //add the other classes
})
div {
margin: 10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {
/* pay attention as there is no spaces between the classes*/
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
</div>
<div class="class">
</div>