diff --git a/CHANGELOG b/CHANGELOG index 04faa86..7caf0a0 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,5 @@ +2.4.2 + - Add/update documentation for Sass-Lint 2.4.1 - Fix some bugs with sass-lint config 2.4.0 diff --git a/css/Readme.md b/css/Readme.md index 462fae7..b8e1e10 100644 --- a/css/Readme.md +++ b/css/Readme.md @@ -42,5 +42,8 @@ * [Localization and Theming Best Practices](localization-and-theming-best-practices/readme.md) * [Block Comment Documentation Guide](comments/Readme.md) * [Hybrid Projects Best Practices](hybrid-projects/Readme.md) +* [Sass-Lint](sass-lint/readme.md) + * [Using Sass-Lint with Atom](sass-lint/readme.md#using-sass-lint-with-atom) + * [Using Sass-Lint with Sublime Text](sass-lint/readme.md#using-sass-lint-with-sublime-text) Continue on to [the Introduction →](introduction#introduction) diff --git a/css/introduction/readme.md b/css/introduction/readme.md index 508e224..0b5aafa 100644 --- a/css/introduction/readme.md +++ b/css/introduction/readme.md @@ -18,7 +18,7 @@ We follow a mixture of various methodologies include, but not limited to: SMACSS * [Vellum](https://github.com/mobify/vellum) is our starting point for base styles on Customer Success projects at Mobify * [Spline](https://github.com/mobify/spline) is our library of Sass mixins and functions * [Stencil](https://github.com/mobify/stencil) (Deprecated – but a new 2.0 version is coming soon!) is our library or reusable UI patterns -* [SCSS-Lint](https://github.com/causes/scss-lint) is our preferred linter for `SCSS`. See our custom linting rules are found [here](https://github.com/mobify/mobify-code-style/blob/master/css/.scss-lint.yml)) +* [Sass-Lint](https://github.com/sasstools/sass-lint) is our preferred linter for `SCSS`. Our custom linting rules are found [here](https://github.com/mobify/mobify-code-style/blob/master/css/.sass-lint.yml)). Find out how to integrate Sass-Lint with your text editor [here](../sass-lint/readme.md). * [CSScomb](http://csscomb.com/) is a tool that can be plugged into most popular text editors that automatically formats your code! Our formatting ruleset can be found [here](https://github.com/mobify/mobify-code-style/blob/master/css/.csscomb.json) diff --git a/css/sass-lint/readme.md b/css/sass-lint/readme.md new file mode 100644 index 0000000..460dc2b --- /dev/null +++ b/css/sass-lint/readme.md @@ -0,0 +1,55 @@ +# Sass-Lint + +Sass-Lint is a pure node.js-only tool to help you write clean and consistent SCSS and Sass. Newly generated Adaptive.js projects use this tool by default, leveraging a Grunt task wrapper to invoke it. You can also run it manually from the command line, which will output any problems with your SCSS, including the filename and line number(s). + +When enabled in an Adaptive.js project, Sass files may be linted by invoking `grunt sasslint` or `grunt scsslint`. + +## Requirements +- 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/)) +- Files must be written in SCSS syntax + +## Important Links + +[Sass-Lint GitHub Repo](https://github.com/sasstools/sass-lint) + +[Mobify's Sass-Lint rules in the Code Style GitHub Repo](https://github.com/mobify/mobify-code-style/blob/master/css/.sass-lint.yml) + +## Getting Started +Make sure you have all the requirements. +Install Sass-Lint by running this command in your Terminal: + +`npm install -g sass-lint` + +Install the Mobify Code Style by running this command in your Terminal: + +`npm install -g mobify-code-style` + +Note that the above npm install commands shouldn't need `sudo` if you are using NVM (as recommended in the [Adaptive.js docs](http://adaptivejs.mobify.com/v2.0/docs/install/)) + +Follow the steps below for your preferred text editor. + +### Using Sass-Lint with Atom + +1. Install the following packages: + - [Linter](https://atom.io/packages/linter) + - [Linter-sass-lint](https://atom.io/packages/linter-sass-lint) +1. Configure your Atom settings for linter-sass-lint: + - .sass-lint.yml Config File path: + Run `npm config get prefix` and append `/lib/node_modules/mobify-code-style/css/.sass-lint.yml` to the result + - Global Node Installation Path: + Run `npm get prefix` and insert the result + - Enable "Use global sass-lint installation" +1. Restart Atom +1. Check a SCSS file to make sure that sass-lint is working + +### Using Sass-Lint with Sublime Text + +Before you start, make sure you have [Package Control](https://packagecontrol.io/installation) installed for Sublime Text. + +1. Using Package Control, install [SublimeLinter](https://packagecontrol.io/packages/SublimeLinter) +1. Using Package Control, install [SublimeLinter-sass-lint](https://packagecontrol.io/packages/SublimeLinter-contrib-sass-lint) +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: + - `ln -s path/to/your/local/mobify-code-style/css/.sass-lint.yml ./.sass-lint.yml` + - Your local path can be found by running `npm config get prefix` and appending `/lib/node_modules/` +1. Restart Sublime Text +1. Check a SCSS file to make sure that sass-lint is working diff --git a/package.json b/package.json index 2725456..239d096 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mobify-code-style", - "version": "2.4.1", + "version": "2.4.2", "description": "Code style guide and linting tools for Mobify", "main": "index.js", "scripts": {