JavaFX CSS combine styles in CSS file - css

Question

I have two base CSS classes:
.smpb_color_gray {
color:#cccccc;
}
.smpb_font_size_18 {
font-size:18pt;
}
I wonder if it's possible to create one class which will contains both these classes? With name .smpb_my_combine_class and it must have color:#cccccc and fontSize:18pt.
I want to create one class and then use them on other classes.
Like I want to create:
.smpb_base_border_width{
border-width:1;
}
And then I want to create a class for other control, I want to just include this class, but not create a new class. It's needed if I want to change the default width in future.
If I make a change in the base, then I need that change in all classes.

Answer 1

In regards to JavaFX2, in the .root element you can define a property, such as -smpb-color-gray:#cccccc; and then reference that within another css class.
.root {
-smpb-color-gray: #cccccc;
-smpb-font-size: 18pt;
}
.smpb_my_combine_class {
-fx-text-fill: -smpb-color-gray;
-fx-font: -smpb-font-size;
}
I used -fx-text-fill because I didn't know exactly what you were trying to color.
Does that fit into your criteria?

Answer 2

try this
.smpb_font_size_18,.smpb_color_gray{
color:#cccccc;
font-size:18pt;
}

Answer 3

You can assign multiple classes to one html element like this
<div class="border black"></div>
but you cannot combine multiple classes in one as far as I know.
I haven't really looked into it much, but I think SASS might be able to do what you want.

Answer 4

If you mean using it like this:
.myclass {
.testclass;
}
than the answer is no unless you look into something like LESS.

Answer 5

It is:
.smpb_font_size_18,.smpb_color_gray{
/*whatever style for both*/
}

Answer 6

Basically, what you are asking is what Cascading Style Sheets are all about... Grouping Elements with the same top-level Classes or Ids together. The only thing you would have to do is to create your .smpb_my_combine_class and define the values like this:
.smpb_my_combine_class{
color:#cccccc;
font-size:18pt;
}
And then define your sub classes to replace the top-level class value with the default value like this:
.smpb_my_combine_class .smpb_color_gray{
font-size: medium; //The default value for font-size according to W3C
}
.smpb_my_combine_class .smpb_font_size_18{
color: black; //The default value of your Page font color?
}
So your .smpb_my_combine_class-classed elements will have those default values, as well as each class based on it. But keep in mind that this will only work if your subclass element is contained within an element of the .smpb_my_combine_class-class