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) - 
}@elseif $ direction == up { 
border-left: $ Size solid transparent- 
border-right: $ Size solid transparent- 
border-bottom: $ Size solid $ color- 
margin-bottom:0- round( $ size /2.5) - 
}@elseif $ direction == right { 
border-top: $ Size solid transparent- 
border-bottom: $ Size solid transparent- 
border-left: $ Size solid $ color- 
margin-right:-$ size- 
}@elseif $ 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

Хоча технічно це всього лише функція, але я вирішив її теж додати. У великому проекті буває важко встежити за всіма значеннями індексу, а цей миксин допоможе зібрати їх в одному місці.

Відео: Введення в SASS & Compass

@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}`- 
@returnnull- 
} 
} 
$ z-indexes:( 
"Outdated-browser", 
"Modal", 
"Site-header", 
"Page-wrapper", 
"Site-footer" 
) -

Коли ви захочете використовувати z-index, назвіть його так само, як ваш клас, і додайте в ваш файл змінних / налаштувань, як нижче. Ви ніколи більше не будете мати проблем з z-index: 9999999-.

Відео: Susy - зручні Sass гріди замість Bootstrap

.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- 
}

Це не все

У нас є більше завантажень від швидкого додавання згладжування до тексту до відключення функціоналу копіювання тексту взагалі (корисно в навігації або кнопках). Ви можете знайти їх в нашому файлі Міксини.

джерело

Поділися в соціальних мережах:

Схожі