2 releases

Uses new Rust 2024

new 0.1.1	Mar 27, 2025
0.1.0	Mar 27, 2025

#177 in Web programming

222 downloads per month

Custom license

110KB
856 lines

Rusty Cascading Style Sheets (RCSS)

Tip

Download the VSCode extension for syntax highlighting!

Rusty Cascading Style Sheets (RCSS) is a styling language that brings Rust-inspired syntax to CSS. It combines the robustness of Rust with SASS-like features such as nesting and variables for cleaner, more maintainable styles.

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%;
  }
}

Note

The above RCSS code compiles to CSS in around 572.40µs!

Installation

First, if you don't have Cargo (Rust's package manager) installed, you can install it by following the instructions on the official Rust website.

Then, install:

cargo install rcss-css

Warning

If you encounter the following warning:

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

For Linux Users

Add the following line to your shell configuration file (e.g., .bashrc, .zshrc, etc.):

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

Reload your shell configuration to apply the changes:

source ~/.bashrc

For Windows Users

Open the Start Menu and search for "Environment Variables."
Click on "Edit the system environment variables."
In the System Properties window, click the Environment Variables button.
Under System variables, locate the Path variable and click Edit.
Add the following path to the list:
```
C:\Users\<YourUsername>\.cargo\bin
```
Click OK to save your changes.

Restart your terminal or command prompt to ensure the updated PATH is recognized.

Roadmap

✅ Phase 1: Core Features (Current)

Implement Rust-like syntax parsing.
Support variables and nesting.
Support functions with no arguments
Develop a VS Code extension with syntax highlighting.

🚧 Phase 2: Enhancements (Upcoming)

Support functions with arguments
Implement importing
Add RCSS formatter
Improve output css format
Improve error handling and debugging tools.

🔮 Phase 3: Future Plans

WASM support.

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

RCSS is licensed under the MIT License.

Dependencies

~6–15MB
~188K SLoC