Automating code quality control is an old practice that developers use, for example, in their javascript code. With new tools like grunt, we can automate our sass code. It's a good option for projects with lots of contributors. We will configure Scss-lint to this purpose.
Installing scss-lint for grunt
Assuming that you have gruntfile.js/gruntfile.coffee and package.json files, you need to install the package via npm.
npm install grunt-scss-lint --save-devThen, it may be enables inside your Gruntfile:
grunt.loadNpmTasks('grunt-scss-lint');Configuring your task
It's very easy to configure it, you have different options to customize your output. Here are some examples:
- colorizeOutput: Get some nice looking output. The default value is true.
- reporterOutput: The jUnit XML file to save the output to.
- emitError : Emits a Grunt event on scss-lint error called scss-lint-error.
Example:
grunt.initConfig({
scsslint: {
allFiles: [
'assets/styles/*.scss',
],
options: {
config: '.scss-lint.yml',
reporterOutput: 'scss-lint-report.xml',
colorizeOutput: true
},
}
});It's important to know that all xml files must be in the same directory of Gruntfile. Thanks @akodde.
Get total automatization with grunt-watch
The above example provides a task that you can use with grunt scsslint command. It's good but not good enough. Grunt watch give us the possibility to automate the code validation when we save the sass file.
To get that, we have to install grunt watch and add this configuration:
watch: {
scsslint: {
files: 'assets/styles/*.scss',
tasks: ['scsslint']
},
}Install scss-lint as a ruby gem
If you don't use grunt, you can check your sass code installing the gem:
gem install scss-lintThen, you can lint your code by typing:
scss-lint path/to/scss/filesConclusions
It's really easy to install and use scss-lint, but the really important point is the code validation. In big projects, with lots of contributors and teams, the lint of code is useful to prevent bad quality of scss code. Of course the code validation by other team member is necessary also, but this plugin is a good option to be the first filter.