The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
 / 
Crayon-1.02
River stage zero No dependents
1 ++
/ Crayon

NAME

Crayon - dedupe, minify and extend CSS

VERSION

Version 1.02

SYNOPSIS

        use Crayon;

        my $crayon = Crayon->new(
                pretty => 1
        );

        $crayon->parse(q|
                body .class {
                        background: lighten(#000, 50%);
                        color: darken(#fff, 50%);
                }
        |);

        $crayon->parse(q|
                body {
                        .other {
                                background: lighten(#000, 50%);
                                color: darken(#fff, 50%);
                        }
                }
        |);

        my $css = $crayon->compile();
        # body .class, body .other {
        #       background: #7f7f7f;
        #       color: #7f7f7f;
        # }

SUBROUTINES/METHODS

new

Instantiate a new Crayon Object.

        Crayon->new();

parse

Parse css strings into Crayons internal struct.

        $crayon->parse(q|
                .some .class {
                        ...
                }
        |);

parse_file

Parse a file containing CSS/Crayon.

        $crayon->parse_file($file_name);

compile

Compile the current Crayon struct into CSS.

        $crayon->compile();

compile_file

Compile the current Crayon struct into the given file.

        $crayon->compile_file($file_name);

Crayon

Variables

Crayon allows you to define variables that can be reused throughout your css.

        $width: 10px;
        $height: 20px;
        #header {
                width: $width;
                height: $height;
        }

Outputs:

        #header {
                width: 10px;
                height: 20px;
        }

Scope

Scope in Crayon is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren't found, it's inherited from the "parent" scope.

        $var: red;
        #page {
                $var: white;
                #header {
                        color: $var; // white
                }
        }

Like CSS custom properties, mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Crayon code is identical to the previous example:

        $var: red;
        #page {
                #header {
                        color: $var; // white
                }
                $var: white;
        }

Mixins

Mixins are a way of including ("mixing in") a bunch of properties into a rule-set.

        %border: (
                border-top: dotted 1px black;
                border-bottom: solid 2px black; 
        );
        #header {
                background: #000;
                %border;
        }

Outputs:

        #header {
                background: #000;
                border-top: dotted 1px black;
                border-bottom: solid 2px black; 
        }

Maps

You can also use mixins as maps of values.

        %colors: {
                primary: blue;
                secondary: green;
        };
        .button {
                color: $colors{primary};
                border: 1px solid $colors{secondary};
        }

Nesting

Crayon gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:

        #header {
                color: black;
        }
        #header .navigation {
                font-size: 12px;
        }
        #header .logo {
                width: 300px;
        }

In Crayon, we can also write it this way:

        #header {
                color: black;
                .navigation {
                        font-size: 12px;
                }
                .logo {
                        width: 300px;
                }
        }

You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

        .clearfix {
                display: block;
                zoom: 1;

                &after {
                        content: " ";
                        display: block;
                        font-size: 0;
                        height: 0;
                        clear: both;
                        visibility: hidden;
                }
        }

Functions

Crayon currently provides a variety of functions which transform colors.

mix
lighten
darken
fade
fadeout
fadein
tint
shade
saturate
desaturate
greyscale

Comments

Both block-style and inline comments may be used:

        /* One heck of a block
        *   style comment! */
        $var: red;

        // Get in line!
        $var: white;

Deduplication

Crayon attempts to deduplicate your CSS so when compiled the final string contains the least amount of characters possible.

        body .class {
                background: lighten(#000, 50%);
                color: darken(#fff, 50%);
        }
        body {
                .other {
                        background: lighten(#000, 50%);
                        color: darken(#fff, 50%);
                }
        }

Output:

        body .class, body .other {
                background: #7f7f7f;
                color: #7f7f7f;
        }

Pretty

The default behaviour for Crayon is to minify CSS. However if you prefer you have the option to pretty print aswell.

        Crayon->new( pretty => 1 );

AUTHOR

LNATION, <email at lnation.org>

BUGS

Please report any bugs or feature requests to bug-crayon at rt.cpan.org, or through the web interface at https://rt.cpan.org/NoAuth/ReportBug.html?Queue=Crayon. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.

SUPPORT

You can find documentation for this module with the perldoc command.

        perldoc Crayon

You can also look for information at:

ACKNOWLEDGEMENTS

LICENSE AND COPYRIGHT

This software is Copyright (c) 2021 by LNATION.

This is free software, licensed under:

  The Artistic License 2.0 (GPL Compatible)