-
-
17 May 2022 18:47:24 UTC
- Distribution: Crayon
- Module version: 1.00
- Source (raw)
- Browse (raw)
- Changes
- How to Contribute
- Issues
- Testers (132 / 0 / 0)
- Kwalitee
Bus factor: 1- 79.49% Coverage
- License: artistic_2
- Perl: v5.6.0
- Activity
24 month- Tools
- Download (8.73KB)
- MetaCPAN Explorer
- Permissions
- Subscribe to distribution
- Permalinks
- This version
- Latest version
- Dependencies
- Blessed::Merge
- Colouring::In
- Struct::Match
- and possibly others
- Reverse dependencies
- CPAN Testers List
- Dependency graph
- NAME
- VERSION
- SYNOPSIS
- SUBROUTINES/METHODS
- Crayon
- AUTHOR
- BUGS
- SUPPORT
- ACKNOWLEDGEMENTS
- LICENSE AND COPYRIGHT
NAME
Crayon - dedupe, minify and extend CSS
VERSION
Version 1.00
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:
RT: CPAN's request tracker (report bugs here)
CPAN Ratings
Search CPAN
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)
Module Install Instructions
To install Crayon, copy and paste the appropriate command in to your terminal.
cpanm Crayon
perl -MCPAN -e shell install Crayon
For more information on module installation, please visit the detailed CPAN module installation guide.