Sass функции для запуска ваших таблиц стилей

Это обновленная версия статьи, опубликованной 11 ноября 2014 года.

Sass имеет ряд встроенных функций, которые помогут вам настроить стили для вашего проекта намного быстрее и проще.

Давайте погрузимся в несколько из них!

Функции затемнения и осветления Sass

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

Как следует из названия, darken и lighten будет темнее и светлее цвет на определенный процент соответственно. Вы можете использовать их в состоянии наведения кнопки или по всему сайту для создания иерархии. Вот как:

 $main-color: #6dcff6; $darker-color: darken($main-color, 20%); $lighter-color: lighten($main-color, 20%); 

Второй аргумент в этих двух функциях принимает процентное значение, чтобы затемнить / осветлить цвет. Таким образом, вам не нужно искать гекс чуть более светлого цвета каждый раз, когда вы хотите состояние легкого взаимодействия. Например, вы можете сделать это:

 .brand-button { background: $main-color; } .brand-button:hover { background: $lighter-color; } .brand-button:visited { background: $darker-color; } 

Что компилируется в это:

 .brand-button { background: #6dcff6; } .brand-button:hover { background: #cdeffc; } .brand-button:visited { background: #0fafee; } 

Использование этих функций означает, что вы можете создать эффективную цветовую палитру, которая может оставаться неизменной на протяжении всего проекта. Если, например, у вас есть выделенные и неактивные цвета состояния, основанные на цвете основного бренда, и ваш клиент решает изменить свой основной цвет на полпути в процессе разработки (это случается чаще, чем я хочу признать…), вам нужно изменить только одно значение и увидеть его каскадом по всей остальной части сайта.

Функции Opacify и Transparentize Sass

Все еще придерживаясь цветов, opacify и transparentize делают цвета более или менее непрозрачными соответственно.

Лично я нашел это полезным при работе с модальными окнами и другими всплывающими окнами, где вы могли бы захотеть, чтобы фоновое содержимое исчезло.

 $main-color: rgba(0, 0, 0, 0.5); $opaque-color: opacify($main-color, 0.5); $transparent-color: transparentize($main-color, 0.3); 

В отличие от darken и lighten , второй аргумент в этих двух функциях должен быть десятичным числом от 0 до 1 вместо процента. Эти функции полезны для цветов, основанных на одном основном цвете бренда, который пронизывает весь проект. И снова, включив эти функции, вы сможете изменить только основной цвет, и он будет распространяться соответствующим образом.

Вы можете использовать значения, полученные с opacify и transparentize следующим образом:

 .modal.focus { background: $main-color; } .modal.blur { background: $transparent-color; } .main-content { background: $opaque-color; } 

Который скомпилирует в это:

 .modal.focus { background: rgba(0, 0, 0, 0.5); } .modal.blur { background: rgba(0, 0, 0, 0.2); } .main-content { background: black; } 

Вы также можете использовать opacify и opacify fade-out для создания того же эффекта, что и они, поскольку они являются псевдонимами для opacify и opacify .

Функция дополнения Sass

Как следует из названия, complement будет возвращать дополнение любого цвета, который подается в него. Это особенно полезно, если вы пытаетесь создать призыв к действию на своей странице или представлении и вам нужно немного визуального контраста. Использование этой встроенной функции избавляет от необходимости идти и смотреть цвет на цветовом круге.

 $main-color: #6dcff6; $call-to-action: complement($main-color); //=> this will return #f6946d 

Функция процента Sass

Числовые функции Sass помогут вам создавать свои собственные функции и циклы. Например, функция percentage преобразует любое число в процент, например, так:

 width: percentage(0.16) //=> this will return 16% 

 width: percentage(100px/50px); //=> this will return 200% 

 .foo { width: if( 1 > 2, 400px, 500px); //=> this will return 500px }