less mixins

font-vars.less

.font-vars() {
@font: {

  @family: {
    serif: serif;
    sans: sans-serif;
    deco: cursive;
  }

  @size: {
    //body: 16px;
    //banner: 1em;
    //nav: 0.85em;
    //page: 1.1em;
    //listHeader: 1.2em;
    //sb: 1.1em;
    //sbH: 1.2em;
    //rail: 0.85em;
    //footer: 0.8em;
  }
}
}

fonts.less

@import 'font-vars';
.font-vars();

.serif {
  .ffm(@font[@family][serif]);
}

.sans {
  .ffm(@font[@family][sans]);
}

.deco {
  .ffm(@font[@family][deco]);
}

.mobileFont(@size: 16px, @fam: sans-serif) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    font: @size @fam  !important;
  }
}

.tabletFont(@size: 18px, @fam: sans-serif) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    font: @size @fam  !important;
  }
}

.computerFont(@size: 16px, @fam: sans-serif) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    font: @size @fam  !important;
  }
}

parallax.less

.parallax {
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

responsive.less

@import 'screen-size-vars.less';
.screen-size-vars();

// any
.mobile(@rules) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    @rules();
  }
}

.notMobile(@rules) {
  @media screen and (min-width: @sizes[@tablet][min]) {
    @rules();
  }
}

.tablet(@rules) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    @rules();
  }
}

.computer(@rules) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    @rules();
  }
}

// padding
.mobilePadding(@padding: 0px) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    .pad(@padding);
  }
}

.tabletPadding(@padding: 0px) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    .pad(@padding);
  }
}

.computerPadding(@padding: 0px) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    .pad(@padding);
  }
}

// margin
.mobileMargin(@margin: 0px) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    .mgn(@margin);
  }
}

.tabletMargin(@margin: 0px) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    .mgn(@margin);
  }
}

.computerMargin(@margin: 0px) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    .mgn(@margin);
  }
}

// width
.mobileWidth(@width: 0px) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    .wid(@width);
  }
}

.tabletWidth(@width: 0px) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    .wid(@width);
  }
}

.computerWidth(@width: 0px) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    .wid(@width);
  }
}

// height
.mobileHeight(@height: 0px) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    .hgt(@height);
  }
}

.tabletHeight(@height: 0px) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    .hgt(@height);
  }
}

.computerHeight(@height: 0px) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    .hgt(@height);
  }
}

// colors
.mobileColors(@text: @primaryColor, @bg: @secondaryColor) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    .cc(@text, @bg);
  }
}

.tabletColors(@text: @primaryColor, @bg: @secondaryColor) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    .cc(@text, @bg);
  }
}

.computerColors(@text: @primaryColor, @bg: @secondaryColor) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    .cc(@text, @bg);
  }
}

// z-index
.mobileZ(@zindex: 1) {
  @media screen and (max-width: @sizes[@mobile][max]) {
    .znx(@zindex);
  }
}

.tabletZ(@zindex: 1) {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    .znx(@zindex);
  }
}

.computerZ(@zindex: 1) {
  @media screen and (min-width: @sizes[@laptop][min]) {
    .znx(@zindex);
  }
}

/*

// top
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// bottom
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// left
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// right
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// min-width
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// min-height
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// overflow
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

// border
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}

//
.mobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {}
}

.tablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {}
}

.computer() {
  @media screen and (min-width: @sizes[@laptop][min]) {}
}
*/

screen-size-vars.less

.screen-size-vars() {
@sizes: {
  @mobile: {
    min: 320px;
    max: 425px;
  }

  @tablet: {
    min: 426px;
    max: 768px;
  }

  @laptop: {
    min: 769px;
    max: 1024px;
  }

  @computer: {
    min: 1025px;
    max: 1440px;
  }

  @widescreen: 1441px;
}
}  

shortcuts.less

@def-bg-img: url("http://images.unsplash.com/photo-1559567951-34c59e05c08c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9");
@def-bg: white @def-bg-img no-repeat fixed center;
/*
@keyframes invert {
     from {}
     to {}
}
*/


.aln-c(@val: stretch) { align-content: @val !important; }

.aln-i(@val: stretch) { align-items: @val !important; }

.aln-s(@val: stretch) { align-self: @val !important; }

/*
.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

.an(@val: ) { animation-: @val !important; }

//.an(@val: ) { animation: @val !important; }
*/

.bfc-vis(@val: visible) {backface-visibility: @val !important;}

.bg(@val: @def-bg) { background: @val !important;}

.bg-atm(@val: fixed) { background-attachment: @val !important; }

.bg-blm(@val: screen) { background-blend-mode: @val !important; }

.bg-clp(@val: border-box) { background-clip: @val !important; }

.bg-clr(@val: transparent) { background-color: @val !important; }

.bg-img(@val: @def-bg-img) { background-image: @val !important; }

.bg-ogn(@val: border-box) { background-origin: @val !important; }

.bg-pxn(@val: left top) { background-position: @val !important; }

.bg-rpt(@val: no-repeat) { background-repeat: @val !important; }

.bg-rpt-x(@val: no-repeat) { background-repeat-x: @val !important; }

.bg-rpt-y(@val: no-repeat) { background-repeat-y: @val !important; }

.bg-sz(@val: contain) { background-size: @val !important; }

.bdr(@val: 1px solid black) { border: @val !important; }

.bdr-btm(@val: 1px solid black) { border-bottom: @val !important; }

.bdr-btm-clr(@val: black) { border-bottom-color: @val !important; }

.bdr-btm-lft-rad(@val: 0) { border-bottom-left-radius: @val !important; }

.bdr-btm-rgt-rad(@val: 0) { border-bottom-right-radius: @val !important; }

.bdr-btm-stl(@val: solid) { border-bottom-style: @val !important; }

.bdr-btm-wid(@val: 1px) { border-bottom-width: @val !important; }

.bdr-clp(@val: collapse) { border-collapse: @val !important; }

.bdr-clr(@val: black) { border-color: @val !important; }

.bdr-img(@val: @def-bg-image) { border-image: @val !important; }

.bdr-img-ots(@val: 0) { border-image-outset: @val !important; }

.bdr-img-rpt(@val: stretch) { border-image-repeat: @val !important; }

.bdr-img-slc(@val: 15%) { border-image-slice: @val !important; }

.bdr-img-src(@val: @def-bg-img) { border-image-source: @val !important; }

.bdr-img-wid(@val: 1px) { border-image-width: @val !important; }

.bdr-lft(@val: 1px solid black) { border-left: @val !important; }

.bdr-lft-clr(@val: black) { border-left-color: @val !important; }

.bdr-lft-stl(@val: solid) { border-left-style: @val !important; }

.bdr-lft-wid(@val: 1px) { border-left-width: @val !important; }

.bdr-rad(@val: 0) { border-radius: @val !important; }

.bdr-rgt(@val: 1px solid black) { border-right: @val !important; }

.bdr-rgt-clr(@val: black) { border-right-color: @val !important; }

.bdr-rgt-stl(@val: solid) { border-right-style: @val !important; }

.bdr-rgt-wid(@val: 1px) { border-right-width: @val !important; }

.bdr-spc(@val: 5px) { border-spacing: @val !important; }

.bdr-stl(@val: solid) { border-style: @val !important; }

.bdr-top(@val: 1px solid black) { border-top: @val !important; }

.bdr-top-clr(@val: black) { border-top-color: @val !important; }

.bdr-top-lft-rad(@val: 0) { border-top-left-radius: @val !important; }

.bdr-top-rgt-rad(@val: 0) { border-top-right-radius: @val !important; }

.bdr-top-stl(@val: solid) { border-top-style: @val !important; }

.bdr-top-wid(@val: 1px) { border-top-width: @val !important; }

.bdr-wid(@val: 1px) { border-width: @val !important; }

.btm(@val: 0) { bottom: @val !important; }

.box-dec-brk(@val: slice) { box-decoration-break: @val !important;}

.box-shd(@val: 5px 10px) { box-shadow: @val !important;}

.box-szg(@val: border-box) { box-sizing: @val !important; }

.clr(@val: black) { color: @val !important; }

.clp(@val: border-box) { clip-path: @val !important; }

.cnt(@val: normal) { content: @val !important; }

.crs(@val: auto) { cursor: @val !important; }

.dsp(@val: block) { display: @val !important; }

.fltr(@val: none) { filter: @val !important; }

.flt(@val: none) { float: @val !important; }

.fnt(@val: 14px serif) { font: @val !important; }

.fnt-fam(@val: serif) { font-family: @val !important; }

.fnt-sz(@val: 14px) { font-size: @val !important; }

.fnt-stl(@val: normal) { font-style: @val !important; }

.fnt-wt(@val: normal) { font-weight: @val !important; }

.hgt(@val: 100%) { height: @val !important; }

.isl(@val: isolate) { isolation: @val !important; }

.lft(@val: 0) { left: @val !important; }

.ln-hgt(@val: 20px) { line-height: @val !important; }

.mgn(@val: 0) { margin: @val !important; }

.mgn-top(@val: 0) { margin-top: @val !important; }

.mgn-rgt(@val: 0) { margin-right: @val !important; }

.mgn-btm(@val: 0) { margin-bottom: @val !important; }

.mgn-lft(@val: 0) { margin-left: @val !important; }

.min-hgt(@val: 100px) { min-height: @val !important; }

.min-wid(@val: 100px) { min-width: @val !important; }

.opc(@val: 0.5) { opacity: @val !important; }

.otln(@val: 1px solid black) { outline: @val !important; }

.ovf(@val: hidden) { overflow: @val !important; }

.ovf-x(@val: hidden) { overflow-x: @val !important; }

.ovf-y(@val: hidden) { overflowy-: @val !important; }

.pad(@val: 0) { padding: @val !important; }

.pad-top(@val: 0) { padding-top: @val !important; }

.pad-rgt(@val: 0) { padding-right: @val !important; }

.pad-btm(@val: 0) { padding-bottom: @val !important; }

.pad-lft(@val: 0) { padding-left: @val !important; }

.pxn(@val: flex) { position: @val !important; }

.rgt(@val: 0) { right: @val !important; }

.top(@val: 0) { top: @val !important; }

.txt-aln(@val: center) { text-align: @val !important; }

.txt-aln-lst(@val: center) { text-align-last: @val !important; }

.txt-dec(@val: none) { text-decoration: @val !important; }

.txt-dec-clr(@val: black) { text-decoration-color: @val !important; }

.txt-dec-ln(@val: overline underline) { text-decoration-line: @val !important; }

.txt-dec-stl(@val: wavy) { text-decoration-style: @val !important; }

.txt-ind(@val: 10%) { text-indent: @val !important; }

.txt-jst(@val: inter-word) { text-justify: @val !important; }

.txt-ovf(@val: ellipsis) { text-overflow: @val !important; }

.txt-shd(@val: none) { text-shadow: @val !important; }

.txt-tfm(@val: uppercase) { text-transform: @val !important; }

.tfm(@val: none) { transform: @val !important; }

.tfm-ogn(@val: 50% 50% 0) { transform-origin: @val !important; }

.tfm-style(@val: preserve-3d) { transform-: @val !important; }

.trnstn(@val: all 1s ease 1s) { transition: @val !important; }

.trnstn-dly(@val: 1s) { transition-delay: @val !important; }

.trnstn-drtn(@val: 1s) { transition-duration: @val !important; }

.trnstn-prpt(@val: all) { transition-property: @val !important; }

.trnstn-tmg-fnc(@val: ease) { transition-timing-function: @val !important; }

.vt-aln(@val: middle) { vertical-align: @val !important; }

.vis(@val: hidden) { visibility: @val !important; }

.wid(@val: 100%) { width: @val !important; }

.cc(@clr: black, @bgc: transparent) { .bgc(@bgc ); .clr(@clr ); }

.bl(@btm: 0, @lft: 0) { .btm(@btm ); .lft(@lft ); }

.br(@btm: 0, @rgt: 0) { .btm(@btm ); .rgt(@rgt ); }

.dp(@dsp: flex, @pxn: relative) { .dsp(@dsp ); .pxn(@pxn ); }

.mgnlr(@val: 0) { .mnl(@val ); .mnr(@val ); }

.mgntb(@val: 0) { .mnt(@val ); .mnb(@val ); }

.mp(@mgn: 0, @pad: 0) { .mgn(@mgn ); .pad(@pad ); }

.plr(@val: 0) { .pdl(@val ); .pdr(@val ); }

.ptb(@val: 0) { .pdt(@val ); .pdb(@val ); }

.tl(@top: 0, @lft: 0) { .top(@top ); .lft(@lft ); }

.tr(@top: 0, @rgt: 0) { .top(@top ); .rgt(@rgt ); }

.wh(@wid: 100%, @hgt: 100%) { .wid(@wid ); .hgt(@hgt ); }

.znx(@val: 5) { z-index: @val !important; }




.zo(@znx: 5, @ovf: hidden) { .znx(@znx ); .ovf(@ovf ); }

.square(@length: 10px) { .wh(@length, @length ); }

.dptl(@dsp: inline-block,
      @pxn: absolute,
      @top: 0,
      @lft: 0) { .dp(@dsp, @pxn ); .tl(@top, @lft ); }

.dptr(@dsp: inline-block,
      @pxn: absolute,
      @top: 0,
      @rig: 0) { .dp(@dsp, @pxn ); .tr(@top, @rig ); }

.dpbl(@dsp: inline-block,
      @pxn: absolute,
      @btm: 0,
      @lft: 0) { .dp(@dsp, @pxn ); .bl(@btm, @lft ); }

.dpbr(@dsp: inline-block,
      @pxn: absolute,
      @btm: 0,
      @rig: 0) { .dp(@dsp, @pxn ); .br(@btm, @rig ); }

.dpwh(@dsp: inline-block,
      @pxn: absolute,
      @wid: 100%,
      @hgt: 100%) { .dp(@dsp, @pxn ); .wh(@wid, @hgt ); }

.whmp(@wid: 100%,
      @hgt: 100%,
      @mar: 0,
      @pad: 0) { .wh(@wid, @hgt ); .mp(@mar, @pad ); }

.fill(@dsp: inline-block,
      @pxn: fixed,
      @top: 0,
      @lft: 0,
      @wid: 100vw,
      @hgt: 100vh,
      @mar: 0,
      @pad: 0) { .dp(@dsp, @pxn ); .tl(@top, @lft );
                 .wh(@wid, @hgt ); .mp(@mar, @pad ); }

.font(@ffm: serif,
      @fsz: 14px,
      @fwt: normal) { .ffm(@ffm ); .fsz(@fsz ); .fwt(@fwt ); }

.text(@ffm: serif,
      @fsz: 14px,
      @fst: normal,
      @fwt: normal,
      @txa: center,
      @txd: none) { .font(@ffm, @fsz, @fwt ); .fst(@fst ); }

visibility.less

@import 'screen-size-vars.less';
.screen-size-vars();

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;

  &-focusable:active,
  &-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

.hideScrollbars() {
  &::-webkit-scrollbar {
    /* make scrollbar invisible */
    background: transparent;
    height: 0px;
    width: 0px;
  }
}




.hideMobile() {
  @media screen and (max-width: @sizes[@mobile][max]) {
    display: none !important;
  }
}

.hideNotMobile() {
  @media screen and (min-width: @sizes[@tablet][min]) {
    display: none !important;
  }
}

.hideTablet() {
  @media screen and (min-width: @sizes[@tablet][min]) and (max-width: @sizes[@tablet][max]) {
    display: none !important;
  }
}

.hideComputer() {
  @media screen and (min-width: @sizes[@laptop][min]) {
    display: none !important;
  }
}