.su-button--big.su-link {

Close

Force Element Nesting

Rule force-element-nesting will enforce the nesting of elements

Examples

When enabled, the following are disallowed:

div p {
  content: '';
}

.parent {
  &__child h1 {
    content: '';
  }
}

a[target="_blank"] span {
  content: '';
}

When enabled, the following are allowed:

div {
  p {
    content: '';
  }
}

.parent {
  &__child {
    h1 {
      content: '';
    }
  }
}

a[target="_blank"] {
  span {
    content: '';
  }
}

  } @else if ($position == 'left' or $position == 'right') {

Close

Brace Style

Rule brace-style will enforce the use of the chosen brace style.

Options

• style: '1tbs', 'stroustrup', 'allman' (defaults to 1tbs)
• allow-single-line: true/false (defaults to true)

Examples

style

When style: '1tbs' or style: 'stroustrup', the following are allowed. When style: 'allman' the following are disallowed:

.foo {
  content: 'foo';
}

.foo,
.bar {
  content: 'bar';
}

@function foo() {
  @return 'foo';
}

@mixin bar() {
  content: 'bar';
}

When style: 'allman', the following are allowed. When style: '1tbs' or style: 'stroustrup', the following are disallowed:

.foo
{
  content: 'foo';
}

.foo,
.bar
{
  content: 'bar';
}

@function foo()
{
  @return 'foo';
}

@mixin bar()
{
  content: 'bar';
}

Differences between 1tbs and stroustrup

When style: '1tbs', the following are allowed. When style: 'stroustrup' or style: 'allman', the following are disallowed:

@if ($foo) {
  $bar: 'bar';
} @else {
  $bar: false;
}

When style: 'stroustrup', the following are allowed. When style: '1tbs' or style: 'stroustrup', the following are disallowed:

@if ($foo) {
  $bar: 'bar';
}
@else {
  $bar: false;
}

---

allow-single-line

When allow-single-line: true, the following are allowed. When allow-single-line: false, the following are disallowed:

.foo { content: 'foo'; }
.foo, .bar { content: 'bar'; }

@if ($foo) { $bar: 'foo'; }

// Allowed with style: '1tbs', disallowed with style: 'stroustrup' or style: 'allman'
@if ($foo) { $bar: 'foo'; } @else { $bar: false; }

// Allowed with style: 'stroustrup' or style: 'allman', disallowed with style: '1tbs'
@if ($foo) { $bar: 'foo'; }
@else { $bar: false; }

    } @else if ($position == 'top') {

Close

Brace Style

Rule brace-style will enforce the use of the chosen brace style.

Options

• style: '1tbs', 'stroustrup', 'allman' (defaults to 1tbs)
• allow-single-line: true/false (defaults to true)

Examples

style

When style: '1tbs' or style: 'stroustrup', the following are allowed. When style: 'allman' the following are disallowed:

.foo {
  content: 'foo';
}

.foo,
.bar {
  content: 'bar';
}

@function foo() {
  @return 'foo';
}

@mixin bar() {
  content: 'bar';
}

When style: 'allman', the following are allowed. When style: '1tbs' or style: 'stroustrup', the following are disallowed:

.foo
{
  content: 'foo';
}

.foo,
.bar
{
  content: 'bar';
}

@function foo()
{
  @return 'foo';
}

@mixin bar()
{
  content: 'bar';
}

Differences between 1tbs and stroustrup

When style: '1tbs', the following are allowed. When style: 'stroustrup' or style: 'allman', the following are disallowed:

@if ($foo) {
  $bar: 'bar';
} @else {
  $bar: false;
}

When style: 'stroustrup', the following are allowed. When style: '1tbs' or style: 'stroustrup', the following are disallowed:

@if ($foo) {
  $bar: 'bar';
}
@else {
  $bar: false;
}

---

allow-single-line

When allow-single-line: true, the following are allowed. When allow-single-line: false, the following are disallowed:

.foo { content: 'foo'; }
.foo, .bar { content: 'bar'; }

@if ($foo) { $bar: 'foo'; }

// Allowed with style: '1tbs', disallowed with style: 'stroustrup' or style: 'allman'
@if ($foo) { $bar: 'foo'; } @else { $bar: false; }

// Allowed with style: 'stroustrup' or style: 'allman', disallowed with style: '1tbs'
@if ($foo) { $bar: 'foo'; }
@else { $bar: false; }

  .su-main-nav .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search {

Close

Force Element Nesting

Rule force-element-nesting will enforce the nesting of elements

Examples

When enabled, the following are disallowed:

div p {
  content: '';
}

.parent {
  &__child h1 {
    content: '';
  }
}

a[target="_blank"] span {
  content: '';
}

When enabled, the following are allowed:

div {
  p {
    content: '';
  }
}

.parent {
  &__child {
    h1 {
      content: '';
    }
  }
}

a[target="_blank"] {
  span {
    content: '';
  }
}

  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),

Close

No Duplicate Properties

Rule no-duplicate-properties will enforce that duplicate properties are not allowed within the same block.

Options

• exclude: [array of property names to be excluded from this rule] (defaults to empty array [])

Examples

When enabled, the following are disallowed:

.foo {
  margin: 0 0 15px;
  margin: 0;
}

Exclude

When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.

no-duplicate-properties:
  - 1
  -
    exclude:
      - display

When display is added to the exclude array the following would be allowed:

.display-block {
  display: flex;
  display: inline-block;
  float: right;
}

When display is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:

.display-block {
  display: flex;
  float: right;
  display: inline-block;
}

  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),

Close

No Duplicate Properties

Rule no-duplicate-properties will enforce that duplicate properties are not allowed within the same block.

Options

• exclude: [array of property names to be excluded from this rule] (defaults to empty array [])

Examples

When enabled, the following are disallowed:

.foo {
  margin: 0 0 15px;
  margin: 0;
}

Exclude

When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.

no-duplicate-properties:
  - 1
  -
    exclude:
      - display

When display is added to the exclude array the following would be allowed:

.display-block {
  display: flex;
  display: inline-block;
  float: right;
}

When display is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:

.display-block {
  display: flex;
  float: right;
  display: inline-block;
}