ved-patel226/RCSS

一个使用 Rust 语法的 CSS 扩展

License

MIT license 10 stars 0 forks

Rusty Cascading Style Sheets (RCSS)

提示

下载 VSCode extension 以获得语法高亮显示！

Rusty Cascading Style Sheets (RCSS) 是一种样式语言，它将 Rust 风格的语法引入到 CSS 中。它结合了 Rust 的稳健性以及类似 SASS 的功能（例如嵌套和变量），从而实现更简洁、更易于维护的样式。

let variable: "#FFFFFF";
let breakpoint: "768px";
fn padding() {
 padding: 20px;
}
.container {
  padding();
  h2 {
    color: blue;
  }
}
h4 {
  width: 50%;
  color: green;
}

/* MOBILE STYLES */
@media screen and (max-width: &breakpoint) {
 .container {
   width: 100%;
 }
 h4 {
   width: 100%;
 }
}

注意 上面的 RCSS 代码编译为 CSS 大约需要 572.40µs！

安装

首先，如果您没有安装 Cargo（Rust 的包管理器），您可以通过按照 官方 Rust 网站 上的说明进行安装。

然后，安装：

cargo install rcss-css

警告 如果您遇到以下警告：

warning: be sure to add `/home/<YourUsername>/.cargo/bin` to your PATH to be able to run the installed binaries

对于 Linux 用户

将以下行添加到您的 shell 配置文件（例如，.bashrc、.zshrc 等）：

export PATH="$HOME/.cargo/bin:$PATH"

重新加载您的 shell 配置以应用更改：

source ~/.bashrc

对于 Windows 用户

1. 打开“开始”菜单并搜索“环境变量”。
2. 单击“编辑系统环境变量”。
3. 在“系统属性”窗口中，单击“环境变量”按钮。
4. 在“系统变量”下，找到 Path 变量，然后单击“编辑”。
5. 将以下路径添加到列表中：

C:\Users\<YourUsername>\.cargo\bin

6. 单击“确定”以保存更改。

重新启动您的终端或命令提示符，以确保识别更新后的 PATH。

用法

RCSS 需要一个目录参数来监视。保存文件时，RCSS 将自动编译到 ../css

rcss-css styles/rcss

此命令会将 styles/rcss 中的 .rcss 文件编译为 styles/css 中的标准 CSS 文件。

路线图

✅ 第一阶段：核心功能（当前）

• 实现类似 Rust 的语法解析。
• 支持变量和嵌套。
• 支持无参数函数
• 开发具有语法高亮的 VS Code 扩展。

🚧 第二阶段：增强功能（即将推出）

• 支持带参数的函数
• 实现导入
• 添加 RCSS 格式化程序
• 改进输出 CSS 格式
• 改进错误处理和调试工具。

🔮 第三阶段：未来计划

• WASM 支持。

Base logo by Dzuk, licensed under CC BY-NC-SA. Download the emoji set

RCSS is licensed under the MIT License.