Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Automatic Color Extraction and Vendor Prefixed Modules #18

Merged
merged 1 commit into from Jun 3, 2013

Conversation

Projects
None yet
2 participants

This commit allows to automatically extract all colors that are used
in the css file into global variables that can be changed more easily.
In addition this adds an option to automatically extract vendor
prefixed logic into mixins so that they become easier digestible. The
goal of these modifications is to make transitioning with a given
CSS code base easier.

Essentially this means, that this block:

.service-block .span4 {
  color: red;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

will become this in LESS

@color0: red;

.vp-transition(@p0; @p1; @p2) {
  -webkit-transition: @p0 @p1 @p2;
  -moz-transition: @p0 @p1 @p2;
  -o-transition: @p0 @p1 @p2;
  transition: @p0 @p1 @p2;
}

.service-block .span4 {
  color: @color0;
  .vp-transition(all; 0.3s; ease-in-out);
}

The new options are available to the command line via:

Usage: css2less [options] filename
-c, --colors                     Automatically extract colors from less
-m, --mixins                     Automatically extract vendor prefixed mixins
-h, --help                       Show this message]

The code is portable Ruby 1.8.7 and Ruby 1.9

Introducing color extraction and vendor prefix handling
This commit allows to automatically extract all colors that are used
in the css file into global variables that can be changed more easily.
In addition this adds an option to automatically extract vendor
prefixed logic into mixins so that they become easier digestible.

Essentially this means, that this block:

    .service-block .span4 {
      color: red;
      -webkit-transition:all 0.3s ease-in-out;
      -moz-transition:all 0.3s ease-in-out;
      -o-transition:all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;
    }

will become this in LESS

    @color0: red;

    .vp-transition(@p0; @p1; @p2) {
      -webkit-transition: @p0 @p1 @p2;
      -moz-transition: @p0 @p1 @p2;
      -o-transition: @p0 @p1 @p2;
      transition: @p0 @p1 @p2;
    }

    .service-block .span4 {
      color: @color0;
      .vp-transition(all; 0.3s; ease-in-out);
    }

The goal of these modifications is to make transitioning with a given
CSS code base easier. The new options are available to the command
line via:

    Usage: css2less [options] filename
    -c, --colors                     Automatically extract colors from less
    -m, --mixins                     Automatically extract vendor prefixed mixins
    -h, --help                       Show this message]

The code is portable Ruby 1.8.7 and Ruby 1.9

thomaspierson added a commit that referenced this pull request Jun 3, 2013

Merge pull request #18 from grundprinzip/master
Automatic Color Extraction and Vendor Prefixed Modules

@thomaspierson thomaspierson merged commit 6f1cf20 into thomaspierson:master Jun 3, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment