QtSASS：将SCSS文件编译成Qt样式表

版权所有 © 2015 Yann Lanthony

版权所有 © 2017–2018 Spyder项目贡献者

概述

SASS 为CSS带来了无数惊人的功能。除了在Web开发中使用外，CSS也是美化基于Qt的桌面应用程序的方式。然而，Qt的CSS有一些变体，这阻止了SASS编译器的直接使用。

此工具的目的是通过处理这些变体来弥合SASS和Qt-CSS之间的差距。

Qt的CSS特定性

QtSASS的目标是能够根据一个100%有效的SASS文件生成Qt-CSS样式表。这是它处理Qt特定之处以及您应该如何修改CSS样式表以使用QtSASS的方式。

选择器中的"!"符号

Qt允许根据小部件的状态定义其样式，如下所示

QLineEdit:enabled {
...
}

然而，“not”状态是有问题的，因为它在选择器名称中引入了感叹号，这在SASS/CSS中是无效的

QLineEdit:!editable {
...
}

QtSASS允许在选择器名称中使用"!"符号；SASS文件将被预处理器处理，并且任何:!的出现都将被替换为:_qnot_（表示“Qt not”）。但是，使用此功能会阻止拥有100%有效的SASS文件，因此对!的支持可能会在未来发生变化。这可以在您的SASS文件中直接使用_qnot_关键字替换。

QLineEdit:_qnot_editable { /* will generate QLineEdit:!editable { */
...
}

qlineargradient

qlineargradient函数也有一个无效的CSS语法。

qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.1 blue, stop: 0.8 green)

为了支持qlineargradient，QtSASS提供了一个预处理器和qlineargradient函数的SASS实现。上述QSS语法将被替换为以下内容

qlineargradient(0, 0, 0, 1, (0.1 blue, 0.8 green))

您也可以直接在QtSASS中使用此语法。

qlineargradient(0, 0, 0, 1, (0.1 blue, 0.8 green))
# the stops parameter is a list, so you can also use variables:
$stops = 0.1 blue, 0.8 green
qlineargradient(0, 0, 0, 0, $stops)

qrgba

Qt的rgba

rgba(255, 128, 128, 50%)

被CSS rgba替换

rgba(255, 128, 128, 0.5)

可执行使用方法

将SASS样式表编译成Qt兼容的CSS文件

# If -o is omitted, output will be printed to console
qtsass style.scss -o style.css

使用监视模式并在每个文件保存时自动重新编译样式表

# If -o is omitted, output will be print to console
qtsass style.scss -o style.css -w

将包含SASS样式的目录编译成Qt兼容的CSS文件

qtsass ./static/scss -o ./static/css

您还可以使用监视模式来监视整个目录的更改。

qtsass ./static/scss -o ./static/css -w

将环境变量QTSASS_DEBUG设置为1或传递--debug标志以启用日志记录。

qtsass ./static/scss -o ./static/css --debug

API方法

compile(string, **kwargs)

使QtSASS源代码符合并编译成CSS。

此函数在将QtSASS传递给sass.compile之前将其转换为有效的SCSS。您提供的任何关键字参数将与qtsass的默认关键字参数合并并传递给sass.compile。

示例

>>> import qtsass
>>> qtsass.compile("QWidget {background: rgb(0, 0, 0);}")
QWidget {background:black;}

参数

• string: 要符合和编译的QtSASS源代码。
• kwargs: 要传递给sass.compile的关键字参数

返回

• Qt兼容的CSS字符串

compile_filename(input_file, output_file=None, **kwargs):

编译QtSASS文件并将其作为Qt兼容的CSS返回。可选地保存到文件。

示例

>>> import qtsass
>>> qtsass.compile_filename("dummy.scss", "dummy.css")
>>> css = qtsass.compile_filename("dummy.scss")

参数

• input_file: QtSass文件的路径。
• output_file: 写入Qt兼容CSS的路径。
• kwargs: 要传递给sass.compile的关键字参数

返回

• Qt兼容的CSS字符串

compile_dirname(input_dir, output_dir, **kwargs):

编译目录中的QtSASS文件，包括子目录。

>>> import qtsass
>>> qtsass.compile_dirname("./scss", "./css")

参数

• input_dir: 包含QtSass文件的目录的路径。
• output_dir: 编译的Qt兼容CSS文件要写入的目录。
• kwargs: 要传递给sass.compile的关键字参数

enable_logging(level=None, handler=None):

启用qtsass的日志记录。

将qtsass记录器的级别设置为：1.提供的日志级别 2.如果QTSASS_DEBUG环境变量为True值，则为logging.DEBUG 3.logging.WARNING

>>> import logging
>>> import qtsass
>>> handler = logging.StreamHandler()
>>> formatter = logging.Formatter('%(level)-8s: %(name)s> %(message)s')
>>> handler.setFormatter(formatter)
>>> qtsass.enable_logging(level=logging.DEBUG, handler=handler)

参数

• level: 可选的日志级别
• handler: 可选的处理程序

watch(source, destination, compiler=None, Watcher=None):

监视源文件或目录，在修改时编译QtSass文件。

当源是文件时，编译器函数默认为compile_filename；当源是目录时，为compile_dirname。

参数

• source: 源QtSass文件或目录的路径。
• destination: 输出CSS文件或目录的路径。
• compiler: 编译函数（可选）
• Watcher: 默认为qtsass.watchers.Watcher（可选）

返回

• qtsass.watchers.Watcher实例

贡献

欢迎每个人贡献力量！

赞助商

Spyder及其子项目得到了慷慨的支持，这些支持来自

以及我们从世界各地的用户那里收到的捐赠，通过Open Collective

请考虑成为赞助商！