Enable CodeClimate SCSS Lint checks (#2886)

* add scss_lint to Gemfile

* add .scss-lint.yml

* fix warnings of scss-lint

* chmod -x styles/variables.scss

* Enable CodeClimate SCSS Lint checks

1 files changed, 264 insertions, 0 deletions

diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 00000000000..5d7cc4da51c
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,264 @@
+# Linter Documentation:
+# https://github.com/brigade/scss-lint/blob/v0.42.2/lib/scss_lint/linter/README.md
+
+scss_files: 'app/javascript/styles/**/*.scss'
+
+exclude:
+  - app/javascript/styles/reset.scss
+
+linters:
+  # Reports when you use improper spacing around ! (the "bang") in !default,
+  # !global, !important, and !optional flags.
+  BangFormat:
+    enabled: false
+
+  # Whether or not to prefer `border: 0` over `border: none`.
+  BorderZero:
+    enabled: false
+
+  # Reports when you define a rule set using a selector with chained classes
+  # (a.k.a. adjoining classes).
+  ChainedClasses:
+    enabled: false
+
+  # Prefer hexadecimal color codes over color keywords.
+  # (e.g. `color: green` is a color keyword)
+  ColorKeyword:
+    enabled: false
+
+  # Prefer color literals (keywords or hexadecimal codes) to be used only in
+  # variable declarations. They should be referred to via variables everywhere
+  # else.
+  ColorVariable:
+    enabled: true
+
+  # Which form of comments to prefer in CSS.
+  Comment:
+    enabled: false
+
+  # Reports @debug statements (which you probably left behind accidentally).
+  DebugStatement:
+    enabled: false
+
+  # Rule sets should be ordered as follows:
+  # - @extend declarations
+  # - @include declarations without inner @content
+  # - properties, @include declarations with inner @content
+  # - nested rule sets.
+  DeclarationOrder:
+    enabled: false
+
+  # `scss-lint:disable` control comments should be preceded by a comment
+  # explaining why these linters are being disabled for this file.
+  # See https://github.com/brigade/scss-lint#disabling-linters-via-source for
+  # more information.
+  DisableLinterReason:
+    enabled: true
+
+  # Reports when you define the same property twice in a single rule set.
+  DuplicateProperty:
+    enabled: false
+
+  # Separate rule, function, and mixin declarations with empty lines.
+  EmptyLineBetweenBlocks:
+    enabled: true
+
+  # Reports when you have an empty rule set.
+  EmptyRule:
+    enabled: true
+
+  # Reports when you have an @extend directive.
+  ExtendDirective:
+    enabled: false
+
+  # Files should always have a final newline. This results in better diffs
+  # when adding lines to the file, since SCM systems such as git won't
+  # think that you touched the last line.
+  FinalNewline:
+    enabled: false
+
+  # HEX colors should use three-character values where possible.
+  HexLength:
+    enabled: false
+
+  # HEX color values should use lower-case colors to differentiate between
+  # letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
+  HexNotation:
+    enabled: true
+
+  # Avoid using ID selectors.
+  IdSelector:
+    enabled: false
+
+  # The basenames of @imported SCSS partials should not begin with an
+  # underscore and should not include the filename extension.
+  ImportPath:
+    enabled: false
+
+  # Avoid using !important in properties. It is usually indicative of a
+  # misunderstanding of CSS specificity and can lead to brittle code.
+  ImportantRule:
+    enabled: false
+
+  # Indentation should always be done in increments of 2 spaces.
+  Indentation:
+    enabled: true
+    width: 2
+
+  # Don't write leading zeros for numeric values with a decimal point.
+  LeadingZero:
+    enabled: false
+
+  # Reports when you define the same selector twice in a single sheet.
+  MergeableSelector:
+    enabled: false
+
+  # Functions, mixins, variables, and placeholders should be declared
+  # with all lowercase letters and hyphens instead of underscores.
+  NameFormat:
+    enabled: false
+
+  # Avoid nesting selectors too deeply.
+  NestingDepth:
+    enabled: false
+
+  # Always use placeholder selectors in @extend.
+  PlaceholderInExtend:
+    enabled: false
+
+  # Sort properties in a strict order.
+  PropertySortOrder:
+    enabled: false
+
+  # Reports when you use an unknown or disabled CSS property
+  # (ignoring vendor-prefixed properties).
+  PropertySpelling:
+    enabled: false
+
+  # Configure which units are allowed for property values.
+  PropertyUnits:
+    enabled: false
+
+  # Pseudo-elements, like ::before, and ::first-letter, should be declared
+  # with two colons. Pseudo-classes, like :hover and :first-child, should
+  # be declared with one colon.
+  PseudoElement:
+    enabled: true
+
+  # Avoid qualifying elements in selectors (also known as "tag-qualifying").
+  QualifyingElement:
+    enabled: false
+
+  # Don't write selectors with a depth of applicability greater than 3.
+  SelectorDepth:
+    enabled: false
+
+  # Selectors should always use hyphenated-lowercase, rather than camelCase or
+  # snake_case.
+  SelectorFormat:
+    enabled: false
+    convention: hyphenated_lowercase
+
+  # Prefer the shortest shorthand form possible for properties that support it.
+  Shorthand:
+    enabled: true
+
+  # Each property should have its own line, except in the special case of
+  # single line rulesets.
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  # Split selectors onto separate lines after each comma, and have each
+  # individual selector occupy a single line.
+  SingleLinePerSelector:
+    enabled: true
+
+  # Commas in lists should be followed by a space.
+  SpaceAfterComma:
+    enabled: false
+
+  # Properties should be formatted with a single space separating the colon
+  # from the property's value.
+  SpaceAfterPropertyColon:
+    enabled: true
+
+  # Properties should be formatted with no space between the name and the
+  # colon.
+  SpaceAfterPropertyName:
+    enabled: true
+
+  # Variables should be formatted with a single space separating the colon
+  # from the variable's value.
+  SpaceAfterVariableColon:
+    enabled: true
+
+  # Variables should be formatted with no space between the name and the
+  # colon.
+  SpaceAfterVariableName:
+    enabled: false
+
+  # Operators should be formatted with a single space on both sides of an
+  # infix operator.
+  SpaceAroundOperator:
+    enabled: true
+
+  # Opening braces should be preceded by a single space.
+  SpaceBeforeBrace:
+    enabled: true
+
+  # Parentheses should not be padded with spaces.
+  SpaceBetweenParens:
+    enabled: false
+
+  # Enforces that string literals should be written with a consistent form
+  # of quotes (single or double).
+  StringQuotes:
+    enabled: false
+
+  # Property values, @extend, @include, and @import directives, and variable
+  # declarations should always end with a semicolon.
+  TrailingSemicolon:
+    enabled: true
+
+  # Reports lines containing trailing whitespace.
+  TrailingWhitespace:
+    enabled: true
+
+  # Don't write trailing zeros for numeric values with a decimal point.
+  TrailingZero:
+    enabled: false
+
+  # Don't use the `all` keyword to specify transition properties.
+  TransitionAll:
+    enabled: false
+
+  # Numeric values should not contain unnecessary fractional portions.
+  UnnecessaryMantissa:
+    enabled: false
+
+  # Do not use parent selector references (&) when they would otherwise
+  # be unnecessary.
+  UnnecessaryParentReference:
+    enabled: false
+
+  # URLs should be valid and not contain protocols or domain names.
+  UrlFormat:
+    enabled: true
+
+  # URLs should always be enclosed within quotes.
+  UrlQuotes:
+    enabled: true
+
+  # Properties, like color and font, are easier to read and maintain
+  # when defined using variables rather than literals.
+  VariableForProperty:
+    enabled: false
+
+  # Avoid vendor prefixes. Or rather: don't write them yourself.
+  VendorPrefix:
+    enabled: false
+
+  # Omit length units on zero values, e.g. `0px` vs. `0`.
+  ZeroUnit:
+    enabled: true