/ 
Crayon-0.50
River stage zero No dependents
/ Crayon

NAME

Crayon - dedupe, minify and extend CSS

VERSION

Version 0.50

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)