LESS 编译后 css 样式改变，解决方法详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 LESS 来编写样式已经成为了一种趋势。LESS 提供了许多便捷的语法和特性，使得样式编写更为简单和高效。但是，有时候在 LESS 编译成 css 后，会发现一些样式和预期的不一样，甚至出现了错误。本文将为大家详解 LESS 编译后 css 样式改变的原因，以及如何解决这些问题。

LESS 编译规则

LESS 是一种 CSS 预处理器，可以将写在 LESS 文件中的样式编译成标准的 CSS 样式表。编译规则如下：

LESS 可以引用变量、函数、混合（Mixins）等，这些在编译后会被替换为其对应的值或代码块。
LESS 可以嵌套使用 CSS 规则。
LESS 提供了许多高级的特性，如条件语句、迭代器等。

以上规则看起来是非常便捷的，但是在编译后，就会出现样式改变的问题。

样式改变的原因

LESS 编译成 CSS 样式表后，会将所有的 LESS 代码和变量等替换为 CSS 代码，但有一些语法和特性在替换后会发生改变，导致 CSS 样式表和 LESS 文件的样式不一样，例如：

层级选择器

在 LESS 文件中，我们可以使用层级选择器来优化代码，例如：

.nav {
  li {
    a {
      color: #fff;
    }
  }
}

编译之后会变成：

.nav li a {
  color: #fff;
}

但是，如果在层级选择器内加入一个父级 class，就会出问题。例如：

-- -------------------- ---- -------
---- -
  -------- -
    --------- -
      ------- -
        ------ ----
      -
    -
  -
-

编译之后会变成：

.nav .submenu .menuitem:hover {
  color: red;
}

这个时候，样式就会改变。

没有括号的 mix-in

在 LESS 文件中，我们可以使用 mix-in 来定义一块代码，例如：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur @color;
}

然后我们可以在样式中引用这个 mix-in：

.box {
  .box-shadow;
}

编译之后会变成：

.box {
  box-shadow: 0 0 1px #000;
}

但是，如果 mix-in 没有括号，就会出现问题。例如：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur @color;
}

.rounded (@radius: 5px) {
  border-radius: @radius;
  .box-shadow;
}

这个时候，编译后的代码就变成了：

.rounded {
  border-radius: 5px;
}
.box {
  box-shadow: 0 0 1px #000;
}

这个样式和我们想要的不一样。

值的计算

LESS 中可以使用计算符号来计算 CSS 中的值，例如：

@width: 100px;
@height: (@width * 2);

编译之后会变成：

@width: 100px;
@height: 200px;

但是，在一些特殊情况下，值的计算会出现错误。例如：

@margins: 5px;
.box {
  margin: (@margins * 2.5);
}

这个时候，编译后的代码就变成了：

.box {
  margin: 5px * 2.5;
}

这个样式就出现了错误。

解决方法

层级选择器问题的解决

层级选择器的问题其实很简单，我们只需要在父级 class 中加一个 & 符号，LESS 就会将这个父级 class 和子级 class 连接起来。例如：

-- -------------------- ---- -------
---- -
  --------- - -- ------ - --
    --------- -
      ------- -
        ------ ----
      -
    -
  -
-

编译之后就会得到正确的代码：

.nav.submenu .menuitem:hover {
  color: red;
}

没有括号的 mix-in 问题的解决

没有括号的 mix-in 问题很容易解决，我们只需要在引用 mix-in 的时候加上括号即可。例如：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur @color;
}

.rounded (@radius: 5px) {
  border-radius: @radius;
  .box-shadow();
}

这个时候，编译后的代码就变成了：

.rounded {
  border-radius: 5px;
  box-shadow: 0 0 1px #000;
}

值的计算问题的解决

值的计算问题比较复杂，它和浏览器的计算机制有很大关系。但是我们可以通过一个东西叫做“屏蔽冒号空格”的方法来解决这个问题。这个方法是在值的计算中加上一对括号，例如：

@margins: 5px;
.box {
  margin: (@margins * 2.5);
  width: ((100%-@margins*2)/3);
}

这个时候，编译后的代码就变成了：

.box {
  margin: 12.5px;
  width: 28.33333%;
}

这个样式就正确了。

总结

LESS 编译后样式改变是一个问题，但是只要掌握了一些技巧，这个问题是可以很容易地解决的。我们在编写 LESS 样式时，要注意一些特殊情况，避免出现编译后样式和预期不一样的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6485bad448841e989447656e