less用法

变量

$primary-color: #007bff;
$border-width: 1px;
$font-size: 14px;

嵌套

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

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

      a {
        color: $primary-color;
        text-decoration: none;

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

混合

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

.box {
  @include border-radius(10px);
  background-color: #fff;
  border: 1px solid #ddd;
}

继承

.error {
  border: 1px solid #f00;
  color: #f00;
}

.alert {
  @extend .error;
  background-color: #ffc;
}

条件语句

使用 @if、@else if 和 @else 实现条件语句。例如：

@if lightness($color) > 50% {
  background-color: #000;
  color: #fff;
} @else {
  background-color: #fff;
  color: #000;
}