Skip to content
This repository was archived by the owner on Aug 8, 2023. It is now read-only.

Commit d9c2606

Browse files
author
Marlow Payne
committed
First pass at Sass-lint readme
1 parent 2bb96a4 commit d9c2606

2 files changed

Lines changed: 58 additions & 0 deletions

File tree

css/Readme.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,8 @@
4242
* [Localization and Theming Best Practices](localization-and-theming-best-practices/readme.md)
4343
* [Block Comment Documentation Guide](comments/Readme.md)
4444
* [Hybrid Projects Best Practices](hybrid-projects/Readme.md)
45+
* [Sass-Lint](sass-lint/readme.md)
46+
* [Using Sass-Lint with Atom](sass-lint/readme.md#using-sass-lint-with-atom)
47+
* [Using Sass-Lint with Sublime Text](sass-lint/readme.md#using-sass-lint-with-sublime-text)
4548

4649
Continue on to [the Introduction →](introduction#introduction)

css/sass-lint/readme.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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

Comments
 (0)