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

readme.md

Latest commit

 

History

History
55 lines (38 loc) · 2.79 KB

readme.md

File metadata and controls

55 lines (38 loc) · 2.79 KB

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)
  • Files must be written in SCSS syntax

Important Links

Sass-Lint GitHub Repo

Mobify's Sass-Lint rules in the Code Style GitHub Repo

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)

Follow the steps below for your preferred text editor.

Using Sass-Lint with Atom

  1. Install the following packages:
  2. 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"
  3. Restart Atom
  4. 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 installed for Sublime Text.

  1. Using Package Control, install SublimeLinter
  2. Using Package Control, install SublimeLinter-sass-lint
  3. 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/
  4. Restart Sublime Text
  5. Check a SCSS file to make sure that sass-lint is working