|
| 1 | +# Sass-Lint |
| 2 | + |
| 3 | +Sass-Lint is a pure node.js-only tool to help you write clean and consistent SCSS and Sass. You can run it manually from the command line, which will output any problems with your SCSS, including the filename and line number(s). Newly generated Adaptive.js projects use this tool by default, leveraging a Grunt task wrapper to invoke it. |
| 4 | + |
| 5 | +When enabled in an Adaptive.js project, Sass files may be linted by invoking `grunt sasslint` or `grunt scsslint`. |
| 6 | + |
| 7 | +## Requirements |
| 8 | +- Node.js v4.X LTS and NPM v2.X (installed via NVM as directed in the [Adaptive.js docs](http://adaptivejs.mobify.com/v2.0/docs/install/)) |
| 9 | +- Files must be written in SCSS syntax |
| 10 | + |
| 11 | +## Important Links |
| 12 | + |
| 13 | +[Sass-Lint GitHub Repo](https://github.com/sasstools/sass-lint) |
| 14 | + |
| 15 | +[Mobify Code Style GitHub Repo](https://github.com/mobify/mobify-code-style) |
| 16 | + |
| 17 | +## Getting Started |
| 18 | +Make sure you have all the requirements. |
| 19 | +Install Sass-Lint by running this command in your Terminal: |
| 20 | + |
| 21 | +`npm install -g sass-lint` |
| 22 | + |
| 23 | +Install the Mobify Code Style by running this command in your Terminal: |
| 24 | + |
| 25 | +`npm install -g mobify-code-style` |
| 26 | + |
| 27 | +Note that the above npm install commands shouldn't need 'sudo' if you are using NVM (as recommended in the Adaptive.js docs) |
| 28 | + |
| 29 | +Follow the steps below for your preferred text editor. |
| 30 | + |
| 31 | +### Using Sass-Lint with Atom |
| 32 | + |
| 33 | +1. Install the following packages: |
| 34 | + - [Linter](https://atom.io/packages/linter) |
| 35 | + - [Linter-sass-lint](https://atom.io/packages/linter-sass-lint) |
| 36 | +1. Configure your Atom settings for linter-sass-lint: |
| 37 | + - .sass-lint.yml Config File path: |
| 38 | + Run `npm config get prefix` and append `/lib/node_modules/mobify-code-style/css/.sass-lint.yml` to the result |
| 39 | + - Global Node Installation Path: |
| 40 | + Run `npm get prefix` and insert the result |
| 41 | + - Enable "Use global sass-lint installation" |
| 42 | +1. Restart Atom |
| 43 | +1. Check a SCSS file to make sure that sass-lint is working |
| 44 | + |
| 45 | +### Using Sass-Lint with Sublime Text |
| 46 | + |
| 47 | +Before you start, make sure you have [Package Control](https://packagecontrol.io/installation) installed for Sublime Text. |
| 48 | + |
| 49 | +1. Using Package Control, install [SublimeLinter](https://packagecontrol.io/packages/SublimeLinter) |
| 50 | +1. Using Package Control, install [SublimeLinter-sass-lint](https://packagecontrol.io/packages/SublimeLinter-contrib-sass-lint) |
| 51 | +1. In the directory where you have all your Mobify and Adaptive projects, create a symlink named `.sass-lint.yml` that is linked to your machine's global version of the "mobify-code-style" that you installed above: |
| 52 | + - `ln -s path/to/your/local/mobify-code-style/css/.sass-lint.yml ./.sass-lint.yml` |
| 53 | + - Your local path can be found by running `npm config get prefix` and appending `/lib/node_modules/` |
| 54 | +1. Restart Sublime Text |
| 55 | +1. Check a SCSS file to make sure that sass-lint is working |
0 commit comments