Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I combine 2 CSS classes into one?

I'm working with bootstrap, and trying to get the right classes on various elements for appropriate layout on various devices. It seems for many, I want something like control-label col-md-2. So I can go through a couple dozen elements, and change them all, but then - what if I realize I really want col-md-9? I then have to go through each element and change the classes! So what I'm trying to do is:

<label class="label-class"/>

with

.label-class {
   control-label col-md-9
}

Is this possible? Every answer I've found online about combining classes relates to a different type of question. Alternately, if I'm going about this all wrong, I'm willing to learn a better way to test various layouts :)

Edit: After some more searching, I found Can a CSS class inherit one or more other classes? - seems like maybe the answer is 'not without additional utilities' sadly.

like image 219
Rollie Avatar asked Mar 12 '14 08:03

Rollie


1 Answers

You can achieve it, but not with CSS. You could use LESS files, and with the proper medium to parse from LESS to CSS file (and "casually" Bootstrap core is written in LESS, ;D). The specification you're looking for is: http://lesscss.org/features/#mixins-parametric-feature

Bootstrap allows you download the LESS files of its code to modifications, and then, you may use a JS compiler as said in lesscss.org/usage/#using-less-in-the-browser

If you're using PHP, there are some libraries to compile it before send it to the browser, the latest is going well with Bootstrap 3.0 and that I'm using is: http://leafo.net/lessphp/

Hope this helps, XD

like image 164
Federico J. Avatar answered Sep 25 '22 20:09

Federico J.