## Custom SASS

You can extend and modify the Gramex UI component library using SASS. This lets you add components, change defaults, and modify the behavior of Bootstrap.

The source for Gramex UI components is at `bootstrap-theme.scss`.

To serve your own SASS file (e.g. called `style.scss`) as CSS, use:

    url:
      my-css-handler:
        pattern: ...
        handler: FunctionHandler
        kwargs:
          function: gramex.apps.ui.sass(handler, r"$YAMLPATH/style.scss")

This serves `style.scss` as a CSS file. Here's an example:

    /* Define custom variables */
    $color: black !default;
    /* You can use Tornado templates. URL query parameters are available in `variables` */
    $color: {{! variables.get('color', 'black') }};
    /* Import UI components from the variable uicomponents_path */
    @import "{{! uicomponents_path }}";
    /* Or import Bootstrap directly from bootstrap_path */
    @import "{{! bootstrap_path }}";
    /* Add your custom components here */