frequent mixin & usage

// mixin properties null = not setting to default
// @import "mixin";

$url-images: "../../../../img/";
background:url($url-images + '/ico.png');

@mixin flex ($justify: center, $aligin:center, $flow: null){
    display: flex;
    justify-content: $justify;
    align-items: $aligin;
    flex-flow: $flow;
}
// using flex example
@include flex(flex-end, flex-start, row wrap);

// compiled css
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-flow: row wrap;


@mixin position( $p: relative, $t: null, $b: null, $l: null, $r: null) {
  position: $p;
  top: $t;
  bottom: $b;
  left: $l;
  right: $r;
}

// using position example
@include position($p:absolute, $b:0, $l:0);

// compiled css
position: absolute;
bottom: 0;
left: 0;

@mixin ellipsis($line: 1, $mh:null) {
    @if ($line == 1) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    } @else {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: $line;
      max-height: $mh;
    }
}

@mixin txtHidden {
    display: block;
    text-indent: -9999px;
    width: 0;
    height: 0;
}