intelligent mixins for less.js
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
less
lib
test
.gitignore
.travis.yml added csslint-test and test for namespaced import Apr 6, 2014
Gruntfile.js
README.md
_more.less
bower.json
license.txt
npm-shrinkwrap.json
package.json

README.md

DEPRECATED

if you need the functions please use homeless instead.
if you need vendor prefixes use

  • autoprefixer
  • or keep using this library. (not recommended)

more-or-less

Build Status Dependencies Status

Faster and more powerful mixins for less.js

Compared to lesshat

                                   MORE-OR-LESS          LESSHAT(2)
Keyframes                               ✓                  ✓
Unlimited gradients                     ✓                  ✓
SVG gradients for IE9                   ✓                  ✓
Font-face                               ✓                  ✓
Input placeholders                      ✓                  ✓
Unlimited transitions                   ✓                  ✓
Prefixed transition values              ✓                  ✓
Units completion                        ✗                  ✓
for loops                               ✓                  ✗
get Index                               ✓                  ✗
in Array                                ✓                  ✗
scoping                                 ✓                  ✗
repeat                                  ✓                  ✗
join                                    ✓                  ✗
time to compile compare file           8s                30.6s

You can find a more detailed documentation here: Documentation

Basic Info

License:

Dependencies:

Versions

What does this do?

  • It adds some functions and mixins for lessjs
  • It is stronger and a lot faster than lesshat but does NOT USE ANY inline-javaScript
  • It is adds helpul functions
    • .if() (if - then - [else])
    • .scope() (leaner scoping)
    • .index() (find the index of a value in an array)
    • .for() (create a for loop with a callback)
    • .repeat() (repeats a string @n times and returns it with an optional @glue)
    • .join() (joins values from an array with a @glue)
    • .inArray() (checks if a value is in an array and return a boolean)
  • It allows to import reset or normalize
    • @import 'lib/reset'; to import the reset styles
    • @import 'lib/normalize' to import the normalize styles
  • It allows to use "more or less" of the library
    • @import '_more'; to get access to the entire library of mixins
    • 'less/css3/_transition'; to get access to the transition library
  • control prefixes or legacy support with global-variables
  • Add a namespace to avoid conflicts with other libraries

Bower

bower install more-or-less

Example for "less" imports

import all transitions

@import 'less/css3/_transition';

.transition(height 100ms linear 100ms);
.transition-property(height, left, top);
.transition-duration(100ms, 200ms, 300ms);
.transition-timing-function(linear, ease-out, ease);
.transition-delay(0ms, 100ms, 300ms);

import transition oneliner only

@import 'less/css3/transition/_transition';

.transtion(height 100ms linear 100ms);

What does this NOT do?

  • clean my apartment
  • eat your time

How mixins are built

Instead of writing redundant code this library offers a pretty complex but well thought through architecture.
This way mixins can easily be created or modified.

Example CSS3 Mixin

@import '../helpers/_prefix';

// box-shadow mixin
.box-shadow(@values...) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: box-shadow;
    .prefix();
}

// border-radius mixin
.border-radius(@values...) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: border-radius;
    .prefix();
}

Notice

Instead of auto-prefixing it is advised to use libraries like autoprefixer or similar.
Aaaaanyways... if you want to use auto-prefixing mixins you can use:
@import 'less/_css3'; or it's decendants

Usage

// background-image 
//················································

    .background-image(linear-gradient(top, #000, #fff));
    .background-image(url('test.png'),linear-gradient(top, #000, #fff));

// border-radius
//················································

.border-radius(1px 2px 3px 4px;);

// box-shadow
//················································

.box-shadow(1px 0 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,0,0,0.3););

// linear-gradient (generates svg and old webkit syntax)
//................................................

.linear-gradient(to bottom, #000, #f00);


// transition (oneline)
//················································

.transition(transform 200ms linear 400ms;);

// repeat
//················································

& {
    .repeat('.test', ' + ', 5);
    @{string} {
        float: right;
    }
}

// join
//················································

.cats:before {
    @cats: cheetah, tiger, lion;
    .join(@cats, ' & ');
    content: '@{string}';
}

// if
//················································

.if(isnumber(2), {
    .-then(){
        log {
            condition: is a number;
        }
    }
    .-else(){
        log {
            condition: is not a number;
        }
    }
});

// scope
//················································

.test {
    .scope(a); // no return but no error
    .scope(1); // no return but no error
    .scope({
        @height: 100px;
        height: @height;
    });
    .scope({
        @a: foo;
        @b: bar;
        foo: @a;
        bar: @b;
    });
}

Keyframes

The mixin call must be wrapped in a selector e.g. &{}.
Using an "&" (ampersand) works fine.

Keyframes INPUT

& {
    .keyframes(testanimation);.-frames(@-...){
        0% {
            left: 0;
            @{-}transform: translate(10px, 20px);
        }

        100% {
            left: 100%;
            @{-}transform: translate(100px, 200px);
        }
    }
}

Keyframes OUTPUT

@-webkit-keyframes testanimation {
  0% {
    left: 0;
    -webkit-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -webkit-transform: translate(100px, 200px);
  }
}
@-moz-keyframes testanimation {
  0% {
    left: 0;
    -moz-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -moz-transform: translate(100px, 200px);
  }
}
@keyframes testanimation {
  0% {
    left: 0;
    transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    transform: translate(100px, 200px);
  }
}

Namespaces

#more-or.less {
    @import '../_more';
}


.border-radius {
    #more-or.less > .border-radius(1px 2px 3px 4px);
}

.box-shadow {
    #more-or.less > .box-shadow(1px 0 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,0,0,0.3););
}

.box-sizing {
    #more-or.less > .box-sizing(border-box);
}

Examples

Animaless

A loop to check if an animal belongs to a group (e.g. Owl = bird + forest, Bear = dangerous + forest).

  • The example source can be found here
  • The example result can be found here