More-or-less - smart less mixins

About

FeaturesMore-or-lessLESS Hat
Keyframes
Unlimited gradients
SVG gradients
Font-face
Input placeholders
Unlimited transitions
Prefixed transitions
Units completion
For-loop
Get index
If-then-else
Repeat
Join
Scoping
SpeedFastSlow
Features
Keyframes
Unlimited gradients
SVG gradients for IE9
Font-face
Input placeholders
Unlimited transitions
Prefixed transition values
Units completition
For-loop
Get index
If-then-else
Repeat
Join
Scoping
Speed
Contributers
PixelassM. Oelhafen

More-or-less is looking for contributers, so if you want to help developing an awesome library, fork it on github and send pull requests. The library is really young and while other libraries are deprecated and don't follow the best-practices, more-or-less will rise to be one of the strongest, if not the strongest of them all.

What is it?

More-or-less is a mixin library for less.js. Other than most libraries it is fully up to date with the features given by less.js. More-or-less offers more than just CSS3 mixins. It adds helpful functions like if-then-else satements, for-loops, string-joining and others (see functions). While other libraries like lesshat are based on inline-javascript, more-or-less uses less.js's built in features/functions. This makes the library a lot faster.

It should also be noted, that more-or-less allows a nicer syntax. This can especially be seen in the keyframes mixin. While lesshat requires js-interpolation (~"interpolation"), more-or-less only needs strings (no interpolation) for the clac-mixin if strict-math is turned off.

Architecture

Architechture is very important in every project. More-or-less is fully modular. This means every mixin can be imported separately (similar to compass for SASS) This is possible because every mixin imports its dependencies (similar to the way require.js works)

The architecture also helped to easily create this documentation. It is generated by including the library as a submodule. This also asures that the documentation is always up-to-date with the library. When new mixins are added tests are run to asure everything is working. Tests are still checked manually since I haven't found a way yet to do this programatically. I am planning to run a csslint task in strict mode, which will probably help a lot.

Animations

animation-delay

@import '../../helpers/_prefix';
.animation-delay(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-delay;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-delay';
.animation-delay(200ms);
.animation-delay(200ms, 400ms;);
Docs

The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.

A value of 0s, which is the default value of the property, indicates that the animation should begin as soon as it's applied. Otherwise, the value specifies an offset from the moment the animation is applied to the element; animation will begin that amount of time after being applied.

Specifying a negative value for the animation delay causes the animation to begin executing immediately. However, it will appear to have begun executing partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

Webplatform Mozilla docs Caniuse

animation-direction

@import '../../helpers/_prefix';
.animation-direction(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-direction;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-direction';
.animation-direction(normal);
.animation-direction(normal, reverse;);
Docs

The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Webplatform Mozilla docs Caniuse

animation-duration

@import '../../helpers/_prefix';
.animation-duration(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-duration;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-duration';
.animation-duration(200ms);
.animation-duration(200ms, 400ms;);
Docs

The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.

A value of 0s, which is the default value, indicates that no animation should occur.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Webplatform Mozilla docs Caniuse

animation-fill-mode

@import '../../helpers/_prefix';
.animation-fill-mode(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-fill-mode;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-direction';
.animation-direction(forwards);
.animation-direction(backwards, forwards;);
Docs

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

Webplatform Mozilla docs Caniuse

animation-iteration-count

@import '../../helpers/_prefix';
.animation-iteration-count(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-iteration-count;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-iteration-count';
.animation-direction(1);
.animation-direction(1, infinite;);
Docs

The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Webplatform Mozilla docs Caniuse

animation-name

@import '../../helpers/_prefix';
.animation-name(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-name;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-name';
.animation-direction(my-animation);
.animation-direction(my-animation, myanimation-2);
Docs

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Webplatform Mozilla docs Caniuse

animation-play-state

@import '../../helpers/_prefix';
.animation-play-state(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-play-state;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-play-state';
.animation-play-state(running);
.animation-play-state(running, paused;);
Docs

The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

Webplatform Mozilla docs Caniuse

animation-timing-function

@import '../../helpers/_prefix';
.animation-timing-function(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation-timing-function;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation-timing-function';
.animation-timing-function(linear);
.animation-timing-function(linear, ease-out;);
Docs

The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function>.

For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of the keyframe and at the end of the keyframe.

An animation timing function defined within a keyframe block applies to that keyframe; otherwise. If no timing function is specified for the keyframe, the timing function specified for the overall animation is used.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Webplatform Mozilla docs Caniuse

animation

@import '../../helpers/_prefix';
.animation(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: animation;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation';
.animation(my-animation 200ms);
.animation(my-animation 200ms linear 500ms);
Docs

The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction and animation-fill-mode.

A list of CSS properties that can be animated is available; it's worth noting that these are the same properties supported by CSS transitions.

Webplatform Mozilla docs Caniuse

keyframes

@import '../../vars/_prefix';
@import '../../../fn/_in';
.keyframes(@name) {
    & {
        .in(@prefixes, -webkit-);
        & when (@-) {

            @-webkit-keyframes @name {
                .-frames(-webkit-);
            }
        }
    }
    & {
        .in(@prefixes, -moz-);
        & when (@-) {

            @-moz-keyframes @name {
                .-frames(-moz-);
            }
        }
    }
    @keyframes @name {
        .-frames();
    }
}
Usage
@import 'more-or-less/less/css3/animation/_keyframes';
.keyframes(my-animation);.-frames(@-...) {
    0% {
        @{-}-transform: translate3d(0,0,0);
    }
    100% {
        @{-}-transform: translate3d(100%,0,0);
    }
}
Docs

The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.

The @keyframes at-rule can be accessed via the CSS object model interface CSSKeyframesRule.

To use keyframes, you create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe list. Each @keyframes rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.

You can list the keyframes in any order; they will be handled in the order in which their specified percentages indicate they should occur.

Valid keyframe lists

In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.

Duplicate resolution

If multiple keyframe sets exist for a given name, the last one encountered is used. @keyframes rules don't cascade, so animations never drive keyframes from more than one rule set.

If a given animation time offset is duplicated, the last keyframe in the @keyframes rule for that percentage is used for that frame. There's no cascading within a @keyframes rule if multiple keyframes specify the same percentage values.

Mozilla docs Caniuse

CSS Columns

column-count

@import '../../helpers/_prefix';
.column-count(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-count;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-count';
.columns-count(3);
Docs

The column-count CSS property describes the number of columns of the element.

Webplatform Mozilla docs Caniuse

column-gap

@import '../../helpers/_prefix';
.column-gap(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-gap;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-gap';
.column-gap(10px);
Docs

The column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element.

Webplatform Mozilla docs Caniuse

column-rule

@import '../../helpers/_prefix';
.column-rule(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-rule;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-rule';
.column-rule(dotted);
.column-rule(solid blue);
.column-rule(solid 8px);
.column-rule(thick inset blue);
Docs

In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

Webplatform Mozilla docs Caniuse

column-rule-color

@import '../../helpers/_prefix';
.column-rule-color(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-rule-color;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-rule-color';
.column-rule-color(#000);
Docs

The column-rule-color CSS property lets you set the color of the rule drawn between columns in multi-column layouts.

Webplatform Mozilla docs Caniuse

column-rule-style

@import '../../helpers/_prefix';
.column-rule-style(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-rule-style;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-rule-style';
.column-rule-style(dotted);
Docs

The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.

Webplatform Mozilla docs Caniuse

column-rule-width

@import '../../helpers/_prefix';
.column-rule-width(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-rule-width;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-width';
.column-rule-width(thick);
.column-rule-width(1px);
.column-rule-width(1em);
Docs

The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.

Webplatform Mozilla docs Caniuse

column-span

@import '../../helpers/_prefix';
.column-span(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-span;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-span';
.column-span(all);
Docs

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.

Webplatform Mozilla docs Caniuse

column-width

@import '../../helpers/_prefix';
.column-width(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: column-width;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_column-width';
.column-width(auto);
.column-width(6px);
.column-width(25em);
.column-width(0.3vw);
.column-width(inherit);
Docs

The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.

Webplatform Mozilla docs Caniuse

columns

@import '../../helpers/_prefix';
.columns(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: columns;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/columns/_columns';
.columns(3);
Docs

The columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time.

Webplatform Mozilla docs Caniuse

Helpers

prefix

@import '../../vars/_prefix';
@import '../../../fn/_inArray';
@import '../../../fn/_scope';
@import '../../../fn/_if';
.prefix(...) {
    @needPrefix: transition-property, transition;
    .for(@vendorPrefixes); .-each(@i){
        .inArray(@needPrefix, @prop);
        .if(@-, {
            .-then(){
                @transform: replace('@{values}', 'transform', '@{i}transform');
                @box-shadow: replace('@{transform}', 'box-shadow', '@{i}box-shadow');
                @end: e(@box-shadow);
                @return: @end;
            }
            .-else() {
                @return: @values;
            }
        });
        .scope({
            .inArray(@prefixes, @i);
            .if(@-,{
                .-then(){
                    @eProp: e('@{i}@{prop}');
                    @{eProp}: @return;
                }
                .-else(){
                    @{prop}: @values;
                }
            });
        });
    }
}
Usage
@import '../../helpers/_prefix';
.some-property(@values) {
    @vendorPrefixes: -webkit-, -moz-;
    @prop: some-property;
    .prefix();
}
.another-property(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: another-property;
    .prefix();
}
Docs

This is a helper function to prefix most of the properties for css3-mixins.

It can simply be called without any arguments and relies on the arguments of the parent mixin.

Misc

appearance

@import '../../helpers/_prefix';
.appearance(@values) {
    @vendorPrefixes: -webkit-, -moz-;
    @prop: appearance;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/misc/_appearance';
.appearance(none);
Docs

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

This property is frequently used in XUL stylesheets to design custom widgets with platform-appropriate styling. It is also used in the XBL implementations of the widgets that ship with the Mozilla platform.

Webplatform Mozilla docs

background-image

@import '../../vars/_prefix';
@import '../../../fn/_inArray';
@import '../../../fn/_if';
.background-image(@values...) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    .for(@vendorPrefixes);.-each(@i) {
        .scope({
            .inArray(@prefixes, @i);
            .if(@-,{
                .-then(){
                    @to-top-left: replace('@{values}', 'to top left', 'bottom right' );
                    @to-bottom-right: replace('@{to-top-left}', 'to bottom right', 'top left' );
                    @to-top: replace('@{values}', 'to top', 'bottom' );
                    @to-bottom: replace('@{to-top}', 'to bottom', 'top' );
                    @to-left: replace('@{to-bottom}', 'to left', 'right' );
                    @to-right: replace('@{to-left}', 'to right', 'left' );
                    @linear-gradient: replace('@{to-right}', 'linear-gradient', '@{i}linear-gradient' );
                    @radial-gradient: replace('@{linear-gradient}', 'radial-gradient', '@{i}radial-gradient' );
                    @end: @radial-gradient;
                    background-image: e(@end);
                }
                .-else() {
                    background-image: @values;
                }
            });
        });
    }
}
Usage
@import 'more-or-less/less/css3/misc/_background-image';
.background-image(
    linear-gradient(to top, #000, #fff),
    radial-gradient(45px 45px, farthest-corner, #fff 0%, #000 100%),
    url('test.png'));
.background-image(linear-gradient(to top left, #000, #fff));
Docs

The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

If a specified image cannot be drawn (for example when the file denoted by the specified URI cannot be loaded), browsers handle them as if it was the none value.

Webplatform Mozilla docs Caniuse

background-size

@import '../../helpers/_prefix';
.background-size(@values...) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: background-size;
    .prefix(',');
}
Usage
@import 'more-or-less/less/css3/misc/_background-size';
.background-size(100px);
.background-size(100% auto);
Docs

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

Webplatform Mozilla docs Caniuse

border-radius

@import '../../helpers/_prefix';
.border-radius(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: border-radius;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/misc/_border-radius';
.border-radius(10px);
.border-radius(10px 20p 15px 25px);
Docs

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

Webplatform Mozilla docs Caniuse

box-shadow

@import '../../helpers/_prefix';
.box-shadow(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: box-shadow;
    .prefix(',');
}
Usage
@import 'more-or-less/less/css3/misc/_box-shadow';
.box-shadow(0 2px 0 rgba(0,0,0,0.5));
Docs

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Webplatform Mozilla docs Caniuse

box-sizing

@import '../../helpers/_prefix';
.box-sizing(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: box-sizing;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/misc/_box-sizing';
.box-sizing(border-box);
Docs

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

Webplatform Mozilla docs Caniuse

calc

@import '../../vars/_prefix';
@import '../../../fn/_if';
@import '../../../fn/_scope';
@import '../../../fn/_inArray';
.calc(@prop; @value) {
    @vendorPrefixes: -webkit-, -moz-, '';
    .for(@vendorPrefixes);.-each(@i) {
        .scope({
            .inArray(@prefixes, @i);
            .if((@-), {
                .-then(){
                    @eValue: e('@{value}');
                    @{prop}: e('@{i}calc(@{eValue})');
                }
                .-else() {
                    @eValue: e('@{value}');
                    @{prop}: e('calc(@{eValue})');
                }
            });
        });
    }
}
Usage
@import 'more-or-less/less/css3/misc/_calc';
.calc(height,"100% - 20px");
// with strict math enabled
.calc(height,100% - 20px);
Docs

The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values.

It is possible to use calc() inside another calc().

Webplatform Mozilla docs Caniuse

linear-gradient

@import '../_background-image';
.old-webkit-gradient(...){}
.old-webkit-gradient(@direction, @start, @end) when ('@{direction}' = 'to bottom') {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@end));
}
.old-webkit-gradient(@direction, @start, @end) when ('@{direction}' = 'to right') {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,@start), color-stop(100%,@end));
}
.old-webkit-gradient(@direction, @start, @end) when ('@{direction}' = 'to bottom right') {
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,@start), color-stop(100%,@end));
}
.linear-gradient(@direction, @start, @end) {
    & when (@svg-fallback) {
        background-image: svg-gradient(@direction, @start, @end);
    }
    & when (@webkit-legacy) {
        .old-webkit-gradient(@direction, @start, @end);
    }
    .background-image(linear-gradient(@direction, @start, @end));
}
Usage
@import 'more-or-less/less/css3/misc/_linear-gradient';
.linear-gradient(to bottom, #000, #f00);
.linear-gradient(to bottom right, #000, #f00);
Docs

The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

Linear gradients are defined by an axis, the gradient line, with each point on it being of a different color. Perpendicular lines to the gradient-line have one single color, the one of the point on the gradient line.

The gradient line is defined by the center of the box containing the gradient image and by an angle. The color of the gradient is defined by different points, the starting point, the ending point and, in between, optional stop-color points.

The starting point is the point on the gradient line where the color starts. It is defined by the intersection between the gradient line and a perpendicular passing by the box corner which is in the same quadrant.

Similarly the ending point is the point on the gradient line where the final color is reached. It can also be defined by an intersection between the gradient line and a perpendicular line issued by the nearby corner, but is more easily defined as the symmetric of the starting point, when a point reflection with an origin confounded with the center of the box.

These somewhat complex definitions of the starting and ending points lead to an interesting property sometimes called magic corners : the nearby corners of the starting and ending points also have the same color as the respective starting and ending points.

More than just the starting-point and ending-point colors can be specified. By defining additional color-stop points on the gradient line, the web developer can create a more customized transition between the starting and ending colors, or provide for a multi-color gradient.

The linear-gradient syntax does not allow for repeating gradients, but by using color-stop points, a similar effect can be achieved. For true repeating gradients, use the repeating-linear-gradient CSS property.

When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it. The position can also be explicitly defined by using a <length> or a <percentage> CSS data type.

Webplatform Mozilla docs Caniuse

opacity

@import '../../vars/_prefix';
.opacity(@value) {
    & when (@ie-legacy) {
        @msValue: (@value * 100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{msValue})";
        filter: alpha(opacity=@msValue);
    }
    opacity: @value;
}
Usage
@import 'more-or-less/less/css3/misc/_opacity';
.opacity(0.2);
Docs

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

Using this property with a value different than 1 places the element in a new stacking context.

Webplatform Mozilla docs Caniuse

placeholder

@import '../../vars/_prefix';
@import '../../../fn/_for';
@import '../../../fn/_in';
.placeholder(@rules) {
    @vendorPrefixes: ':-webkit-', ':-ms-';
    @vendorPrefixesMoz:  ':-moz-', '-moz-';
    .for(@vendorPrefixes);.-each(@i) {
        @prefix: replace('@{i}', ':', '');
        .inArray(@prefixes, @prefix);
        & when (@-) {
            @selector: e(':@{i}input-placeholder');
            &@{selector} {
                @rules();
            }
        }
    }
    .scope({
        .for(@vendorPrefixesMoz);.-each(@i) {
            @prefix: replace('@{i}', ':', '');
            .in(@prefixes, @prefix);
            & when (@-) {
                @selector: e(':@{i}placeholder');
                &@{selector} {
                    @rules();
                }
            }
        }
    });
}
Usage
@import 'more-or-less/less/css3/misc/_placeholder';
.placeholder({
    color: #aaa;
    font-size: 20px;
});
Docs

The ::-moz-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color.

Webplatform Mozilla docs

radial-gradient

@import '../_background-image';
.radial-gradient(@start, @end) {
    & when (@svg-fallback) {
        background-image: svg-gradient(ellipse at center, @start, @end);
    }
    & when (@webkit-legacy) {
        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(@start), to(@end));
    }
    .background-image(radial-gradient(closest-corner, @start, @end));
}
Usage
@import 'more-or-less/less/css3/animation/_radial-gradient';
.radial-gradient(#000, #f00);
Docs

The CSS radial-gradient() function creates an <image> which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS <gradient> data type.

Radial gradients are defined by their center, the ending shape contour and position, and color stops. The radial gradient consists, going from its center to its ending shape and potentially beyond, of successive uniformly-scaled concentric shapes, identical to the ending shape. Color stops are positioned on a virtual gradient ray going out horizontally of the center and going to the right. Percentages positioning of color stops are relative to the intersection between the ending shape and this gradient ray representing 100%. Each shape is monocolor and defined by the color on the gradient ray it intersects.

Ending shapes can only be circle or ellipse.

Like any other gradient, a CSS radial gradient is not a CSS <color> but an image with no intrinsic dimensions, i. e. it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

The radial-gradient function does not allow repeating gradients. For such a functionality, use the CSS repeating-radial-gradient function.

Webplatform Mozilla docs Caniuse

text-overflow

@import '../../helpers/_prefix';
.text-overflow(@values) {
    @vendorPrefixes: -ms-, -o-, '';
    @prop: text-overflow;
    .prefix();
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: no-wrap;
    word-wrap: normal;
    & when (@ie-legacy) {
        *display: inline;
        *zoom: 1;
    }
}
Usage
@import 'more-or-less/less/css3/misc/_text-overflow';
.text-overflow(ellipsis);
Docs

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, or display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string.

Webplatform Mozilla docs Caniuse

user-select

@import '../../helpers/_prefix';
.user-select(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: user-select;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/misc/_user-select';
.user-select(none);
Docs

Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property 'user-focus' was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.

Webplatform Mozilla docs Caniuse

Transforms

backface-visibility

@import '../../helpers/_prefix';
.backface-visibility(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: backface-visibility;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/transform/_backface-visibilitz';
.backface-visibilitz(hidden);
Docs

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side).

This property has no effect on 2D transforms as there is no perspective.

Webplatform Mozilla docs Caniuse

perspective-origin

@import '../../helpers/_prefix';
.perspective-origin(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: perspective-origin;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/transform/_perfspective-origin';
.perfspective-origin(0%);
.perfspective-origin(0% 100%);
Docs

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

Webplatform Mozilla docs Caniuse

perspective

@import '../../helpers/_prefix';
.perspective(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: perspective;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/animation/_animation';
.animation(my-animation 200ms);
.animation(my-animation 200ms linear 500ms);
Docs

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

Part of the 3D-elements that are behind the user, i.e. that their z-axis coordinate is greater than the value of the perspective CSS property are not drawn.

The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

Using this property with a value different than 0 and none creates a new stacking context.

Webplatform Mozilla docs Caniuse

transform-origin

@import '../../helpers/_prefix';
.transform-origin(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transform-origin;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/transform/_transform-origin';
.transform-origin(0%);
.transform-origin(0% 100%);
Docs

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Not explicitly set values are reset to their corresponding values.

Webplatform Mozilla docs Caniuse

transform-style

@import '../../helpers/_prefix';
.transform-style(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transform-style;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/transform/_transform-style';
.transform-style(preserve-3d);
Docs

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

If flattened, the children will not exist on their own in the 3D-space.

As this property is not inherited, it must be set for all non-leaf descendants of the element.

Webplatform Mozilla docs Caniuse

transform

@import '../../helpers/_prefix';
.transform(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: transform;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/transform/_transform';
.transform(translate3d(0,0,0));
Docs

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

Webplatform Mozilla docs Caniuse

Transitions

transition-delay

@import '../../helpers/_prefix';
.transition-delay(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transition-delay;
    .prefix(',');
}
Usage
@import 'more-or-less/less/css3/transition/_transition-delay';
.transition-delay(200ms);
.transition-delay(200ms, 500ms);
Docs

The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Webplatform Mozilla docs Caniuse

transition-duration

@import '../../helpers/_prefix';
.transition-duration(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transition-duration;
    .prefix(',');
}
Usage
@import 'more-or-less/less/css3/transition/_transition-duration';
.transition-duration(200ms);
.transition-duration(200ms, 500ms);
Docs

The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

You may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent repeat the list of durations. If there are more durations, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Webplatform Mozilla docs Caniuse

transition-property

@import '../../helpers/_prefix';
.transition-property(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transition-property;
    .prefix(',');
}
Usage
@import 'more-or-less/less/css3/transition/_transition-property';
.transition-property(height);
.transition-property(height, transform);
Docs

The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.

Webplatform Mozilla docs Caniuse

transition-timing-function

@import '../../helpers/_prefix';
.transition-timing-function(@values) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transition-timing-function;
    .prefix(',');
}
Usage
@import 'more-or-less/less/css3/transition/_transition-timing-function';
.transition-timing-function(linear);
.transition-timing-function(linear, ease-out);
Docs

The CSS transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

This acceleration curve is defined using one <timing-function> for each property to be transitioned.

You may specify multiple timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer functions specified than in the master list, missing values are set to the initial value (ease). If there are more timing functions, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Webplatform Mozilla docs Caniuse

transition

@import '../../helpers/_prefix';
.transition(@values...) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transition;
    .prefix();
}
Usage
@import 'more-or-less/less/css3/transition/_transition';
.transition(all 200ms);
.transition(height 200ms, width 500ms);
Docs

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Webplatform Mozilla docs Caniuse

functions

for

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + ((@n - @i) / abs(@n - @i))), @n);
}
.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i));}
Usage
@import 'more-or-less/less/fn/_for';
.for(5);.-each(@i){
    item-@{i} {
        height: 10px * @i;
    }
}
Docs

Allows creating for loops. Loops must be scoped either in an ampersand selector or inside the .scope() mixin since it uses an undefined mixin.

if

.if(...) {}
.if(@condition, @callback...) when (@condition) {
    @callback();
    .-then();
}
.if(@condition, @callback...) when not(@condition) {
    .-else(...){};
    @callback();
    @one:      extract(@condition, 1);
    @two:      extract(@condition, 3);
    @operator: extract(@condition, 2);
    .-return(lt) {
        & when     (@one < @two) {.if(true, @callback);}
        & when not (@one < @two) {.-else();}
    }
    .-return(lte) {
        & when    (@one <= @two) {.if(true, @callback);}
        & when not(@one <= @two) {.-else();}
    }
    .-return(gt) {
        & when    (@one > @two) {.if(true, @callback);}
        & when not(@one > @two) {.-else();}
    }
    .-return(gte) {
        & when    (@one >= @two) {.if(true, @callback);}
        & when not(@one >= @two) {.-else();}
    }
    .-return(eq) {
        & when    (@one = @two) {.if(true, @callback);}
        & when not(@one = @two) {.-else();}
    }
    .-return(...) when (default()) {
        .-else();
    }
    .-return(@operator);
}
Usage
@import 'more-or-less/less/fn/_if';
.if(isnumber(2), {
    .-then(){
        log {
            isnumber: true;
        }
    }
    .-else(){
        log {
            isnumber: false;
        }
    }
});
Docs

Allows to create if-then-else statements without the use of guards. It uses two undefined mixins .-then() and .-else() which can be definded inside the mixin.

inArray

@import '../_for';
.inArray(@array, @value) {
    .for(@array); .-each(...) {}
    .-each(~'@{value}') {@-: true}
    .-() {@-: false} .-;
}
Usage
@import 'more-or-less/less/fn/_inArray';
@fruits: apple, orange, banana;
.inArray(@fruits, banana);
banana: @-;
Docs

Compare a value with a list/array. This function is very helpful when a comparison needs to be made. The .prefix() mixin makes use of it and shows how to compare a value with numerous lists.

index

@import '../_for';
.index(@array, @value, @fallback: -1) {
    .for(@array); .-each(...) {}
    .-each(~'@{value}') {@-: @i}
    .-() {@-: @fallback} .-;
}
Usage
@import 'more-or-less/less/fn/_index';
@fruits: apple, orange, banana;
.index(@fruits, banana);
banana: @-;
Docs

Returnes the index of a value in from a list. This mixin currently does not work inside a for-loop but can be used for single values.

join

.join(...) {}
.join(@arr) {.join(@word, '');}
.join(@arr, @glue) {
    .join(@word, @arr, @glue, @n) when (@n >= 0) {
        .-return(@wordResult, @n2) when (@n2 = 0) {@string: ~'@{wordResult}';}
        .-return(@word, @n);
        @add: extract(@arr, @n);
        .join('@{add}@{glue}@{word}', @arr, @glue, (@n - 1));
    }
    @last: extract(@arr, length(@arr));
    .join(@last, @arr, @glue, (length(@arr) - 1));
}

Usage
@import 'more-or-less/less/fn/_join';
@animals: 'cat', 'tiger', 'lion';
.join(@animals, ' and ');
.animals:after {
    content: '@{string}';
}
Docs

Joining a string is almost impossible in Less. This mixin will join items from a list with an optional @glue.

repeat

.repeat(...) {}
.repeat(@word, @n) {.repeat(@word, '', @n);}
.repeat(@word, @glue, @n) {
    .repeat(@word, @add, @glue, @n) when (@n > 0) {
        .-return(@wordResult, @n2) when (@n2 = 1) {@string: ~'@{wordResult}';}
        .-return(@word, @n);
        .repeat('@{word}@{glue}@{add}', @add, @glue, @n - 1);
    }
    .repeat(@word, @word, @glue, @n);
}
.repeat(@word, @glue, @n) when (@n < 1) {@string: ~'';}
Usage
@import 'more-or-less/less/fn/_repeat';
.repeat('.test', ' + ', 5);
@{string} {
    float: right;
}
Docs

Repeating a string or keyword can not be done with Less. Wait a second... Yes it can. Use this function to repeat a string and join them with an optional @glue.

scope

@import "../_if";
.scope(...) {}
.scope(@rules) {
    .-isrules(@test) {
        .-return(...) {@bool: false;}
        .-return(@test) when not (iskeyword(@test))
                         and not (isstring(@test))
                         and not (isnumber(@test))
                         and not (iscolor(@test))
                         and not (issurl(@test)) {
            @bool: true;
        }
        .-return(@test) when (default()) {@bool: false;}
        .-return(@test);
    }
    .-isrules(@rules);
    .if(@bool, {
        .-then(){
            @rules();
        }
    });
}
Usage
@import 'more-or-less/less/fn/_scope';
.scope({
    @a: foo;
    @b: bar;
    foo: @a;
    bar: @b;
});
Docs

Creating scopes is only possible with selectors. While an ampersand (&) does the job it creates superfluous class-declarations. Using the .scope() mixin avoids class-name duplication and therefor makes the compiled code cleaner and shorter.