Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Linting

The styleguide provides a method of linting Sass code to ensure it conforms to the rules in the styleguide. This linting tool will go through all Sass code and issue warnings wherever the code differs from the styleguide. We’ve created a specific .scss-lint.yml file that’s configured to work with the css coding styleguide. There are three ways to setup linting:

On GitHub with Hound

  1. Go to Hound.
  2. Sign in with GitHub.
  3. Activate the respository through Hound.
  4. Add the .scss-lint.yml file to the base of your repository.

Locally with ruby

  1. Add the .scss-lint.yml file to the base of your repository.
  2. Install the scss-lint gem with gem install scss_lint
  3. Run scss-lint: scss-lint app/assets/stylesheets/

Locally with node (experimental!)

  1. Run npm install --save-dev @18f/stylelint-rules to download the package and save it to your package.json
  2. The package provides both a gulp task and a cli interface. Detailed usage instructions can be found in the README

Shortcomings

scss-lint

The scss-lint tool currently lacks the functionality to check these rules in the CSS coding styleguide:

stylelint

This tool is still being evaluated, so not every rule in our current styleguide is supported by stylelint. scss-lint is purpose built for SCSS and is therefore a bit more feature rich. The following rules are currently not supported:

That being said, if you want to avoid a dependency on ruby in your project and still benefit from reliable SCSS linting, please test out this tool!