NAME

CSS::LESS::Filter - tweak CSS/LESS files such as of Twitter Bootstrap

SYNOPSIS

  use CSS::LESS::Filter;
  use Path::Extended;
  
  my $filter = CSS::LESS::Filter->new;
  
  # simply set a new property value
  $filter->add('.highlight { color:' => '#ff6600');
  
  # tweak a property value more liberally
  $filter->add('.highlight { background-image:' => sub {
    my $value = shift;
    $value =~ s/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/#$3$1$2/;
    $value;
  });
  
  # Want to tweak the whole ruleset?
  $filter->add('.dropdown {' => sub {
    my $inside = shift;
    return "// this is added by CSS::LESS::Filter\n$inside";
  });
  
  # remove every ruleset that matches .ie class
  # (returning undef removes the declaration/ruleset entirely)
  $filter->add(qr/\.ie \{/ => undef);
  
  # You can also tweak an "@" rule, but take care: the same "@" rule
  # may (and often) be seen several times in the same context.
  # You most probably need to check its value in a callback.
  $filter->add('@import' => sub {
    my $value = shift;
    return if $value eq q{"foo.less"}; # not to @import "foo.less";
    $value; # preserve the rest
  });
  
  # parse LESS, apply filters, and return the modified LESS
  my $file = file('less/docs.less');
  my $less = $file->slurp;
  $file->save($filter->process($less, {mode => 'append'}));

DESCRIPTION

Twitter Bootstrap is nice and handy. You can also customize its various aspects fairly easily. However, its LESS files still have fixed values which you probably need to tweak by hand every time you update.

CSS::LESS::Filter makes this tweak easier.

METHODS

new

Creates an object. May take filter settings (see below).

add

Adds a filter. See SYNOPSIS for basic usage. Selectors are concatenated with a ' { ' (space, brace, space), and declaration property has a trailing ':' (colon). @ rules have no trailing colon. You can use regular expressions to match multiple selectors, though with some speed penalty. (Note that you may eventually need to escape '{' to suppress future warnings.)

If you just want to append something at the end of a less file, pass an empty string as a selector.

  # this comment will be appended at the end.
  $filter->add('' => "// whatever you want to add\n");

process

takes LESS content, parses it to apply filters, and returns the result. Optionally, you can pass a hash reference to change filter's behavior. As of version 0.03, only available option is mode:

mode => 'warn'

CSS::LESS::Filter warns if any of the filters are not used. Those unmatched filters will be ignored.

mode => 'append'

Under this mode, unmatched filters are used to append things at the end of the processed LESS. CSS::LESS::Filter still warns if any filter that uses a regular expression fails.

NOTE

CSS::LESS::Filter only supports LESS to LESS (or CSS to CSS) filtering. You still need to use "less.js" or its variants to convert LESS into CSS.

SEE ALSO

http://lesscss.org/

http://www.w3.org/TR/CSS/

AUTHOR

Kenichi Ishigaki, <ishigaki@cpan.org>

COPYRIGHT AND LICENSE

Copyright (C) 2012 by Kenichi Ishigaki.

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.