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

Commit

Permalink
Merge pull request #101 from mobify/release-v2.4.2
Browse files Browse the repository at this point in the history
Release v2.4.2
  • Loading branch information
Marlow Payne committed Mar 14, 2016
2 parents 21b7717 + afc8494 commit 2ee4826
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 2 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -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
Expand Down
3 changes: 3 additions & 0 deletions css/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
2 changes: 1 addition & 1 deletion css/introduction/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)


Expand Down
55 changes: 55 additions & 0 deletions css/sass-lint/readme.md
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down

0 comments on commit 2ee4826

Please sign in to comment.