Cacher is the code snippet organizer for pro developers

.border-right(@right:0px, @bg:#eee) {
  position: relative;
  
  &:not(:last-child):after {
    position: absolute;
    content: "";
    width: 1px;
    top: 0;
    bottom: 0;
    right: @right;
    background: @bg;
  }
}

/* Usage
.col-md-3 {
  height: 200px;
  padding: 20px;
  .border-right;
}
*/

.transition (@transition) {
	transition: @transition;
}
.transform(@string){
	transform: @string;
}
.scale (@factor) {
	transform: scale(@factor);
}
.rotate (@deg) {
	transform: rotate(@deg);
}
.skew (@deg, @deg2) {
	transform: skew(@deg, @deg2);
}
.translate (@x, @y:0) {
	transform: translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
	transform: translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
	perspective: @value;
}
.transform-origin (@x:center, @y:center) {
	transform-origin: @x @y;
}

// Keyframe animation
.keyframes(@name; @arguments) {
    @keyframes @name { @arguments(); }
}

.animation(@arguments) {
    animation: @arguments;
}

// Usage
.animated {
    .animation(pulse 1.5s linear infinite)
}

.keyframes(pulse;{
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
});

// Button
.button-variant(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;

    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle& {
        color: @color;
        background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
    }
    &:active,
    &.active,
    .open .dropdown-toggle& {
        background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: @background;
            border-color: @border;
        }
    }

    .badge {
        color: @background;
        background-color: @color;
    }
}

// Usage
.btn-custom {
  .button-variant(@color:white, @background:yellow, @border:yellow);
}

// Sizes
.size(@thesize) {
	width: @thesize;
	height: @thesize;
}

.size(@width, @height) {
	width: @width;
	height: @height;
}

// Responsive mixins for bootstrap

// Screen Phone
@max-phone:       ~"(max-width: 480px)";
@min-phone:       ~"(min-width: 480px)";
// Screen Tablet
@max-tablet:      ~"(max-width: 768px)";
@min-tablet:      ~"(min-width: 768px)";
// Screen Desktop
@max-desktop:     ~"(max-width: 992px)";
@min-desktop:     ~"(min-width: 992px)";
// Screen Desktop Lg
@max-desktop-lg:  ~"(max-width: 1200px)";
@min-desktop-lg:  ~"(min-width: 1200px)";

// Usage
@media @min-tablet {
  
}