Основы Sass: Функции
HTML&CSS

Основы Sass: Функции

Оригинал: Sass Basics: The Function Directive, Reggie Dawson

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

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


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

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

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


h1 { font-size: 2rem; }

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

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

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


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

h1 { @include remy(32); }

Это будет работать, но это не продуктивно. Во-первых, mixin позволяет вычислить значение в 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 unquote, чтобы убрать кавычки из возвращаемого значения. Sass содержит набор встроенных функций, которые вы можете посмотреть здесь.

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

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


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

Результирующий код:


.col-6 { width: 50%; }

Аргументы

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


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

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


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

Имена аргументов

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


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

Этот пример будет работать корректно.

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

Также мы можем использовать в функциях значения аргументов по умолчанию. Чтобы еще улучшить функцию remy, можно добавить значение по умолчанию для параметра $rembase.


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

Мы можем вызвать эту функцию один из способов:


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

Оба эти примера будут работать, но значение $rembase в них будет разное.

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

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


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

Использование функции:


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

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

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

Заключение

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться