When you have big project with many files and dependencies, usually you should care about good code base and periodic cleaning / refactoring. The same situation I had when decided to refactor SCSS files- structure, naming and variables…

I was surprised when figured out- there aren’t good instruments to find unused SCSS variables.

The ways they appear is usual:

• somebody removed use of variable but forgot to delete declaration
• it was used for declaration of another variable or inside some expression
• someone added it "for future" or decided to use variable later
• etc.

Solution

So was decided just to create simple shell script to find SCSS-syntax variables which appear in the code only one time. Here it is:

Script finds all SCSS variables (e.g. $some_variable-NAME1) which are used in code only once (e.g. declaration or using variable from some framework). Tested on MAC and Linux.

#!/usr/bin/env bash
# HOW TO USE
# Save code to file
# Run as "SCRIPT_FILE_NAME SASS_DIRECTORY"
# e.g "./find_unused_variables.sh ./sass"
 
VAR_NAME_CHARS='A-Za-z0-9_-'

find "$1" -type f -name "*.scss" -exec grep -o "\$[$VAR_NAME_CHARS]*" {} ';' | sort | uniq -u

How to use

Let’s imagine you have folder “sass” where are SCSS files of your project. Then:

1. Create file "find_unused_variables.sh" in the parent folder of "sass"
2. Copy and paste content from solution script to it
3. Open the parent folder of "sass" in your terminal
4. Run the following command to do this file executable: ```bash chmod +x ./find_unused_variables.sh ```
5. Run the script: ```bash ./find_unused_variables.sh ./sass ```
6. As result you will have in the shell list of the unused SCSS variables

N.B.

When you use in your codebase some 3rd party libraries variables (e.g. “susy” to provide settings for it)- script will also show them as unused because they might appear only once in the folder with your SCSS code.