Статьи

Основы Sass: Директива о функциях

Сентябрь 29, 2018

Недавно я написал статью об основах Sass, в частности о директиве @mixin . В соответствии с темой выделения основ Sass, на этот раз я буду говорить о директиве @function.

Что делает функция 

@function remy($pxsize) {
    @return ($pxsize/16)+rem;
}

h1 { font-size: remy(32);}

Функция очень похожа на миксин, и они оба принимают одинаковые типы аргументов. Хотя они выглядят одинаково, функция Sass ведет себя по-разному. В то время как миксин облегчает нашу жизнь за счет уменьшения количества повторяющихся кодов, функция позволяет вам убрать повторяемую логику из вашего кода. Например, в приведенном выше коде мы используем функцию для вычисления значения rem для заданного размера пикселя. Результирующий код будет: 

 h1 { font-size: 2rem; }

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

Функция или миксин

Смотреть AtoZ: Sass
Узнайте Sass буква за буквой
Смотреть этот курс Смотреть этот курс

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

 @mixin remy ($pxsize) {
    font-size: ($pxsize/16)+rem;
}

h1 { @include remy(32);}

Это будет работать, но это контрпродуктивно. Прежде всего, миксин привязан только к вычислению rem для размера шрифта. Что, если мы хотим использовать наш миксин для других свойств? Мы могли бы переписать миксин, чтобы принять разные аргументы, но это было бы излишним.

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

 h1 { font-size: remy(32);}

div { width: remy(800);}

Как создать функцию

Для начала вы создаете функцию Sass с помощью директивы @function. Далее следует имя функции и любые аргументы, заключенные в скобки. 

 $col-count: 12;

@function col-pct($columns) {
    @return unquote((100/$col-count)*$columns+"%");
}

Помните, что функция возвращает только значение, поэтому мы должны вызвать @return, чтобы установить значение, возвращаемое функцией. Также обратите внимание, что функция может использовать любые глобально определенные переменные. Приведенная выше функция col-pct вычисляет размер в процентах от указанного количества столбцов. Я также использую встроенную функцию Sass для удаления кавычек из возвращаемого значения. Sass поставляется с множеством встроенных функций, которые вы можете посмотреть здесь .

Как использовать функцию

Функция вызывается путем предоставления имени функции и любых аргументов. Например, чтобы использовать функцию col-pct для расчета размера шести столбцов: 

 .col-6 { width: col-pct(6);}

Полученный код: 

 .col-6 { width: 50%; }

аргументы

Мы уже видели, что функция может использовать глобальные переменные. Мы также можем использовать тот же тип аргументов, который мы используем с mixins. Конечно, мы должны предоставить аргументы в правильном порядке. Допустим, мы изменили remy mixin, чтобы принять аргумент для размера rembase. 

 @function remy($pxsize,$rembase) {
    @return ($pxsize/$rembase)+rem;
}

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

Ключевые слова

Мы можем вызывать новую функцию remy с аргументами в любом порядке, если мы используем ключевые слова. 

 h3 { font-size: remy2($rembase:8,$pxsize:32 );

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

Значения по умолчанию

Мы также можем использовать значения по умолчанию с нашими функциями. Дальнейший способ улучшить функцию rem — включить значение по умолчанию. Таким образом, указание значения rem будет необязательным. 

 @function remy($pxsize,$rembase:16) {
    @return ($pxsize/$rembase)+rem;
}

Затем мы можем вызвать функцию одним из двух способов. 

 h3 { font-size: remy(32);}
p { font-size: remy(16,8);}

Оба эти примера будут работать, хотя база rem, с которой они работают, будет отличаться.

Переменные аргументы

Мы также можем использовать переменные аргументы в функции. Дополнение mixin из моей статьи @mixin может быть написано как функция. 

 @function pad($pads...) {
@return $pads;
}

Чтобы использовать функцию: 

 .five {padding: pad(25px,35px);}

.six {padding: pad(25px,35px,45px);}

.seven {padding: pad(25px,35px,45px,55px);}

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

39
Share: