sass 编写 Less 的方法总结

前言

Sass和Less是当前Web开发领域中最常用的CSS预处理器，它们都拥有强大的语法和功能，可以大大提高前端开发效率和代码可维护性。本文将介绍如何使用Sass编写Less，以达到快速迁移Sass项目到Less的目的。

Sass与Less的语法对比

在Sass中，变量用$开头，例如：

$primary-color: #428bca;

而在Less中，变量用@开头，例如：

@primary-color: #428bca;

在Sass中，混合(mixin)用@mixin声明，函数用@function声明。而在Less中，声明混合和函数使用的是相同的关键字，都是.mixin。

在Sass中，属性嵌套可以方便地组织代码，例如：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      &.active {
        color: #fff;
        background: $primary-color;
      }
    }
  }
}

而在Less中，属性嵌套的写法是一样的，例如：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      &.active {
        color: #fff;
        background: @primary-color;
      }
    }
  }
}

可以看到，Sass和Less的语法有很多相似之处，但也存在一些差异。接下来，我们将介绍如何使用Sass编写Less。

Sass编写Less的方法

1. 变量

在Sass中:

$font-size: 16px;
$primary-color: #428bca;

body {
  font-size: $font-size;
  color: $primary-color;
}

在Less中:

@font-size: 16px;
@primary-color: #428bca;

body {
  font-size: @font-size;
  color: @primary-color;
}

2. 混合和继承

在Sass中:

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

.box {
  @include border-radius(5px);
}

.error {
  @extend .box;
  border-color: red;
}

在Less中:

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

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

.error {
  .box;
  border-color: red;
}

在Sass中，混合(mixin)和继承(extend)分别使用@mixin和@extend声明。而在Less中，混合和继承都使用.mixin声明。

3. 函数

在Sass中:

@function em($px, $base-font-size: 16px) {
  @return #{$px / $base-font-size}em;
}

h1 {
  font-size: em(24px);
}

在Less中：

.em(@px, @base-font-size: 16px) {
  unit: (@px / @base-font-size), em;
}

h1 {
  font-size: .em(24px).unit;
}

在Sass中，声明函数使用@function关键字，而在Less中，使用.mixin。函数可以对传入的参数进行操作并返回值。

4. 控制语句

在Sass中：

$color: red;
@if $color == red {
  color: red;
} @else {
  color: blue;
}

在Less中：

@color: red;
& when (@color = red) {
  color: red;
} otherwise {
  color: blue;
}

在Sass中，控制语句使用@if和@else。而在Less中，使用“when条件”和“otherwise”，可以看到，在Less中“when条件”比Sass的@if更加直接。

总结

本文介绍了如何使用Sass编写Less的方法，以达到快速迁移Sass项目到Less的目的。对于熟悉Sass的开发者而言，了解这些技能可以更高效地使用Less，提升CSS代码的可维护性。

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