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.

/* common/variables.rcss:
let primary_color: "#FFFFFF";
let secondary_color: "black";

fn padding() {
    padding: 10px;
}
*/

use common::variables::*;

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

.container {
    width: 50%;
    padding();

    &:hover {
        padding: 40px;
    }

    h2 {
        color: &primary_color;
    }
}

h4 {
    width: 50%;
}


/* MOBILE STYLES */

@media screen and (max-width: 480px) {
    .container {
        width: 100%;
    }

    h4 {
        width: 100%;
        color: &secondary_color;
    }
}

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: be sure to add `/home/<YourUsername>/.cargo/bin` to your PATH to be able to run the installed binaries

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

source ~/.bashrc

RCSS expects a directory argument to watch. On file save, RCSS will compile automatically to ../css

rcss-css styles/rcss

This command will compile .rcss files in styles/rcss into standard CSS files at styles/css.

✅ 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.
• Implement importing

🚧 Phase 2: Enhancements (Upcoming)

• Support functions with arguments
• Add RCSS formatter
• Improve output css format

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

RCSS is licensed under the MIT License.