15 Useful SCSS Functions to Enhance Your Stylesheets

4 min readAug 22, 2023

Cascading Style Sheets (CSS) is the cornerstone of web design, providing developers with the means to style and layout their websites. However, writing and maintaining large and complex stylesheets can become challenging. This is where Sass (Syntactically Awesome Style Sheets), particularly its extension SCSS, comes to the rescue. SCSS offers a variety of powerful functions that can simplify your styling process, enhance maintainability, and promote code reusability. In this article, we’ll explore 15 useful SCSS functions that can take your stylesheets to the next level.

1. darken() and lighten()

One of the core challenges in web design is managing colors effectively. The darken() and lighten() functions in SCSS allow you to adjust a color’s brightness easily. For example:

$primary-color: #3498db;

.button {
   background-color: $primary-color;
 &:hover {
   background-color: darken($primary-color, 10%);
 }
}

2. mix()

The mix() function provides a way to create color by mixing two existing colors together. This can be handy when creating gradients or subtle color transitions:

$color1: #ff0000;
$color2: #00ff00;

.gradient {
   background-image: linear-gradient(to right, $color1, $color2);
}

3. rgba()

The rgba() function helps you set a color with an alpha (transparency) value. This can be incredibly useful for creating overlays, shadows, and more:

$overlay-color: rgba(0, 0, 0, 0.5);

.overlay {
   background-color: $overlay-color;
}

4. rem() and em()

Responsive design requires flexible units for font sizes and spacing. The rem() and em() functions allow you to define sizes relative to the root element or the parent element’s font size, respectively:

$base-font-size: 16px;

body {
 font-size: $base-font-size;
}
.header {
 font-size: em(24px); // 24px / 16px = 1.5em
}

5. calc()

Complex calculations within CSS can be error-prone and hard to manage. The calc() function in SCSS lets you perform mathematical operations directly in your stylesheets:

$base-width: 300px;

.container {
   width: calc(100% - #{$base-width});
}

6. map-get()

Maps (key-value pairs) are a powerful data structure in SCSS. The map-get() function retrieves the value associated with a given key:

$colors: (
   primary: #3498db,
   secondary: #e74c3c
);

.button-primary {
   background-color: map-get($colors, primary);
}

7. map-merge()

When dealing with themes or configuration objects, the map-merge() function allows you to combine multiple maps into one:

$theme-defaults: (
 primary-color: #3498db,
 font-family: 'Arial'
);

$theme-custom: (
 primary-color: #e74c3c
);

$final-theme: map-merge($theme-defaults, $theme-custom);

8. str-insert()

The str-insert() function lets you insert a substring into a given string at a specified position:

$base-url: 'https://example.com';
$image-path: '/images/';

$image-url: str-insert($base-url, $image-path, 8); // Inserts /images/ after https://

9. nth() and index()

Working with lists and arrays becomes more manageable with the nth() and index() functions. nth() returns the value at a specific index, while index() returns the index of a value:

$colors: red, green, blue;
.second-color: nth($colors, 2); // green
$color-index: index($colors, blue); // 3

10. unit()

The unit() function allows you to attach a unit to a number dynamically. This can be helpful for situations where units change based on context:

$font-size: 16;

.text {
   font-size: unit($font-size, em); // 16em
}

11. unquote()

When working with URLs or custom properties, the unquote() function can help you remove quotation marks from a string:

$font-path: '/fonts/';

@font-face {
   src: url(unquote($font-path + 'my-font.woff'));
}

12. str-length()

The str-length() function calculates the length of a string. This can be useful for validation or truncating strings:

$input: 'Hello, world!';
$input-length: str-length($input); // 13

13. selector-nest()

The selector-nest() function allows you to nest selectors programmatically, helping to keep your code structured and DRY:

$namespace: '.container';

.card {
   @include selector-nest($namespace) {
     background-color: gray;
   }
}

14. percentage()

The percentage() function converts a unitless number into a percentage value. This can be particularly handy for creating responsive layouts:

$width: 0.75;

.element {
   width: percentage($width); // 75%
}

15. unique-id()

Generating unique IDs or classes can be useful in situations where you need to avoid conflicts. The unique-id() function provides a random unique identifier:

$unique-class: unique-id();
  .#{$unique-class} {
     // styles here
  }

Conclusion

SCSS functions are powerful tools that enhance the capabilities of your stylesheets, making them more dynamic, maintainable, and reusable. By utilizing functions like darken(), mix(), map-get(), and others, you can streamline your styling process and create more adaptable and responsive web designs. Incorporating these functions into your workflow will not only improve the quality of your styles but also make your codebase more efficient and manageable. So, go ahead and experiment with these SCSS functions to take your web development skills to new heights.

Follow me on Twitter, Medium, and Linkedin to read more!