A simple tool to check for unused Sass variables in a directory.
npm install find-unused-sass-variables --save-dev
find-unused-sass-variables folder [, folder2...] --ignore "$my-var,$my-second-var" -e scss -e css --ignoreFiles file-with-unused-vars.scss
# or
fusv folder [, folder2...] --ignore "$my-var,$my-second-var" -e scss -e css --ignoreFiles file-with-unused-vars.scss
import { findAsync, find } from 'find-unused-sass-variables';
// 'directory' is a folder
const unused = find('directory');
// Array of unused variables
console.log(unused.unused);
// Array<{ name: string, line: string, file: string }>
/*
[
{
name = '$foo';
file = 'file where this variable can be found';
line = 'line of file';
},
{
....
}
]
*/
// Total number of variables in the files
console.log(unused.total);
// Ignoring variables
const ignoredVars = ['$my-var', '$my-second-var'];
const unused = find('directory', { ignore: ignoredVars });
// Ignoring files
const ignoreFiles = ['./file-with-unused-vars.scss', '**/_variables.scss'];
const unused = fusv.find('directory', { ignoreFiles });
// Specifying file extensions
const unused = find('directory', { fileExtensions: ['css','scss']});
// Asynchronous usage
let unused = await findAsync('directory');
// or like a Promise
unused = findAsync('directory').then(result => {
console.log(unused.unused);
});
dir
: stringoptions
: optional options Object
Returns an object with unused
and total
. unused
has the array of unused variables and total
has the sum of all variables in the files (unused and used ones).
Returns a Promise which resolves result; returns the same as find(dir, options)
.
Array of strings of the variables to ignore, e.g. ['$my-var', '$my-second-var']
Array of strings of files to ignore, e.g. ['./file-with-unused-vars.scss', '**/_variables.scss']
.
Array of file extensions to search for unused variables in. e.g. ['scss']
Disable or enable fusv
with the fusv-disable
and fusv-enable
comments:
$used-variable-1: #666;
// fusv-disable
$unused-variable: #coffee;
// fusv-enable
$used-variable-2: #ace;
- The tool's logic is pretty "dumb"; if you use the same name for a variable in different files or namespaces, then it won't distinguish between them.
- The tool only looks for
.scss
files by default, but you can optionally specify the file extension.