The Perl and Raku Conference 2025: Greenville, South Carolina - June 27-29 Learn more

 / 
Crayon-1.05
River stage zero No dependents
/ Crayon

NAME

Crayon - dedupe, minify and extend CSS

VERSION

Version 1.05

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)