README

一般使用 Less

解析库可能会根据您要使用的语言提供专用信息。

前端

示例 TYPOScript

page.includeCSS.testLess = EXT:dyncss_test/Resources/Public/Stylesheets/Example.less

示例覆盖（动态颜色设置，动态图片覆盖）

plugin.tx_dyncss {
	register = LOAD_REGISTER
	register {
		inputColor1.cObject = TEXT
		inputColor1.cObject {
			value = {$lessColorScheme}
			split {
				token.char = 124
				returnKey = 0
			}
		}
		inputColor2 < .inputColor1
		inputColor2.cObject.split.returnKey = 1
	}
	overrides {
		inputColor1 = TEXT
		inputColor1 {
			data = register:inputColor1
		}
		inputColor2 = TEXT
		inputColor2 {
			data = register:inputColor2
		}
		logo = IMG_RESOURCE
		logo {
			stdWrap.wrap = url("|")
			file = GIFBUILDER
			file {
				XY = [20.w],[20.h]
				20 = IMAGE
				20.file = GIFBUILDER
				20.file {
					XY = 128,22
					backColor.data = register:inputColor1
				}
				20.mask = EXT:example/css/colors/less/images/logo_sw.png
			}
		}
	}
	registerReset = RESTORE_REGISTER
}

示例 less 文件

	@linkColor: blue;
	@logo: url(someWeirdUrl);

	a {
		color: @linkColor;
	}

	h1 {
		a {
			color: lighten(@linkColor, 20%);
		}
	}
	#logo {
		background-image:@logo
	}

后端：包含在 backend.php 中

要了解其工作原理，请查看 dyncss_test。

缓存

在生产模式下，只有当直接由 typoscript 包含的最顶层 less 或 sass 文件被修改时，CSS 才会重新渲染。
在开发模式下，less 或 sass 文件内部导入的文件更改也会触发新的渲染。
开发模式可以通过 TYPO3 应用程序上下文 "开发" 或安装工具中的预置 "开发" 触发。另外，如果您更改了在 less 文件中使用的 TS 值，也会触发重新渲染。

此外，我们添加了一个新的清除缓存按钮，仅用于清除 dyncss 缓存。

源映射

如果编译库支持源映射，您可以通过在扩展管理器设置中启用 dyncss 的调试模式来启用该功能。

通常，源映射会附加到生成的 css 文件中，以避免混淆。

重要

您需要禁用 CSS 连接以使源映射工作。

这可以通过以下基于您的环境的 TS 实现：

themes.configuration.css.concatenate = 0
page.config.concatenateCss = 0