Crate turf

turf 🌱

turf allows you to build SCSS to CSS during compile time and inject those styles into your binary.

Features

turf will:

• 🌿 transform your SCSS files into CSS with grass, right at compilation time.
• 🪴 simplify your workflow with stylist, generating unique and dynamic class names for your CSS during compilation.
• 🎨 inject the generated CSS into your binary, guaranteeing quick access to your styles whenever you need them.

Usage

For a complete runnable example project, you can check out the leptos-example / yew-example.

1. Create SCSS styles for your application.

// file at scss/file/path.scss

:root {
    color: red;

    .SomeClass {
        color: blue;
    }
}

By following the link here you can gain a deeper understanding of how stylist processes selectors. By understanding these rules, you can effectively utilize the dynamic class names generated.

2. Use the style_sheet macro to include the resulting CSS in your code

turf::style_sheet!("scss/file/path.scss");

The macro from the above example will expand to the following code:

static CLASS_NAME: &'static str = "<class_name>";
static STYLE_SHEET: &'static str = "<style_sheet>";

3. Configuration

The configuration for turf can be specified in the Cargo.toml file using the [package.metadata.turf] key. This allows you to conveniently manage your SCSS compilation settings within your project’s manifest.

The following configuration options are available:

• load_paths (array of directories): Specifies the directories where SCSS files should be searched during compilation. This option allows you to include SCSS files from different locations, such as external libraries or custom directories.
• output_style (string): Defines the format of the generated CSS output. This option supports two values: expanded and compressed. Use “expanded” if you prefer a more readable and indented CSS output, or “compressed” for a minified and compact version.

Example configuration:

[package.metadata.turf]
load_paths = ["path/to/scss/files", "another/path"]
output_style = "compressed"

Macros

• style_sheet
  generates the static variables CLASS_NAME and STYLE_SHEET with default settings or the settings specified in the Cargo.toml