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
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';
.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).
