CSS预处理器LESS 必须知道的一些基本知识

1. 变量： LESS 允许你使用变量来存储和重复使用值。变量以 @ 符号开头。

   @primary-color: #3498db;
   body {
     color: @primary-color;
   }
   

2. 嵌套规则： LESS 支持嵌套规则，使得样式表的结构更加清晰。这可以通过在样式中使用嵌套选择器来实现。

   nav {
     ul {
       margin: 0;
       padding: 0;
       list-style: none;
     }
     li {
       display: inline-block;
       margin-right: 5px;
     }
   }
   

3. 混合（Mixin）： 混合允许你在一个样式中引入另一个样式的规则，这有助于避免样式重复。

   .border-radius(@radius) {
     border-radius: @radius;
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
   }
   
   .box {
     .border-radius(5px);
     background-color: #eee;
   }
   

4. 导入文件： 使用 @import 可以将多个 LESS 文件组织成一个文件，以便更好地管理样式表。

   @import "variables.less";
   @import "mixins.less";
   
   body {
     color: @primary-color;
   }
   
   .box {
     .border-radius(5px);
   }
   

5. 运算： LESS 支持数字运算，这使得你可以对属性进行计算。

   @base: 5px;
   @padding: @base * 2;
   
   .box {
     padding: @padding;
   }
   

6. 条件语句： LESS 支持条件语句，允许你根据条件选择性地应用样式。

   @theme: dark;
   
   .box {
     color: white;
     @if (@theme = light) {
       background-color: #fff;
     } @else {
       background-color: #333;
     }
   }
   

这些基本概念可以帮助你更好地使用 LESS 来组织和管理样式表。了解这些特性将使你能够更高效地编写可维护的样式代码。