mixins.less

//General Styles
.background(@color: transparent; @image: none; @size: auto auto; @repeat: repeat; @position: center center) {
    background-color: @color;
    background-image: @image;
    background-size: @size;
    background-repeat: @repeat;
    background-position: @position;
}
.border(@width: 0; @color: transparent; @radius: 0; @style: solid) {
    border-color: @color;
    border-radius: @radius;
    border-style: @style;
    border-width: @width;
}
.flex(@justify: start; @align: start; @direction: row) {
    display: flex;
    flex-direction: @direction;
    justify-content: @justify;
    align-items: @align;
}
.size(@height: auto; @width: auto) {
    height: @height;
    width: @width;
}
.text(@color: inherit; @family: inherit; @size: inherit; @align: inherit; @weight: normal; @line-height: normal; @decoration: none) {
    color: @color;
    text-decoration: @decoration;
    font-family: @family;
    font-size: @size;
    font-weight: @weight;
    line-height: @line-height;
    text-align: @align;
}
//Objects
.signup-button {
    .background(@button-bg);
    .border(@radius: 1.5rem);
    .size(4.5rem, 20rem);
    .text(#fff, @text-font, 1.8rem, center, bold, @line-height: 4.5rem);
}