LESS 常用语法介绍

LESS 是一种动态样式表语言，是 CSS 的一种扩展，可以简化 CSS 的开发方式。它提供了许多功能，如变量、嵌套、混合等，这使得样式表的编写更加灵活和有效率。

变量

使用变量可以提高代码的可维护性和复用性。在 LESS 中，通过 @ 符号定义变量，例如：

@primary-color: #428bca;

.btn {
  color: @primary-color;
}

这里定义了一个名为 primary-color 的变量，值为 #428bca。在 .btn 中使用 @primary-color 可以让颜色更易于修改，而不用一个个更改。

嵌套

通过嵌套，可以让样式表更加易于阅读和理解。例如：

header {
  h1 {
    font-size: 28px;
  }

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        display: inline-block;
        margin-right: 10px;

        a {
          color: #333;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

这里可以清晰地看到每个元素的样式属性，不用再去查找它们所属的父元素。

混合

通过混合，可以将通用的样式集中在一处，以便重复使用。例如：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.btn {
  .border-radius(5px);
}

这里定义了一个名为 border-radius 的混合，它接受一个参数 @radius。在 .btn 中使用 .border-radius(5px) 可以将圆角属性应用于按钮上。

继承

通过继承，可以让样式表更加简洁和易于维护。例如：

.error {
  color: red;
}

.warning {
  @extend .error;
  font-weight: bold;
}

这里 .warning 继承了 .error 的样式，同时又增加了 font-weight 属性。这样可以减少重复的代码，并且在修改时更方便。

运算

通过运算，可以根据需要进行数值计算。例如：

@base: 10px;
@height: @base * 2;

#header {
  height: @height;
}

这里定义了一个名为 base 的变量，值为 10px。然后通过 @height 计算得到 20px，最后应用于 #header 元素上。

总结

LESS 为前端开发提供了很多方便的功能，包括变量、嵌套、混合、继承和运算。使用这些功能可以提高代码的可读性、可维护性和复用性，从而更好地完成开发任务。希望这篇文章能够帮助大家更好地了解 LESS 的基本语法和功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b5c160add4f0e0ffe7ff68