org.sonar.css.checks.l10n.less.variable-declaration-first.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of css-checks Show documentation

There is a newer version: 4.13

For a better readability and understandability, Less variables should be defined at the beginning of their block.
@charset and @import rules are allowed before Less variable declarations.

Noncompliant Code Example
@charset "UTF-8";

.mybox1 {
  color: @var1;
  @var1: blue; /* Noncompliant */
  @var2: green; /* Noncompliant */

  > .mybox2 {
    border-color: @var3;
    @var3: black; /* Noncompliant */
  }

  background-color: @var2;
  border: @var0;
}

@var0: 1px; /* Noncompliant */


Compliant Solution
@charset "UTF-8";

@var0: 1px;

.mybox1 {
  @var1: blue;
  @var2: green;
  color: @var1;

  > .mybox2 {
    @var3: black;
    border-color: @var3;
  }

  background-color: @var2;
  border: @var0;
}