more-or-less
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:
- MIT (license.txt)
Dependencies:
- less.js 1.7.x
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';
.transtion(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
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).