variable-name-format.md

Variable Name Format

Rule variable-name-format will enforce a convention for variable names.

Options

• allow-leading-underscore: true/false (defaults to true)
• convention: 'hyphenatedlowercase' (default), camelcase, snakecase, strictbem, hyphenatedbem, or a Regular Expression that the variable name must match (e.g. ^[_A-Z]+$)
• convention-explanation: Custom explanation to display to the user if a variable doesn't adhere to the convention

Example 1

Settings:

• allow-leading-underscore: true
• convention: hyphenatedlowercase

When enabled, the following are allowed:

$hyphenated-lowercase: 1px;
$_leading-underscore: 1px;

.foo {
  width: $hyphenated-lowercase;
}

When enabled, the following are disallowed:

$HYPHENATED-UPPERCASE: 1px;
$_camelCaseWithLeadingUnderscore: 1px;

.foo {
  width: $snake_case;
}

Example 2

Settings:

• allow-leading-underscore: false
• convention: camelcase

When enabled, the following are allowed:

$camelCase: 1px;

.foo {
  width: $anotherCamelCase;
}

When enabled, the following are disallowed:

$HYPHENATED-UPPERCASE: 1px;
$_camelCaseWithLeadingUnderscore: 1px;

.foo {
  width: $snake_case;
}

Example 3

Settings:

• allow-leading-underscore: false
• convention: pascalcase

When enabled, the following are allowed:

$PascalCase: 1px;

.foo {
  width: $AnotherPascalCase;
}

When enabled, the following are disallowed:

$HYPHENATED-UPPERCASE: 1px;
$_camelCaseWithLeadingUnderscore: 1px;

.foo {
  width: $snake_case;
}

Example 4

Settings:

• allow-leading-underscore: false
• convention: snakecase

When enabled, the following are allowed:

$snake_case: 1px;

.foo {
  width: $another_snake_case;
}

When enabled, the following are disallowed:

$HYPHENATED-UPPERCASE: 1px;
$_snake_case_with_leading_underscore: 1px;

.foo {
  width: $camelCase;
}

Example 5

Settings:

• convention: strictbem

When enabled, the following are allowed:

$block-name__variable: 1px;
$block-name__variable_mod-name: 1px;
$block-name_mod-name__variable: 1px;

.foo {
  width: $block-name__variable;
}

When enabled, the following are disallowed:

$HYPHENATED-UPPERCASE: 1px;

.foo {
  width: $camelCase;
}

Example 6

Settings:

• convention: hyphenatedbem

When enabled, the following are allowed:

$block-name__variable: 1px;
$block-name__variable--mod-name: 1px;
$block-name--mod-name__variable: 1px;

.foo {
  width: $block-name__variable;
}

When enabled, the following are disallowed:

$HYPHENATED-UPPERCASE: 1px;

.foo {
  width: $camelCase;
}

Example 7

Settings:

• allow-leading-underscore: true
• convention: ^[_A-Z]+$
• convention-explanation: 'Variables must contain only uppercase letters and underscores'

When enabled, the following are allowed:

$SCREAMING_SNAKE_CASE: 1px;

.foo {
  width: $_LEADING_UNDERSCORE;
}

When enabled, the following are disallowed:

(Each line with a variable will report Variables must contain only uppercase letters and underscores when linted.)

$HYPHENATED-UPPERCASE: 1px;
$_snake_case_with_leading_underscore: 1px;

.foo {
  width: $camelCase;
}