SugarSS
SugarSS 是 PostCSS 的基于缩进的 CSS 语法。Parcel 使用 @parcel/transformer-sugarss
插件自动支持 SugarSS。当检测到 .sss
文件时,它将自动安装到你的项目中。
¥SugarSS is an indent-based CSS syntax for PostCSS. Parcel supports SugarSS automatically using the @parcel/transformer-sugarss
plugin. When a .sss
file is detected, it will be installed into your project automatically.
编译的 SugarSS 文件的处理方式也与 CSS 相同,这意味着它是针对你的浏览器目标进行编译的,并且还会应用任何 PostCSS 插件。还可以通过使用 .module.sss
扩展名命名文件来使用 CSS 模块。
¥Compiled SugarSS files are also processed the same way as CSS, which means it is compiled for your browser targets, and any PostCSS plugins are also applied. CSS modules can also be used by naming your file with the .module.sss
extension.
用法示例
#¥Example usage
在 HTML 文件中引用 SugarSS 文件:
¥Referencing a SugarSS file in an HTML file:
<link rel="stylesheet" href="style.sss" />
在 JavaScript 或 TypeScript 中将 SugarSS 文件作为 CSS 模块导入:
¥Importing a SugarSS file as a CSS module in JavaScript or TypeScript:
import * as classes from './style.module.sss';
document.body.className = classes.body;
使用 Parcel CLI 直接编译 SugarSS
¥Directly compiling SugarSS using the Parcel CLI
parcel build style.sss