SASS все самые полезные миксины

SASS mixins

// clearfix
// пример: @include cfx;
=cfx
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden

  * html &
    height: 1px

// центрирование элемента
// пример: @include push--auto;
=push--auto
  margin:
    left: auto
    right: auto

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

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

  @if $pseudo
    &:before
      +pseudo($pos: relative)

      width: 100%
      padding-top: $padding
  @else
    padding-top: $padding

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

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

  &::-moz-placeholder
    color: $cl

  &:-moz-placeholder
    color: $cl

  &:-ms-input-placeholder
    color: $cl

// горизонтальное выравнивание для inline блока
// пример: @include justify;
=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;
=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);
=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);
=ts($x, $y, $blur, $color)
  text-shadow: $x $y $blur $color

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

// трансформация, плавный переход
// пример: @include transit(color,.2s,ease-in-out);
=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;
=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

  +br(5px)

  +ts(0, 0, 0, black)

  +grad-l(gray, aqua)

  &:hover
    +grad-l(aqua, gray)

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

// Скругление на каждый угол
// пример: @include br-c(10px,0,10px,0);
=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);
=round($w: 80px, $bd: 3px)
  display: table-cell
  vertical-align: middle
  text-align: center

  +br($w / 2)

  height: $w
  width: $w
  border-width: $bd
  border-style: solid
  border-color: #464a4c

// градиент линейный 
// пример: @include grad-l($red,$black);
=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);
=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);
=sep-h($w, $h, $color)
  &:after
    content: ""
    display: block
    height: $h
    width: $w
    margin: 0 auto
    background-color: $color

// Сброс параметров списка
// пример: @include rul;
=rul
  margin: 0
  padding: 0
  list-style: none

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

// эффект при наведении
// пример: @include hov1;
=hov1
  &:hover
    opacity: 0.8

=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);
=input($bsh: transparentize(blue, 0.3), $bdc: gray, $pl: gray, $timetransit: 0.15s)
  display: inline-block
  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

// цветовые примеси

// color-stack лучше в фаайл _vars.scss
// Пример: color: color(orange) & color: color(orange,pale) & color: color(orange,dark)
$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)

Очень много бесполезных миксинов

Поддерживаю выше