[!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.

/* 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;
    }
}

[!NOTE] The above RCSS code compiles to CSS in around 500µs!

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

1. Open the Start Menu and search for "Environment Variables."

2. Click on "Edit the system environment variables."

3. In the System Properties window, click the Environment Variables button.

4. Under System variables, locate the Path variable and click Edit.

5. Add the following path to the list:

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

6. Click OK to save your changes.

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

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.