Less миксины – готовая авторская подборка

Введение

В прошлом уроке «Less для самых маленьких» я уже говорил про миксины и то, как ими пользоваться. В рамках данного поста так сильно все затягивать не буду, если что, просто прочитайте ознакомительную заметку сами и все поймёте сразу. Тут же я просто предложу и немного расшифрую свою коллекцию, где less миксины, которые использую я сам в своей работе и начну с самых простых.

Работа со шрифтами

Первый и один из самых важных моментов в разработке – это подключение шрифтов. Никогда не любил по 100 раз все писать и хотелось быстренько подключать все необходимое.

// Подключение шрифтов
.font(@family, @filename: @family, @weight: normal, @style: normal) {
    @font-face {
        font-family: @family;
        src:url('../fonts/@{filename}.eot');
        src:url('../fonts/@{filename}.eot?#iefix') format('embedded-opentype'),
        url('../fonts/@{filename}.woff') format('woff'),
        url('../fonts/@{filename}.ttf') format('truetype');
        font-weight: @weight;
        font-style: @style;
    }
}

Использование в работе: .font(Roboto,Roboto Bold,bold,notmal);

Как видите, ничего сложного тут нет. Таким образом вы подключаете один шрифт. Нужно ещё, просто втыкаете на новой строке вновь строку.

Следующий вариант уже перестал использоват из-за массовой поддкржки браузеров единиц измерения rem. Однако если нужно, то можете смело брать и пользоваться.

.f(@size) {
    font-size: @size*1px;
    font-size: (@size / 10rem);
}

Использует так: .f(16);в результате вы получите две строки, в первой будет введённое значение в пикселях, второе уже в rem. Однако не зебудьте у HTML выставить значение font-size: 62,5% чтобы все как надо работало.

Адаптивная верстка и быстрая работа с @media

Сразу с места в карьер:

// Адаптив
.r(@size, @rules) {
    @media screen and (max-width: @size*1px) {
        @rules();
    }
}
.lg(@rules) {
    @media screen and (max-width: 1200px) {
        @rules();
    }
}
.md(@rules) {
    @media screen and (max-width: 992px) {
        @rules();
    }
}
.sm(@rules) {
    @media screen and (max-width: 768px) {
        @rules();
    }
}
.xs(@rules) {
    @media screen and (max-width: 576px) {
        @rules();
    }
}

Как это все использовать на практике:

Пишем

.wrapper {
    font-size: 1.6rem;
    border: 1px solid red;
    background-color: #f1f1f1;

    .r(1000, {
        font-size: 2rem;
        border: none;
        background-color: red;
    });
}

В результате получаем в css следующую запись.

.wrapper {
    font-size: 1.6rem;
    border: 1px solid red;
    background-color: #f1f1f1;
}
@media screen and (max-width: 1000px) {
    .wrapper {
        font-size: 2rem;
        border: none;
        background-color: red;
    }
}

Это был лишь первый миксин из списка, если в западло писать размер ширины точки остановки, то в списке представлены примеры для bootstrap сетки.

Остальные свои заготовки я просто скину в виде готового комплекта, чтобы было удобно скопировать его к себе и более не отнимать твоё время.

Готовый файл _mixin.less

// Адаптив
.r(@size, @rules) {
    @media screen and (max-width: @size*1px) {
        @rules();
    }
}
.lg(@rules) {
    @media screen and (max-width: 1200px) {
        @rules();
    }
}
.md(@rules) {
    @media screen and (max-width: 992px) {
        @rules();
    }
}
.sm(@rules) {
    @media screen and (max-width: 768px) {
        @rules();
    }
}
.xs(@rules) {
    @media screen and (max-width: 576px) {
        @rules();
    }
}

// Размер шрифта в rem
.f(@size) {
    font-size: @size*1px;
    font-size: (@size / 10rem);
}

// Быстрый квадрат
.sq(@size) {
    height: @size*1px;
    width: @size*1px;
}

// базывые параметры для before и after
.bf() {
    position: absolute;
    content: ' ';
}

// Цвет placeholder
.ph(@color) {
    &::-webkit-input-placeholder {
        color: @color
    }

    &:-moz-placeholder {
        color: @color
    }

    &::-moz-placeholder {
        color: @color
    }

    &:-ms-input-placeholder {
        color: @color
    }
}

// Подключение шрифтов
.font(@family, @filename: @family, @weight: normal, @style: normal) {
    @font-face {
        font-family: @family;
        src:url('../fonts/@{filename}.eot');
        src:url('../fonts/@{filename}.eot?#iefix') format('embedded-opentype'),
        url('../fonts/@{filename}.woff') format('woff'),
        url('../fonts/@{filename}.ttf') format('truetype');
        font-weight: @weight;
        font-style: @style;
    }
}

// Transition
.trs(@time: 0.3, @type: ease-in, @for: all) {
    -webkit-transition: @for @type @time*1s;
    -moz-transition: @for @type @time*1s;
    -o-transition: @for @type @time*1s;
    transition: @for @type @time*1s;
}

// Черно-белое изображение
.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;
}

// Градиент
.gradient(@from: #000, @to: #fff) {
    background-color: @from;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background-image: -webkit-linear-gradient(top, @from, @to);
    background-image: -moz-linear-gradient(top, @from, @to);
    background-image: -o-linear-gradient(top, @from, @to);
    background-image: linear-gradient(to bottom, @from, @to);
}

// Translate
.trft(@x, @y: @x) {
    transform: translate(@x * 1%, @y * 1%);
}

// Фоновое изображение
.bgi(@image, @type: jpg) {
    background-image: url('../img/@{image}.@{type}');
}

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