less snippets

dodanie przeźroczystego koloru tła:

.rgbaColorIn(@color, @opacity : 1){
 @result: rgba( red(@color), green(@color), blue(@color), @opacity );
}

.section {
 .rgbaColorIn(red, 50%);
 background-color: @result;
}

–

przydatne mixiny z prefiksami:

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}

.transformCustom (@codeValue) {
	-webkit-transform: @codeValue;
	-moz-transform: @codeValue;
	-o-transform: @codeValue;
	-ms-transform: @codeValue;
	transform: @codeValue;
}

.transform-origin (@codeValue) {
	-ms-transform-origin: @codeValue;
	-webkit-transform-origin: @codeValue;
	transform-origin: @codeValue;
}

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
 text-shadow: @string;
}

.box-shadow (@string) {
 -webkit-box-shadow: @string;
 -moz-box-shadow: @string;
 box-shadow: @string;
}

.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
 -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
 -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
 box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
 -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
 -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
 box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
 -webkit-box-sizing: @type;
 -moz-box-sizing: @type;
 box-sizing: @type;
}

.border-radius (@radius: 5px) {
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;

 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
}

.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
 -webkit-border-top-right-radius: @topright;
 -webkit-border-bottom-right-radius: @bottomright;
 -webkit-border-bottom-left-radius: @bottomleft;
 -webkit-border-top-left-radius: @topleft;

 -moz-border-radius-topright: @topright;
 -moz-border-radius-bottomright: @bottomright;
 -moz-border-radius-bottomleft: @bottomleft;
 -moz-border-radius-topleft: @topleft;

 border-top-right-radius: @topright;
 border-bottom-right-radius: @bottomright;
 border-bottom-left-radius: @bottomleft;
 border-top-left-radius: @topleft;

 -moz-background-clip: padding; 
 -webkit-background-clip: padding-box; 
 background-clip: padding-box; 
}

.opacity (@opacity: 0.5) {
 -webkit-opacity: @opacity;
 -moz-opacity: @opacity;
 opacity: @opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
 background-color: @startColor;
 background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
 background: -webkit-linear-gradient(top, @startColor, @endColor);
 background: -moz-linear-gradient(top, @startColor, @endColor);
 background: -ms-linear-gradient(top, @startColor, @endColor);
 background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 background-color: @startColor;
 background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
 background-image: -webkit-linear-gradient(left, @startColor, @endColor);
 background-image: -moz-linear-gradient(left, @startColor, @endColor);
 background-image: -ms-linear-gradient(left, @startColor, @endColor);
 background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
 -webkit-animation: @name @duration @delay @ease;
 -moz-animation: @name @duration @delay @ease;
 -ms-animation: @name @duration @delay @ease;
}

.transition (@transition) {
 -webkit-transition: @transition; 
 -moz-transition: @transition;
 -ms-transition: @transition; 
 -o-transition: @transition; 
}

.transform(@string){
 -webkit-transform: @string;
 -moz-transform: @string;
 -ms-transform: @string;
 -o-transform: @string;
}

.scale (@factor) {
 -webkit-transform: scale(@factor);
 -moz-transform: scale(@factor);
 -ms-transform: scale(@factor);
 -o-transform: scale(@factor);
}
.rotate (@deg) {
 -webkit-transform: rotate(@deg);
 -moz-transform: rotate(@deg);
 -ms-transform: rotate(@deg);
 -o-transform: rotate(@deg);
}

.skew (@deg, @deg2) {
 -webkit-transform: skew(@deg, @deg2);
 -moz-transform: skew(@deg, @deg2);
 -ms-transform: skew(@deg, @deg2);
 -o-transform: skew(@deg, @deg2);
}

.translate (@x, @y:0) {
 -webkit-transform: translate(@x, @y);
 -moz-transform: translate(@x, @y);
 -ms-transform: translate(@x, @y);
 -o-transform: translate(@x, @y);
}

.translate3d (@x, @y: 0, @z: 0) {
 -webkit-transform: translate3d(@x, @y, @z);
 -moz-transform: translate3d(@x, @y, @z);
 -ms-transform: translate3d(@x, @y, @z);
 -o-transform: translate3d(@x, @y, @z);
}

.perspective (@value: 1000) {
 -webkit-perspective: @value;
 -moz-perspective: @value;
 -ms-perspective: @value;
 perspective: @value;
}

.transform-origin (@x:center, @y:center) {
 -webkit-transform-origin: @x @y;
 -moz-transform-origin: @x @y;
 -ms-transform-origin: @x @y;
 -o-transform-origin: @x @y;
}

–

Complementary Color Scheme

@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);

–

wywołanie:

.one   {color: @base;}
.two   {color: @complement1;}
.three {color: @complement2;}
.four  {color: @lighten1;}
.five  {color: @lighten2;}

–

Subtle Color Scheme

@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

 

wywołanie:

.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

margin and padding generate set

.generate-name(10, padding, left);
.generate-name(10, padding, right);
.generate-name(10, padding, top);
.generate-name(10, padding, bottom);

.generate-name(10, margin, left);
.generate-name(10, margin, right);
.generate-name(10, margin, top);
.generate-name(10, margin, bottom);

.generate-name(@n, @name, @direction, @i: 1) when (@i =< @n) {
    .rwl_@{name}-@{direction}-@{i} {
            @{name}-@{direction}: (@i * 100px / @n);
    }
    .generate-name(@n, @name, @direction, (@i + 1));
}


.generate-name-full(10, padding);
.generate-name-full(10, margin);

.generate-name-full(@n, @name, @i: 1) when (@i =< @n) {
    .rwl_@{name}-@{i} {
            @{name}: (@i * 100px / @n);
    }
    .generate-name(@n, @name, (@i + 1));
}

–
color functions