Skip to content

Instantly share code, notes, and snippets.

@TokaLazy
Last active April 3, 2018 12:40
Show Gist options
  • Save TokaLazy/53c17a85adaf3f0d2ff2189dbeba586d to your computer and use it in GitHub Desktop.
Save TokaLazy/53c17a85adaf3f0d2ff2189dbeba586d to your computer and use it in GitHub Desktop.
Configurable tool for writing clean and consistent SCSS
# https://github.com/brigade/scss-lint
# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md
scss_files: "**/*.scss"
exclude: ["libs/**/*.scss", "node_modules/**/*.scss", "bower_components/**/*.scss"]
plugin_directories: [".scss-linters"]
# List of gem names to load custom linters from (make sure they are already installed)
plugin_gems: []
# Default severity of all linters.
severity: warning
linters:
# Reports when you use improper spacing around ! (the "bang") in !default, !global, !important, and !optional flags.
BangFormat:
enabled: true
# Whether a space should be present before the !, as in color: #000 !important;
space_before_bang: true
# Whether a space should be present after the !, as in color: #000 ! important;
space_after_bang: false
# Reports when a BEM selector contains more elements than a configurable maximum number.
BemDepth:
enabled: false
# Maximum number of elements allowed in a BEM selector
max_elements: 2
# Prefer the terser border: 0 over border: none, as it is usually what is intended.
BorderZero:
enabled: true
# Whether to prefer 0 (zero) or none (none)
convention: zero # 'zero' or 'none'
# 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.
ColorKeyword:
enabled: true
# 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: false
# Prefer // comments over /* ... */.
Comment:
enabled: true
# Regular expression for matching allowed comments, such as '^[/* ] Copyright'
# allowed:
# Style of comment to enforce
style: silent # 'silent' or 'loud'
# Reports @debug statements (which you probably left behind accidentally).
DebugStatement:
enabled: true
# These linters are designed specifically for codebases which utilize the Compass framework.
# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/compass/README.md
Compass::*:
enabled: false
# Rule sets should be ordered as follows: @extend declarations, @include declarations without inner @content, properties, @include declarations with inner @content, then nested rule sets.
DeclarationOrder:
enabled: true
# scss-lint:disable control comments should be preceded by a comment explaining why these linters are being disabled for this file.
DisableLinterReason:
enabled: false
# Reports when you define the same property twice in a single rule set.
DuplicateProperty:
enabled: true
# Whether to ignore consecutive duplicate properties (default false), or a whitelist.
ignore_consecutive:
- background
# Place @else statements on the same line as the preceding curly brace.
ElsePlacement:
enabled: true
style: same_line # 'same_line' or 'new_line'
# Separate rule, function, and mixin declarations with empty lines.
EmptyLineBetweenBlocks:
enabled: true
# Don't enforce for single-line blocks
ignore_single_line_blocks: 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: true
# Whether a final newline should be present
present: true
# You can specify whether you prefer shorthand or long-form hexadecimal colors by setting the style option to short or long, respectively.
HexLength:
enabled: true
style: short # 'short' or 'long'
# Checks if hexadecimal colors are written in lowercase. You can specify which case with the style option.
HexNotation:
enabled: true
style: lowercase # 'lowercase' or 'uppercase'
# Ensure hexadecimal colors are valid (either three or six digits).
HexValidation:
enabled: true
# Avoid using ID selectors.
IdSelector:
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: true
# The basenames of @imported SCSS partials should not begin with an underscore and should not include the filename extension.
ImportPath:
enabled: true
leading_underscore: false
filename_extension: false
# Use two spaces per indentation level.
Indentation:
enabled: false
# Whether non-nested rule sets can be arbitrarily indented
allow_non_nested_indentation: false
character: space # 'tab' or 'space'
# Number of characters per indentation level
width: 2
# Don't write leading zeros for numeric values with a decimal point.
LeadingZero:
enabled: true
style: exclude_zero # 'exclude_zero' or 'include_zero'
# Prefer length literals (numbers with units) to be used only in variable declarations. They should be referred to via variables, or calculations using variables, everywhere else.
LengthVariable:
enable: false
# A list of lengths (numbers with units) that aren't caught. e.g. [100vh, 100vw]
allowed_lengths: []
# A list of properties that can use literal lengths, e.g. [text-shadow, box-shadow]
allowed_properties: []
# Reports when you define the same selector twice in a single sheet.
MergeableSelector:
enabled: true
# Ensure rule sets which can be nested are nested
force_nesting: true
# A list of selectors that can MergeableSelector, list those used in CSS Shims (https://github.com/dart-archive/angular.dart/wiki/CSS-Shim)
# whitelist:
# Functions, mixins, variables, and placeholders should be declared with all lowercase letters and hyphens instead of underscores.
NameFormat:
enabled: true
# Whether to allow names to start with a single underscore
allow_leading_underscore: true
# Name of convention to use (hyphenated_lowercase (default), camel_case, snake_case), or a regex the name must match (eg: ^[a-zA-Z]+$)
convention: hyphenated_lowercase # 'hyphenated_lowercase' or 'camel_case', or 'snake_case', or a regex pattern
# Custom catch-all explanation if you do not want to use the built-in explanations
# convention_explanation:
# Convention to use for {type}s, where {type} is on of function, mixin, variable, or placeholder
# {type}_convention:
# Custom explanation for {type} convention, where {type} is one of function, mixin, variable, or placeholder
# {type}_convention_explanation
# Avoid nesting selectors too deeply.
NestingDepth:
enabled: true
# Maximum depth before reporting errors
max_depth: 3
# Whether to report errors for parent selectors
ignore_parent_selectors: false
# Always use placeholder selectors in @extend.
PlaceholderInExtend:
enabled: false
# Enforces that functions, mixins, and variables that follow the private naming convention (default to underscore-prefixed, e.g. $_foo) are defined and used within the same file.
PrivateNamingConvention:
enabled: false
# Prefix used to denote "private"
prefix: _
# Limit the number of properties in a rule set.
PropertyCount:
enabled: false
# Whether to include the properties in nested rule sets in the count
include_nested: false
# Maximum number of properties
max_properties: 10
# Sort properties in a strict order. By default, will require properties be sorted in alphabetical order, as it's brain dead simple (highlight lines and execute :sort in vim), and it can benefit gzip compression.
PropertySortOrder:
enabled: false
# Array of properties, or the name of a preset order (default is nil, resulting in alphabetical ordering)
order: smacss
# Whether to ignore properties that are not explicitly specified in order
ignore_unspecified: false
# Minimum number of sortable properties (i.e. properties which are defined by the given order) present in the rule set before linting takes place
min_properties: 2
# Whether gaps between groups of properties should be enforced.
separate_groups: false
# Reports when you use an unknown or disabled CSS property (ignoring vendor-prefixed properties).
PropertySpelling:
enabled: true
# List of extra properties to allow
extra_properties: []
# List of existing properties to deny
disabled_properties: []
# Configure which units are allowed for property values.
PropertyUnits:
enabled: true
# List of allowed units
global: [
'ch', 'em', 'ex', 'rem', # Font-relative lengths
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
'deg', 'grad', 'rad', 'turn', # Angle
'ms', 's', # Duration
'Hz', 'kHz', # Frequency
'dpi', 'dpcm', 'dppx', # Resolution
'%'] # Other
# Hash of property names and their list of allowed units.
properties: {}
# 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
# Allow elements to qualify attributes
allow_element_with_attribute: false
# Allow elements to qualify classes
allow_element_with_class: false
# Allow elements to qualify ids
allow_element_with_id: false
# Don't write selectors with a depth of applicability greater than 3.
SelectorDepth:
enabled: false
# Maximum depth before reporting errors
max_depth: 3
# It is good practice to choose a convention for naming selectors.
SelectorFormat:
enabled: false
convention: hyphenated_lowercase # 'hyphenated_lowercase' or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
# Custom catch-all explanation if you do not want to use the built-in explanations
convention_explanation:
# Array of whitelisted names to not report lints for.
ignored_names: []
# Array containing list of types of selectors to ignore (valid values are attribute, class, element, id, placeholder)
ignored_types: []
# Convention for {type} selectors only, where {type} is one of attribute, class, id, or placeholder. See the convention option for possible values.
# {type}_convention: []
# Custom explanation for {type} selector convention, where {type} is one of attribute, class, id, or placeholder.
# {type}_convention_explanation: []
# Prefer the shortest shorthand form possible for properties that support it.
Shorthand:
enabled: true
# Array of allowed shorthand lengths
allowed_shorthands: [1, 2, 3, 4]
# Properties within rule sets should each reside on their own line.
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: false
# Commas in lists should be followed by a space.
SpaceAfterComma:
enabled: true
style: one_space # 'one_space' or 'no_space', or 'at_least_one_space'
# Comment literals should be followed by a space.
SpaceAfterComment:
enable: true
# Allow empty comments for // style
allow_empty_comments: true
style: one_space # 'one_space', or 'no_space' or 'at_least_one_space'
# Properties should be formatted with a single space separating the colon from the property's value.
SpaceAfterPropertyColon:
enabled: true
style: one_space # 'one_space', 'no_space', 'at_least_one_space', 'one_space_or_newline', 'at_least_one_space_or_newline', or 'aligned'
# 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: false
style: one_space # 'one_space', 'no_space', 'at_least_one_space' or 'one_space_or_newline'
# Variables should be formatted with no space between the name and the colon.
SpaceAfterVariableName:
enabled: true
# Operators should be formatted with a single space on both sides of an infix operator. These include +, -, *, /, %, ==, !=, >, >=, <, and <=.
SpaceAroundOperator:
enabled: false
style: one_space # 'one_space', 'at_least_one_space', 'no_space'
# Opening braces should be preceded by a single space.
SpaceBeforeBrace:
enabled: true
# Allow single line blocks to have extra spaces for nicer formatting
allow_single_line_padding: false
style: space # 'space' or 'new_line'
# Parentheses should not be padded with spaces.
SpaceBetweenParens:
enabled: true
# Spaces to require between parentheses
spaces: 0
# String literals should be written with single quotes unless using double quotes would save on escape characters.
StringQuotes:
enabled: true
style: double_quotes # 'single_quotes' or 'double_quotes'
# 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: true
# Don't use the all keyword to specify transition properties.
TransitionAll:
enabled: true
# Numeric values should not contain unnecessary fractional portions.
UnnecessaryMantissa:
enabled: true
# Do not use parent selector references (&) when they would otherwise be unnecessary.
UnnecessaryParentReference:
enabled: true
# 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
# Array of property names to check
properties: []
# Avoid vendor prefixes. That is, don't write them yourself.
VendorPrefix:
enabled: true
# Name of predefined identifier list to use (base or bourbon) or an array of identifiers
identifier_list: base # 'base' or 'bourbon' or '[]'
# Identifiers to lint, in addition to the identifier_list
additional_identifiers: []
# Identifers in the identifier_list and additional_identifiers to exclude from linting
excluded_identifiers: []
# Omit length units on zero values.
ZeroUnit:
enabled: true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment