10 полезных SASS миксинов.
Всем привет! Сегодня мы рассмотрим 10 SASS миксинов, которые вам следует использовать в своих проектах.
SCSS позволяет вам использовать возможности, которых нет в чистом CSS, такие, как переменные и вложенность. Самой большой возможностью я считаю миксины. Я не собираюсь уходить глубоко в эту тему, рассказывая, что это такое или как они работают, т.к. на эти темы уже есть статьи.
Все, что я собираюсь сделать, это поделиться некоторыми из них, которые я сам использую почти каждый раз в своих проектах.
Автоматическое центрирование
Чтобы быстро отцентрировать блочный элемент, не беспокоясь о верхних и нижних отступах, которые уже были применены.
@mixin push--auto {
margin: {
left: auto;
right: auto;
}
}
Псевдо
Когда вы используете ::before и ::after, вы всегда нуждаетесь в этих трех строчках кода. Используя этот миксин, вы сохраните свое время на их написание.
@mixin pseudo($display: block, $pos: absolute, $content: ''){
content: $content;
display: $display;
position: $pos;
}
Смотрите ниже пример использованя миксина без каких-либо аргументов.
div::after {
@include pseudo;
top: -1rem; left: -1rem;
width: 1rem; height: 1rem;
}
Отзывчивое соотношение
Мы используем этот миксин для создания масштабируемых элементов(обычно изображения/картинки заднего фона), чтобы поддерживать соотношение.
@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;
}
}
Например, вы можете написать код ниже и ваш блок будет иметь соотношение, которое обычно используется в видео.
div {
@include responsive-ratio(16,9);
}
CSS треугольники
Этот миксин берет на себя все хлопоты по созданию треугольников, которые вы можете видеть в большинстве стандартных подсказок, без картинок, вы только задаете цвет, размер, направление и все.
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
@include pseudo($pos: $position);
width: 0;
height: 0;
@if $round {
border-radius: 3px;
}
@if $direction == down {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
margin-top: 0 - round( $size / 2.5 );
} @else if $direction == up {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
margin-bottom: 0 - round( $size / 2.5 );
} @else if $direction == right {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
margin-right: -$size;
} @else if $direction == left {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
margin-left: -$size;
}
}
Стили шрифта
Переложите все проблемы установки шрифтов на этот миксин. (Предполагается, что вы уже установили шрифт), укажите резервные шрифты один раз и больше не беспокойтесь об этом.
@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) {
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
@if $size { font-size: $size; }
@if $colour { color: $colour; }
@if $weight { font-weight: $weight; }
@if $lh { line-height: $lh; }
}
Плейсхолдеры
Утомляет устанавливать стили в определенных форматах. Этот миксин сделает это для вас сам.
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
Если вы не знаете, как использовать @content, вот пример:
input,
textarea {
@include input-placeholder {
color: $grey;
}
}
Медиа-запросы
Миксин, который сохранит вам очень много времени! Вы можете использовать значения только в пикселях, но у нас есть также настройки контрольных точек по умолчанию, которые также работают, другие же – экономят время, сохраняя свои контрольные точки последовательно.
$breakpoints: (
"phone": 400px,
"phone-wide": 480px,
"phablet": 560px,
"tablet-small": 640px,
"tablet": 768px,
"tablet-wide": 1024px,
"desktop": 1248px,
"desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type == max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}
Пример ниже показывает увеличение внутренних отступов и размера шрифта, когда вьюпорт становится больше 1024px.
.site-header {
padding: 2rem;
font-size: 1.8rem;
@include mq('tablet-wide') {
padding-top: 4rem;
font-size: 2.4rem;
}
}
Z-index
Хотя технически это всего лишь функция, но я решил ее тоже добавить. В большом проекте бывает трудно уследить за всеми значениями индекса, а этот миксин поможет собрать их в одном месте.
@function z($name) {
@if index($z-indexes, $name) {
@return (length($z-indexes) - index($z-indexes, $name)) + 1;
} @else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
@return null;
}
}
$z-indexes: (
"outdated-browser",
"modal",
"site-header",
"page-wrapper",
"site-footer"
);
Когда вы захотите использовать z-index, назовите его так же, как ваш класс, и добавьте в ваш файл переменных/настроек, как ниже. Вы никогда больше не будете иметь проблем с z-index: 9999999;.
.site-header {
z-index: z('site-header');
}
Аппаратные средства
Простое и эффективное средство, когда вам нужно включить ускорение с помощью аппаратных средств для анимаций, сохраняя все быстрым, гладким и немерцающим.
@mixin hardware($backface: true, $perspective: 1000) {
@if $backface {
backface-visibility: hidden;
}
perspective: $perspective;
}
Truncate
Добавить усечение к элементу не так просто, как кажется, хотя это экономит время, когда вы включаете миксин, вы должны только указать границу и максимальную ширину. Удачных дней!
@mixin truncate($truncation-boundary) {
max-width: $truncation-boundary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Это не все
У нас есть больше загрузок от быстрого добавления сглаживания к тексту до отключения функционала копирования текста вообще(полезно в навигациях или кнопках). Вы можете найти их в нашем файле миксинов.
-
Создано 29.08.2016 23:47:52
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.