Using variables in qt StyleSheets

Question

Is there any possibility of giving variable name to hex/rgb numbers in .qss file . For eh

myColor = #FFCC08
QPushButton { background-color: myColor;}

So that i can define the variable at the top of the stylesheet and use the variable name whereever required instead of using the hex code. Also if i need to change the color then i have to change in one place and it will be reflected throught the file.

I also searched for Saas but don't know how it can be used in qt.

Thanks :)

score 22 · Accepted Answer · answered Jun 14 '12 at 11:19

You could build your own tiny Sass quite easily:

1.Create a text file with definitions of variables. Use simple format like this:

@myColor  = #FFDDEE
@myColor2 = #112233 
@myWidth  = 20px

2.In qss file use variable names:

QPushButton { 
    background-color: @myColor; 
    min-width: @myWidth;
}

3.Open both files and for each variable in definition file change its occurrence in qss file with the value (string) from the definition file. It is a simple string replacement.

4.Apply the preprocessed qss in the app.

This is the simplest solution. You can change both definition file and qss file outside the app and apply it without recompilation of code.

Thanks for your time. I used the same logic to create my own parser that replaces each custom variable-color that is defined in the .qss file with the actual color. — SAM, Jul 24 '12 at 09:00

score 5 · Answer 2 · answered Jun 05 '12 at 14:13

What you're trying to accomplish simply isn't possible using pure Qt style sheets.

You can achieve a similar effect by modifying and reloading your style sheets from within your C++ code, for example:

QString myColor = "#FFCC08";
QString styleSheet = "QPushButton { background-color: %1;}";
...
myWidget->setStyleSheet( styleSheet.arg(myColor) );

Unfortunately this has several drawbacks (inability to preview in designer, changing code rather than a style sheet), but it's about as close as you can get to what you're trying to achieve with Qt.

Yes I understand but the problem with the above approach is that we are specifying the stylesheet properties within the c++ code for each component and not reading from a .qss file. Thanks for your time. — SAM, Jun 06 '12 at 04:54

DaveK · Answer 3 · 2020-04-21T22:06:57.637

Another way to accomplish this would be to use Dynamic Properties. This would let you easily assign multiple properties to an object or group of objects, sort of like assigning a css class to an object. https://wiki.qt.io/Dynamic_Properties_and_Stylesheets

For example, in your UI file, you could add a string dynamic property "colorStyle" with a value of "myStyle1".

Your stylesheet would look like:

QPushButton[colorStyle='myStyle1'] {
    background-color: #FFCC08;
    ... any other style changes...
}

Any QPushButton you assign 'myStyle1' will follow the stylesheet if you set it globally.

score 1 · Answer 4 · answered Mar 19 '18 at 09:21

1

Here is a solution using sass. First, install the python bindings:

pip install sass

Then, use it:

import sys
import sass
app = QApplication(sys.argv)

# Create your sass style sheet (you can also write this in a file and load the file)
style = '''
$bg-dark: #292929;

QPushButton {
color: red;
background-color: $bg-dark;
}
'''.encode('utf-8')

# Compile Sass to CSS
style = sass.compile_string(style).decode()

# And set it to your app
app.setStyleSheet(style)

answered Mar 19 '18 at 09:21

Overdrivr

6,296
5
44
70

If you are using Python anyway, why not use the built-in string formatting, with kwargs, instead of `sass`? E.g. `'... background-color: {bg_dark}; ...'.format(..., bg_dark='#292929', ...)` – djvg Jun 01 '18 at 08:26
2

Good point, that works too for this particular answer. But sass can do more than just replacing variables, like mixins, imports, nested rules, etc. In the end, you can style complex applications much more easily and elegantly. – Overdrivr Jun 02 '18 at 09:22

score 0 · Answer 5 · answered Oct 15 '22 at 21:01

I have similar, but different problem. In my case, I want to connect window size to QCheckBoxIndicator. Code below won't work due to css already use the {}.

        self.checkBoxYes.setStyleSheet('''
        QCheckBox::indicator {
        width: {sz} px;
        height: {sz} px;
        }
        '''.format(sz=rel_sz))

However, workaround can be achieved using old-formatted string below:

def resizeEvent(self, a0) -> None:
    rel_wdth = self.width() // 20
    rel_hgh = self.height() // 10
    rel_sz = str(min(rel_hgh, rel_wdth))
    self.checkBoxYes.setStyleSheet('''
        QCheckBox::indicator {
        width: %s px;
        height: %s px;
        }
        ''' %(rel_sz, rel_sz))
    return super().resizeEvent(a0)

score 0 · Answer 6 · answered May 05 '23 at 13:53

0

You can use string concatenation in Python. It is easy to implement.

self.setStyleSheet("""QPushButton { %s;}""" % (myColor))

answered May 05 '23 at 13:53

tCot

307
2
7

Using variables in qt StyleSheets

6 Answers6

Linked