sass、scss、less、的区别

Elena_Lucky_baby2024-12-23 22:23

sass、scss、less都是css预处理器，区别如下：

1语法格式：

sass采用缩进格式，不使用大括号和分号

css 复制代码

$color: #333
body
 background-color: $color;
 font-size: 14px;
 h1:
    color: $color

scss与css语法相似，使用大括号和分号

css 复制代码

$color: #333;

body {
  background-color: $color;
  font-size: 14px;
  h1 {
    color: $color;
  }
}

less同样类似css语法

css 复制代码

@color: #333;

body {
  background-color: @color;
  font-size: 14px;
  h1 {
    color: @color;
  }
}

2变量定义与使用：

sass和scss都使用$符定义变量

css 复制代码

$primary-color: #007bff;
$secondary-color: #6c757d;

.button {
  background-color: $primary-color;
  color: $secondary-color;
}

less使用@符号定义变量

css 复制代码

@primary-color: #007bff;
@secondary-color: #6c757d;

.button {
  background-color: @primary-color;
  color: @secondary-color;
}

3嵌套规则：

sass和scss都使用$符表示父元素

css 复制代码

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: #333;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

less使用～表示父元素

css 复制代码

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: #333;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

4混合（Mixins）：

sass和scss通过@mixin定义，@include调用

css 复制代码

@mixin button-style {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
  @include button-style;
}

less使用.mixin（）形式定义和调用

css 复制代码

.button-style() {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
 .button-style();
}

5继承：

sass、scss和less都使用@extend实现继承

css 复制代码

//sass
.error {
  border: 1px solid red;
  background-color: #f8d7da;
}

.serious-error {
  @extend.error;
  border-width: 3px;
}


//less

.error {
  border: 1px solid red;
  background-color: #f8d7da;
}

.serious-error {
  @extend.error;
  border-width: 3px;
}