Useful mixines for SCSS

gistfile1.txt

// Примесь для задания состояния ссылок
// Пример: @include linx(white, blue, green, red);

@mixin linx($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

// Примесь для задания вертикального ритма текста
// Пример: @include set-font($line[, $line]);
           @include set-margin([$line, $line]);

@mixin set-font($font-size, $line-height: $line) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin set-margin($margin-top: $line, $margin-bottom: $line) {
  margin-top: $margin-top;
  margin-bottom: $margin-bottom;
}

// Примесь для задания цвета блокам-оповещений
// Пример: @include generate-colors($base-color);
           @include generate-colors($error-color);
           @include generate-colors($info-color);
           @include generate-colors($warning-color);
           @include generate-colors($success-color);

@mixin generate-colors($color) {
  $bg-color: lighten($color, 35%);
  color: darken($bg-color, 50%);
  background-color: $bg-color;
  border-color: darken(spin($bg-color, -10), 5%);
}

// Примесь для центровки блока
// Пример: @include zero-centered;
@mixin zero-centered {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

// Примесь для треугольных форм
// Пример: @include triangle(top; 50px; #ff4136);
           @include triangle(right; 50px; #0074d9);
           @include triangle(bottom; 50px; #2ecc40);
           @include triangle(left; 50px; #b10dc9);

@mixin triangle($_; $size; $color) {
  width: 0;
  height: 0;
  border-width: $size;
  border-style: solid;
  border-color: $color;
}

@mixin triangle(top; $size; $color) {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-style: none;
}

@mixin triangle(right; $size; $color) {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-style: none;
}

@mixin triangle(bottom; $size; $color) {
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-style: none;
}

@mixin triangle(left; $size; $color) {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-style: none;
}

// clearfix
// пример: @include cfx;
@mixin cfx {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

// Псевдо, при использовании ::before и ::after
// пример: @include pseudo(inline-block,relative,'next');
@mixin pseudo($display: block, $pos: absolute, $content: ''){
  content: $content;
  display: $display;
  position: $pos;
}

// Отзывчивое соотношение. Данный миксин нужен для масштабируемых элементов чтобы сохранять соотношение при любом уменьшении или увеличении
// Например, вы можете написать код ниже и ваш блок будет иметь соотношение, которое обычно используется в видео.
// Пример: @include responsive-ratio(16,9);
@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote( ( $y / $x ) * 100 + '%' );
  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  } @else {
    padding-top: $padding;
  }
}

// усечение элемента применять к текстовым тегам типа "span" "p" и т.д.
// пример: @include truncate(110px);  
@mixin truncate($truncation-boundary) {
  max-width: $truncation-boundary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Стилизация placeholder
// пример: @include place($red);
@mixin place($cl) {
  &::-webkit-input-placeholder {color:$cl;}
  &::-moz-placeholder {color:$cl;}
  &:-moz-placeholder {color:$cl;}
  &:-ms-input-placeholder {color:$cl;}
}

// горизонтальное выравнивание для inline блока
// пример: @include justify;
@mixin justify {
  text-align: justify;
  line-height: 0;
  font-size: 0;
  text-justify: newspaper;
  zoom: 1;
  text-align-last: justify;
  &:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
  }
}

// вертикальное выравнивание для inline блока
// пример: @include vertical;
@mixin vertical {
  text-align: center;
  font-size: 0;
  &:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
  }
}

// тень блока
// пример: @include bsh(1px,1px,3px,0,$gray,inset);
@mixin bsh($top, $left, $blur, $size, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $size $color;
    -moz-box-shadow:inset $top $left $blur $size $color;
    box-shadow:inset $top $left $blur $size $color;
    } @else {
      -webkit-box-shadow: $top $left $blur $size $color;
      -moz-box-shadow: $top $left $blur $size $color;
      box-shadow: $top $left $blur $size $color;
    }
  }

// тень текста
// пример: @include ts(1px,1px,3px,$red);
@mixin ts($x, $y, $blur, $color) {
  text-shadow: $x $y $blur $color;
}

// тень текста (множественный эффект)
// пример: @include text-shadow(1px 1px 1px $red, 2px 2px 2px $green);
@mixin text-shadow($shadows...) {
  text-shadow: $shadows;
}

// трансформация, плавный переход
// пример: @include transit(color,.2s,ease-in-out);
@mixin transit($what:all,$when:0.25s,$how:ease) {
  -webkit-transition: $what $when $how;
  -moz-transition: $what $when $how;
  -ms-transition: $what $when $how;
  -o-transition: $what $when $how;
  transition: $what $when $how;
}

// кнопка color
// пример @include btn;
@mixin btn {
  display: inline-block;
  border: 1px solid black;
  color: black;
  cursor: pointer;
  outline: none;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 6px 10px;
  @include br(5px);
  @include ts(0,0,0,black);
  @include grad-l(gray, aqua);
  &:hover {
    @include grad-l(aqua, gray);
  }
}

// скругление универсальное
// пример: @include br(3px);
@mixin br($rad) {
  -webkit-border-radius: $rad;
  -moz-border-radius: $rad;
  -ms-border-radius: $rad;
  border-radius: $rad;
}

// Скругление на каждый угол
// пример: @include br-c(10px,0,10px,0);
@mixin br-c($p1,$p2,$p3,$p4) {
  -webkit-border-radius: $p1 $p2 $p3 $p4;
  -moz-border-radius: $p1 $p2 $p3 $p4;
  -ms-border-radius: $p1 $p2 $p3 $p4;
  border-radius: $p1 $p2 $p3 $p4;
}

// Окружность с центрованным элементом
// пример: @include round(60px,4px);
@mixin round($w:80px, $bd:3px) {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  @include br($w/2);
  height: $w;
  width: $w;
  border-width: $bd;
  border-style: solid;
  border-color: #464a4c;
}

// градиент линейный 
// пример: @include grad-l($red,$black);
@mixin grad-l($direction, $color-stops) {
  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

// Бэкграунд на всю ширину экрана.
// пример: @include cover-background("../img/main.jpg", top, center, scroll);
@mixin cover-background($img-uri, $background-top:"center", $background-left:"center", $background-attachment:"fixed") {
  background: url($img-uri) no-repeat unquote($background-top) unquote($background-left) unquote($background-attachment); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
}

// Горизонтальная линия
// пример: @include sep-h(80%,2px,blue);
@mixin sep-h($w,$h,$color) {
  &:after {
    content: "";
    display: block;
    height: $h;
    width: $w;
    margin: 0 auto;
    background-color: $color;
  }
}

// Обнуление отступов и удаление маркеров списка
// пример: @include list-reset;
@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// Поведение при наведении на ссылку
// пример: @include hov-a(none,$red);
@mixin hov-a($under: none, $color: #002aff) {
  &:hover, &:focus {
    text-decoration: $under;
    color: $color;
  }
}

// эффект при наведении
// пример: @include hov1;
@mixin hov1 {
  &:hover {
    opacity: 0.8;
  }
}
@mixin hov2 {
  transition: all .2s ease-out;
  &:hover {
    opacity: 0.8;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
    transition: all .2s ease-out;
  }
}

// input style custom
// пример: @include input($green,$black,$black,.5s);
@mixin input($bsh: transparentize(blue,.3), $bdc: gray, $pl: gray, $timetransit: .15s){
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid $bdc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 1px $bdc;
          box-shadow: inset 0 0 1px $bdc;
  -webkit-transition: border-color ease-in-out $timetransit, -webkit-box-shadow ease-in-out $timetransit;
       -o-transition: border-color ease-in-out $timetransit, box-shadow ease-in-out $timetransit;
          transition: border-color ease-in-out $timetransit, box-shadow ease-in-out $timetransit;
  &:focus {
    border-color: $bsh;
    outline: 0;
    -webkit-box-shadow: inset 0 0 1px $bdc, 0 0 8px $bsh;
            box-shadow: inset 0 0 1px $bdc, 0 0 8px $bsh;
  }
  &::-moz-placeholder{
    color: $pl;
    opacity: 1;
  }
  &:-ms-input-placeholder{
    color: $pl;
  }
  &::-webkit-input-placeholder{
    color: $pl;
  }
  &::-ms-expand{
    background-color: transparent;
    border: 0;
  }
}

// цветовые примеси
/* примеры:
  body{
    color: color(blue, normal,.8);
  }
  p{
    color: color(orange);
  }
  blockquote{
    color: color(blue);
    background: color(orange, pale,.4);
    border-color: color(orange, dark);
  }
*/
// color-stack лучше в фаайл _vars.scss
$color-stack: (group: orange, id: normal, color: #e67835), (group: orange, id: pale, color: #f8a878), (group: orange, id: dark, color: #ad490c), (group: blue, id: normal, color: #426682);

@function color($group, $shade: normal, $transparency: 1){
  @each $color in $color-stack {
    $c-group: map-get($color, group);
    $c-shade: map-get($color, id);

    @if $group == map-get($color, group) and $shade == map-get($color, id){
      @return rgba(map-get($color, color), $transparency);
    }
  }
}