Anchor Less

Usage

1. Download anchor.less

2. Reference for use globally with:

@import "../node_modules/anchorless/anchor.less";

Example:

button {
    .display(flex, center, center);
    .font(2em, 40px, bold);
    .rounded(5px);
    .background(#fb292d);
    .query({
        .rounded(20px);
        .size(200px, 40px);
        .spacing(0 auto, 10px);
        .gradient(#fb292d, #470103);
    }, 800px);
 }

Compiles to:

button {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2em;
   line-height: 40px;
   font-weight: bold;
   border-radius: 5px;
   background: #fb292d;
 }@media all and (min-width: 640px) {
      button {
          border-radius: 20px;
          width: 200px;
          height: 40px;
          margin: 0 auto;
          padding: 10px;
          background-image: -webkit-linear-gradient(180deg, #fb292d, #470103);
          background-image: -moz-linear-gradient(180deg, #fb292d, #470103);
          background-image: linear-gradient(180deg, #fb292d, #470103);
      }
 }