I recently wrote an article about the basics of Sass, specifically the @mixin directive. In keeping with the theme of highlighting the basics of Sass, this time I will be talking about the @function directive.
What a function does
@function remy($pxsize) {
@return ($pxsize/16)+rem;
}
h1 { font-size: remy(32);}
A function looks a lot like a mixin, and they both accept the same types of arguments. Although they look similar,a Sass function behaves differently. While a mixin makes our life easier by lessening typing repetitive code, a function allows you to strip repeatable logic from your code. For example, in the code above we are using a function to calculate a rem value for a given pixel size. The resulting code would be:
h1 { font-size: 2rem; }
As you can see instead of applying styles to an element like you would with a mixin, all a function does is return a value for use in your stylesheets.
Function or a Mixin
The key to understanding when to use a function versus a mixin is knowing what you want. A mixin is used to create styles that would be a chore to continually write. Using a mixin you could easily write these styles with one line of code. When writing mixins you will be tempted to include calculations. We could have wrote the remy function as a mixin:
@mixin remy ($pxsize) {
font-size: ($pxsize/16)+rem;
}
h1 { @include remy(32);}
This would work but it is counter productive. First of all the mixin is locked into just calculating rem for font-size. What if we wanted to use our mixin for other properties? We could rewrite the mixin to take different arguments but that would be overkill.
A function on the other hand is designed to return a value. When you need to generate styles, use a mixin. When you need to encapsulate some logic, especially if you intend to use it across different elements in your project, then use a function. We can use our remy function across any element we choose.
h1 { font-size: remy(32);}
div { width: remy(800);}
How to create a function
To start, you create a Sass function by using the @function directive. This is followed by the name of the function and any arguments enclosed in parentheses.
$col-count: 12;
@function col-pct($columns) {
@return unquote((100/$col-count)*$columns+"%");
}
Remember a function only returns a value so we have to call @return to set the value returned by the function. Also note that the function can use any globally defined variables. The col-pct function above calculates the size in percentages of the specified number of columns. I am also using a built in Sass function, unquote to strip the quotes from the return value. Sass comes with a load of built in functions you can take a look at here.
How to use a function
A function is called by supplying the function name and any arguments. For example, to use the col-pct function to calculate the size of six columns:
.col-6 { width: col-pct(6);}
The resulting code is:
.col-6 { width: 50%; }
Arguments
We already saw that the function can use global variables. We can also use the same type of arguments we use with mixins. Of course we have to provide the arguments in the correct order. Lets say we modified the remy mixin to accept an argument for the rembase size.
@function remy($pxsize,$rembase) {
@return ($pxsize/$rembase)+rem;
}
If we supply the arguments in the wrong order we will get an incorrect value. Unless of course we use keyword arguments
Keywords
We can call the new remy function with the arguments in any order if we use keywords.
h3 { font-size: remy2($rembase:8,$pxsize:32 );
This will work correctly since we used keyword arguments.
Default Values
We can also use default values with our functions. A way to improve the rem function further would be to include a default value. That way specifying the rem base value will be optional.
@function remy($pxsize,$rembase:16) {
@return ($pxsize/$rembase)+rem;
}
We can then call the function one of two ways.
h3 { font-size: remy(32);}
p { font-size: remy(16,8);}
Both of these examples will work, although the rem base they are working from will be different.
Variable arguments
We can also use variable arguments in a function. The padding mixin from my @mixin article can be written as a function.
@function pad($pads...) {
@return $pads;
}
To use the function:
.five {padding: pad(25px,35px);}
.six {padding: pad(25px,35px,45px);}
.seven {padding: pad(25px,35px,45px,55px);}
Although functions are limited in their ability, I am sure you will be able to find some way to incorporate them into your projects. Try to strip out any logic for use across your projects in functions. If you come up with something useful it could come in handy in future projects.
Frequently Asked Questions about Sass Basics and Function Directive
What is the difference between Sass and SCSS?
Sass (Syntactically Awesome Stylesheets) and SCSS (Sassy CSS) are both preprocessor scripting languages that are interpreted or compiled into Cascading Style Sheets (CSS). The key difference between the two lies in their syntax. Sass has a loose syntax with white space and no semicolons, the block of code is delimited by indentation. On the other hand, SCSS resembles more to CSS, it uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block.
How do I use Sass mixins and include directives?
Mixins in Sass allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. A mixin is defined with the @mixin directive. It’s followed by a space, the name of the mixin and then a block of content. The @include directive is used to include the mixin wherever you want its styles to be applied.
What is the function directive in Sass?
The function directive in Sass allows you to define your own functions in Sass script. It’s defined with the @function directive, followed by a space, the function name, a parenthesized list of arguments, and a block of content. The @return directive is used to specify the value that should be returned by the function.
How can I use Sass in my Apollo Server?
Apollo Server is a community-driven, open-source GraphQL server that works with any GraphQL schema. It doesn’t directly support Sass, as it’s primarily focused on serving GraphQL APIs. However, you can use Sass in your front-end application that communicates with the Apollo Server. You would compile your Sass to CSS as part of your front-end build process.
How does Sass improve CSS?
Sass enhances CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When used properly, Sass can help make large and complicated stylesheets clearer to understand and easier to maintain. Thanks to features like variables, mixins, and nesting, you can create cleaner, DRY (Don’t Repeat Yourself) CSS.
Can I use Sass with CSS frameworks like Bootstrap?
Yes, you can use Sass with CSS frameworks like Bootstrap. In fact, Bootstrap 4 is built with Sass. By using Sass, you can take advantage of variables, mixins, and functions to customize your Bootstrap styles.
How do I compile my Sass files?
To compile your Sass files, you’ll need a Sass compiler. There are many available, including command-line tools like Dart Sass, and GUI applications like Koala. Once you’ve installed a compiler, you can run it on your Sass files to produce CSS output.
What are Sass partials and how do I use them?
Partials in Sass are a way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. You can then @import your partials where you need them.
How do I use Sass variables?
Variables in Sass are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable.
Can I use Sass with JavaScript frameworks like React or Vue?
Yes, you can use Sass with JavaScript frameworks like React or Vue. Both frameworks have ways to include Sass files, and there are loaders available for both Webpack and Babel that can help compile your Sass files into CSS.
Reggie is a longtime Network Admin who has finally seen the error of his ways and has come over to the darkside: development. He likes to hack together web projects in his spare time using Angular, Compass, Sass, Bootstrap, or Foundation.