Миксины sass для ускорения разработки

Введение

В прошлой заметке я уже скидывал пачку миксинов для упрощения стилизации сайтов. Однако там все было для языка less. Кстати можете перейти в ту запись, если интересно: Less миксины – готовая авторская подборка

В рамках данного поста предлагаю ознакомиться уже с подборкой, где миксины sass значительно ускорят вас. Причём заметьте именно для .sass, а не .scss. Для последнего уже сами сможете переконвертировать это добро, хотя я знаю не так много людей, кто бы писать исключительно на .sass.

Sass Mixin Collection

// Адаптивная верстка и медиа запросы

=r($media)
    @media only screen and (max-width: $media + "px")
        @content

=rm($mediam)
    @media (min-width: $mediam + "px")
        @content

// Псевдо элементы

=bf
    content: ''
    position: absolute
    @content


// Поставить элемент вертикально 

=vertical 
    font-size: 0
    &:before 
        content: ''
        display: inline-block
        vertical-align: middle
        width: 0
        height: 100%

// Px to Rem

=f($fsize)
    font-size: $fsize + px 
    font-size: ($fsize / 10) + rem

// Тут все понятно, но уже не особо актуально

=clr
    &:after, &:before
        content: " "
        display: table
    &:after
        clear: both
        *zoom: 1

// Расположить по ширине

=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: 0
        visibility: hidden
        overflow: hidden

// Уже не помню, где использовать

=text-overflow
    overflow: hidden
    -ms-text-overflow: ellipsis
    text-overflow: ellipsis
    white-space: nowrap

// Треугольники на чистом css

=arr($width, $height, $bg, $direction)
    width: 0px
    height: 0px
    border-style: solid
    @if $direction == t
        border-width: 0 $width / 2 + px $height + px $width / 2 + px
        border-color: transparent transparent $bg transparent
    @if $direction == r
        border-width: $height / 2 + px 0 $height / 2 + px $width + px
        border-color: transparent transparent transparent $bg
    @if $direction == b
        border-width: $height + px $width / 2 + px 0 $width / 2 + px
        border-color: $bg transparent transparent transparent
    @if $direction == l
        border-width: $height / 2 + px $width + px $height / 2 + px 0
        border-color: transparent $bg transparent transparent
    @if $direction == tl
        border-width: $height + px $width + px 0 0
        border-color: $bg transparent transparent transparent
    @if $direction == tr
        border-width: 0 $width + px $height + px 0
        border-color: transparent $bg transparent transparent
    @if $direction == br
        border-width: 0 0 $height + px $width + px
        border-color: transparent transparent $bg transparent
    @if $direction == bl
        border-width: $height + px 0 0 $width + px
        border-color: transparent transparent transparent $bg

// Подключение шрифта

=font($alias, $name)
    @font-face
        font-family: $alias
        src: url("../fonts/" + $name + ".eot")
        src: url("../fonts/" + $name + ".eot?#iefix") format("embedded-opentype"), url("../fonts/" + $name + ".woff") format("woff"), url("../fonts/" + $name + ".ttf") format("truetype"), url("../fonts/" + $name + ".svg#" + $name + "") format("svg")
        @content

// Быстрая плавность    

=trs
    -webkit-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;   
    o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

// Цвет неактивного текста в инпутах

=placeholder-color($color)
    &:-moz-placeholder,
    &::-moz-placeholder
        color: $color
        opacity: 1
    &::-webkit-input-placeholder
        color: $color

// Лучше использовать этот    

=ph($plcolor)
    &::-webkit-input-placeholder
      color: $plcolor
    &:-moz-placeholder
      color: $plcolor
    &::-moz-placeholder
      color: $plcolor
    &:-ms-input-placeholder
      color: $plcolor

// Чтоб быстрей писать     

=df
    display: -webkit-flex
    display: -moz-flex
    display: -ms-flex
    display: -o-flex
    display: flex

// Сделать черно-белым    

=gr
    -webkit-filter: grayscale(100%)
    -moz-filter: grayscale(100%)
    -ms-filter: grayscale(100%)
    -o-filter: grayscale(100%)
    filter: grayscale(100%)
    filter: gray

// Снова цветным    

=grh
    -webkit-filter: grayscale(0%)
    -moz-filter: grayscale(0%)
    -ms-filter: grayscale(0%)
    -o-filter: grayscale(0%)
    filter: grayscale(0%)
    filter: none

Если не понятно, что есть что, то можете заглянуть в запись, где я выкладывал практически такую же подборку, но только для less. Там есть комментарии по всему. В данном же случае, не виду смысла все разжёвывать, ибо уровень у вас должен быть адекватный, чтоб все понять самим.

Если зашла подборка, то с тебя поделится этой записью в соц. сетях ниже, чтобы на сайте было больше посетителей. Это очень поможет развитию проекта.