In the world of programming, we deal with functions practically everywhere. By definition, a function is a part of a program, a subroutine (a separate piece of code), that processes specific data for us, which we can pass as arguments, and usually returns a value after calculation or processing. A properly defined function can then be reused many times anywhere it is available (its scope) in our code. Naturally, the results of our functions can also be used as parameters for other functions or as values in other operations.
Today, efficiency, clean code and modularity are key, and using specialised functions in our code is standard practice. This applies even to aspects that might seem simple, such as styling an HTML template, which has changed beyond recognition over the years. Modern designs are no longer just a simple layout, text and heading styles and colours, the look of tables and text wrapped around images. Visual designs are now packed with modern designer effects, eye-catching animations and other tricks.
Advanced CSS preprocessors help us untangle the complexity of modern designs, letting us manage the look of individual elements in an organised, modular way.
Sass, one of the leading ones, offers a rich set of predefined functions that can help achieve these goals. Sass can significantly improve our styling process.
As in one of our previous articles (on Power of Sass/SCSS: mixins), today we look at the superpowers the Sass/SCSS preprocessor gives us through functions, exploring their possibilities and showing how they can revolutionise the way we work.
Understanding Sass functions
Sass functions let us define reusable pieces of code logic that can manipulate data and generate CSS values dynamically. These functions can take parameters, perform calculations and return values, offering a level of flexibility that standard CSS cannot provide (extending the modern CSS features we mentioned in our article on CSS variables). Whether we are working with colours, typography or layout, Sass functions can help us write more efficient, easier-to-maintain style sheets.
Using the power of functions
The Sass preprocessor is a powerful tool with a long list of modules that let us modify and influence the data we pass. Among other things, we can manipulate colours, lists of elements, object maps, selectors and strings.
Let’s analyse a few practical examples where ready-made Sass functions can streamline the process of writing CSS:
1. Manipulating colours
Sass provides a wide range of colour manipulation functions, such as lighten(), darken(), adjust-hue() or rgba(). These functions let us change colour formats and adjust values dynamically based on specific requirements, making it easy to create variants of base colours or generate colour schemes on the fly.
$base-color: #0101fe;
$lighter-color: lighten($base-color, 20%); // 20% lighter than the base
$darker-color: darken($base-color, 10%); // 10% darker than the base
$accent-color: adjust-hue($base-color, 30deg); // the base colour's hue shifted by 30 degrees
The examples above use the basic functions for lightening, darkening and shifting the hue of a colour. With them we can quickly create a consistent colour scheme to use throughout the project.
2. Mathematical operations on numbers and strings
Sass functions support various mathematical operations, including addition, subtraction, multiplication and division. This is especially useful for dynamically calculating layout dimensions, spacing and other numeric values.
$container-width: 960px;
$sidebar-width: 25%;
.main-content {
width: ($container-width - $sidebar-width);
}
.sidebar {
width: $sidebar-width;
}
We can also use string operations, for example: string.unquote(".element:active"); // .element:active or string.quote(italic); // "italic". We can also find the position of a character in a string string.index("Aenean commodo ligula", "commodo"); // 8, or split a string into fragments string.slice("Hello world", 1, 3); // Hel, along with many other popular string functions.
3. Creating your own functions
Beyond the built-in functions, one of the greatest powers of Sass is that it lets developers define their own functions tailored to their specific needs. By encapsulating complex logic in reusable functions, we can abstract away implementation details and improve the readability and maintainability of our code.
$fontResMax: 1600;
$fontResMin: 375;
@function responsywne-rozmiar-fontu($fontMax, $fontMin, $rozdzielczoscMax:$fontResMax, $rozdzielczoscMin:$fontResMin) {
@return calc( #{$fontMin}px + (#{$fontMax} - #{$fontMin}) * (100vw - #{$rozdzielczoscMin}px) / (#{$rozdzielczoscMax} - #{$rozdzielczoscMin}) );
}
.header {
font-zise: responsywne-rozmiar-fontu(35,25);
}
The example above perfectly illustrates the potential of custom functions. It uses variables as parameters, some of which are optional. The function ultimately returns a responsive value that changes proportionally between the given minimum and maximum values depending on the size of the browser window. In this example the function is used to calculate the font size, but it can be any value, for example an element’s padding or the height and width of any element.
Summary
Sass functions are a powerful tool in every front-end developer’s arsenal. By using functions, you can write cleaner, easier-to-maintain CSS, streamline your workflow and create dynamic, responsive style sheets with ease. Whether you are manipulating colours, defining typography, performing mathematical operations or creating your own functions, Sass functions offer unmatched flexibility and efficiency. Add them to your developer toolkit and unlock the full potential of Sass in your projects.
