简体中文 | English

QssStylesheetEditor

QssStylesheetEditor 是一个功能强大的 Qt 样式表(QSS)编辑器，支持实时预览，自动提示，自定义变量, 支持预览自定义ui代码，引用QPalette等功能。

软件界面

功能简介

• Qss代码高亮，代码折叠
• Qss代码自动提示，自动补全
• 实时预览 Qss 样式效果，可以预览几乎所有的 qtwidget 控件效果
• 支持预览自定义界面代码
• 支持在 Qss 中自定义变量
• 自定义变量可以在颜色对话框中拾取变量的颜色
• 支持通过颜色对话框改变QPalette，并在Qss中引用
• 支持相对路径引用图片，以及引用资源文件中的图片
• 支持切换不同的系统 theme，如 xp 主题，vista 主题等(不同 theme 下 qss 效果会略有差异)
• 能够在 windows，linux，unix 上运行
• 支持多国语言（目前已有中文，英文，俄文翻译）

安装使用

按照如下步骤运行 QssStylesheetEditor:

1. 下载 QssStylesheetEditor-1.7-py3-none-any.whl
2. 运行 pip install QssStylesheetEditor-1.7-py3-none-any.whl 安装 QssStylesheetEditor
3. 命令行执行 qsseditor 或者 QssStylesheetEditor 命令运行程序

windows 64bit 操作系统可以下载安装包或者绿色版exe运行。下载地址：

• QssStylesheetEditor1.7 64位安装包
• QssStylesheetEditor1.7 64位绿色版 [下载] (提取码: 65kn)

或者可以根据如下步骤手动安装：

1. 安装 python3： 参考 python 官网 http://python.org/
2. 安装依赖包：
   • 安装 preimport： pip install preimport
   • 安装 tomlconfig: pip install tomlconfig
   • 安装 CodeEditor pip install CodeEditor
   • 安装 requests pip install requests
3. 下载解压软件：
   • 下载 QssStylesheetEditor_v1.7.zip
   • 解压并进入 QssStylesheetEditor_v1.7 文件夹： cd QssStylesheetEditor_v1.7
4. 运行 QssStylesheetEditor:
   • 鼠标双击 qsseditor.pyw
   • 或者命令行运行 python qsseditor.pyw

变量定义

本软件支持在 qss 中自定义变量，变量定义方式如下：

$background = #fff;
$border     = red;
$text     = rgb(10,10,10);

变量引用方法：通过“$变量名”方式引用。参考如下：

QWidget
{
    color: $text;
    background-color: $background;
}

qss 中颜色等有很多相同的，使用变量后会大大减少工作量，方便修改。

• 定义了变量的 qss 文件在 QssStylesheetEditor 中扩展名定义为 qsst
• 可以通过软件的导出功能，将 qsst 导出为 qss 文件

当然也可以直接在 QssStylesheetEditor 软件中编辑 qss 样式

QssStylesheetEditor 自动识别添加变量，颜色拾取功能

在 QssStylesheetEditor 中自定义一个变量后，在软件的颜色栏会自动显示变量名字和颜色，点击颜色可以用通过颜色拾取框选取变量颜色。

在 QssStylesheetEditor 中引用一个未定义的变量后，软件会自动识别，并在颜色栏显示该变量名字。如果通过颜色拾取框为该变量选择了颜色，这软件会自动在文档中添加该变量定义。

图片引用

相对路径引用

background-image: url("img/close.png");
/* background-image: url(img/close.png); */

软件会在打开的 xxx.qss 文件所在的文件夹下查找 img/close.png 文件。

资源文件引用

background-image: url(":/img/close.png");
/* background-image: url(:/img/close.png); */

软件会在当前打开的 xxx.qss 样式文件所在目录中搜索资源文件 xxx.py 并自动加载。

QPalette引用

在qss中可以直接引用QPalette，格式如下：

color: palette(Text);
background-color: palette(Window);

通过Palette对话框，可以用颜色对话框拾取颜色的方式改变QPalette中每个ColorRole 的颜色。改变后的QPalette可以通过查看代码按钮显示QPalette代码。

Palette对话框中reset 按钮可以取消本次打开对话框做的修改。

自定义ui代码预览

在preview界面的'自定义'标签内可以编辑自己想要预览的ui代码。点击'预览'按钮预览效果。

自定义代码需要定义一个类名称为'MainWindow'。参考下图：

screenshot

自动补全

other os

old version