On this page

Looking for automated testing for technical SEO?

With SiteLint you can help search engine spiders crawl and index your site more effectively.

A programmer with the keyboard in the background

Sass darken and lighten functions replace with color.adjust in Visual Studio Code

How to replace Sass darken and lighten functions throughout the code with color.adjust in Visual Studio Code.

Sass color.adjust function is now replacing darken or lighten functions with the new Sass module system. However, making changes manually to all files can be very time-consuming. Here is how to make it faster for all files in Visual Studio Code.

Replacing darken or lighten with color.adjust automatically in all files

Use the following regular expressions:

  • For darken function in the field Search use: darken\((.*),\s*(.*)\), and for field Replace use: color.adjust($1, $lightness: -$2).
  • For lighten function in the field Search use: lighten\((.*),\s*(.*)\), and for field Replace use: color.adjust($1, $lightness: $2).

Example from Visual Studio code for darken case:

Visual Studio code and example of regular expression used to replace darken function with color.adjust function

Notes

  • Always verify the final results. The regular expression may not be able to catch all possible combinations from the source code. Upgrade Sass to the latest version and use Stylelint to validate the Sass code.
  • You may get the compile error SassError: There is no module with the namespace “map”..

    Add the following line in all files that uses map functions:

    @use "sass:map";
    Sass Map expression
  • You may get the compile error SassError: There is no module with the namespace “color”..

    Add the following line in all files that uses color functions:

    @use "sass:color";
    Sass Color expression
  • You may get the compile error SassError: There is no module with the namespace “str”..

    Add the following line in all files that uses str functions:

    @use "sass:string";
    Sass Strings expression

    Also, all functions started from str. should be replaced with string. function.

  • Adjust code for rgba function. Example:
    • Original value: rgba(color.adjust($action-danger, 5%), $lightness: 0.2).
    • After changes: color.adjust($action-danger, $lightness: 5%, $alpha: 0.2).

Related posts

Comments

Leave a Reply

SiteLint Audits: Monitoring in real-time Accessibility, Performance, Privacy, Security, SEO, Runtime Errors and Console Logs