LESS mixins I use

2018 10 07 No Comments

Hey guys. I am using LESS as  pre-processing languages for years. I use mixins in every project to increase readability of code and reduce amount of code. 

Mixins.less:

.fl() {float: left;}
.fr() {float: right;}
.fn() {float: none;}

.tal() {text-align: left;}
.tar() {text-align: right;}
.tac() {text-align: center;}

.pr() {position: relative;}
.pa() {position: absolute;}
.pf() {position: fixed;}

.db() {display: block;}
.dib() {display: inline-block;}
.dn() {display: none;}

.df() {
    display: -webkit-box; //iOS6, Safari 3.1-6
    display: -ms-flexbox; //IE10
    display: -webkit-flex; //android 4.3, IE mobile, Safari
    display: flex;         
}

.ellipsis-text(@line) {
    display: -webkit-box;
    -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


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

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

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

.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;
}

.calc(@prop; @val) {
    @{prop}: calc(~'@{val}');
    @{prop}: -moz-calc(~'@{val}');
    @{prop}: -webkit-calc(~'@{val}');
    @{prop}: -o-calc(~'@{val}');
}

.keyframes(@name; @arguments) {
	@-moz-keyframes @name { @arguments(); }
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

.animation(@arguments) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	animation: @arguments;
}

.gradient(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
    .gradient(@type; @colors; @dir; @prefixes; (@index - 1));
 
    @prefix  : extract(@prefixes, @index);
    @dir-old : 90 - (@dir);
 
    background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
    & when ( @index = length(@prefixes) ) {
        background-image: ~"@{type}-gradient(@{dir}, @{colors})";
    }
}

.flex(@value) { 
    // <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
    -webkit-box-flex: @value; //iOS6, Safari 3.1-6
    -webkit-flex:  @value; //android 4.3, IE mobile, Safari
    -ms-flex:  @value; //IE10
    flex:  @value;
}


.clearfix() {
    // from: http://nicolasgallagher.com/micro-clearfix-hack/
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

For example if I dont use mixins my code would look like this:

.test {float: left; position: relative; width: 200px; height: 200px; text-align: center;}

With mixins, more clean and less

.test {.fl; .pr; width: 200px; height: 200px; .tac;}

Happy coding.

Leave a Reply

Your email address will not be published. Required fields are marked *