Add grunt scss lint to your jekyll site.

The scsslint

scsslint is a tool to help keep your SCSS files clean and readable

Install grunt-scss-lint

npm install grunt-scss-lint --save-dev

Install gem scss-lint:

gem update --system && gem install scss-lint

Add this line to the readme file of your project

Scss-lint task:

If you use 'load-grunt-tasks' do nothing.

Else: Enabled inside your Gruntfile with this line of JavaScript grunt.loadNpmTasks('grunt-scss-lint');

Scss-lint configuration:

Add .scss-lint.yml file to project's root:

Example file (explanation in comments):

# Configuration scss-lint for THESITE

# Path to your scss folder
scss_files: "app/_scss/**/*.scss"

# Configutation linters.
linters:
  # Disable some linters
  ColorKeyword:
    enabled: false

  ColorVariable:
    enabled: false

  HexLength:
      enabled: false

  HexNotation:
      enabled: false

  IdSelector:
      enabled: false

  LeadingZero:
    enabled: false

  PropertySortOrder:
    enabled: false

  # Set nesting depth:
  NestingDepth:
    max_depth: 6

  SelectorDepth:
    max_depth: 5

  # Disable linter for sertain file/s.
  SelectorFormat:
    exclude:
      - 'app/_scss/main.scss'

The linter's list

The scsslint task

grunt.initConfig({
...
  scsslint: {
    allFiles: [
      '<%= yeoman.app %>/_scss/**/*.scss'
    ],
    options: {
      config: '.scss-lint.yml',
      exclude: '<%= yeoman.app %>/_scss/_code.scss',
      colorizeOutput: true,
      force: true
    }
  }
}

The list Options

Add to watcher:

watch: {
  scsslint: {
    files: ['<%= yeoman.app %>/_scss/*.scss'],
    tasks: ['scsslint']
  },
}

Add to serve task

...
concurrent: {
  server: [
    'bootlint',
    ...
  ],
},
...