ZhooooYuChEnG
ZhooooYuChEnG

css和less与sass的区别与使用

LESS、SASS 与 CSS 的区别深度剖析

总结: CSS 是基础，LESS 和 SASS 是基于 CSS 的有力扩展。在选择使用时，如果是小型项目、初学者或者追求快速上手，LESS 是不错的选择；而对于大型、大型、复杂项目，对样式灵活性、复用性要求高，且有专业团队支持，SASS 凭借其强大功能和活跃社区能发挥更大优势。

作为前端工程师，我们每天都在与样式打交道，CSS 是构建网页样式的基础，而 LESS 和 SASS 则是在 CSS 基础上衍生出的强大预处理器，为我们的样式开发带来诸多便利。今天，就来深入探讨一下它们之间的区别。

一、语法风格

  1. CSS
    • CSS 采用的是标准的声明式语法，由选择器、属性和值组成。例如：
body {
  color: #333;
  font-size: 16px;
}
  • 它的语法非常直白、简洁，遵循严格的层级结构，每个规则集对应一个或多个选择器，属性和值一一对应，通过大括号和分号来界定各个部分。
  1. LESS
    • LESS 语法与 CSS 较为相似，新手容易上手。它在 CSS 基础上增加了一些简洁的特性，如变量定义使用 @ 符号。例如：
@primary-color: #007bff;

.btn {
  color: @primary-color;
  background-color: lighten(@primary-color, 20%);
}
  • 这里定义了一个变量 @primary-color，并在按钮样式中使用，同时还利用了函数 lighten 来调整颜色亮度，使得样式编写更加灵活且易于维护，减少了重复代码。
  1. SASS
    • SASS 有两种语法格式，一种是类似 LESS 的缩进式语法（也叫 SCSS 语法），另 - 种是更具特色的缩进式纯 SASS 语法。以 SCSS 语法为例：
$primary-color: #007bff;

.btn {
  color: $primary-color;
  background-color: lighten($primary-color, 20%);
}
  • 与 LESS 类似，它使用 $ 符号定义变量，函数使用方式也相近。而纯 SASS 语法则更加简洁，不使用大括号和分号，通过缩进表示层级关系，例如：
$primary-color: #007bff
.btn
  color: $primary-color
  background-color: lighten($primary-color, 20%)
  • 这种语法对于熟悉 Ruby 等编程语言的开发者可能更易上手，但对于习惯 CSS 语法的人来说，初期可能需要一定适应时间。

二、功能特性

  1. 变量
    • CSS 本身没有变量的概念，这使得在大型项目中，当需要修改一个频繁使用的颜色、尺寸等样式值时，需要逐个查找替换，极易出错。
    • LESS 和 SASS 都引入了强大的变量功能，如前面所见，通过定义变量可以统一管理样式值，一处修改，多处生效。不仅可以定义普通的值变量，还能定义列表、映射等复杂数据结构变量，进一步拓展了样式的灵活性。
  2. 嵌套规则
    • CSS 中，如果要为一个在元素的子元素或后代元素设置样式，需要重复书写父元素选择器，例如：
nav ul {
  list-style: none;
}
nav ul li {
  display: inline-block;
}
  • LESS 和 SASS 允许嵌套规则书写，使得样式结构更加清晰。例如在 LESS 中：
nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}
  • 这种嵌套方式直观地反映了 HTML 元素的层级关系，在编写和阅读样式时更加方便，同时减少了选择器的重复书写。
  1. 混合（Mixin）
    • LESS 的混合可以理解为将一组样式声明封装起来，以便在其他地方复用。例如：
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.btn {
  @include.border-radius(3px);
}
  • 这里定义了一个带有默认参数的混合 .border-radius，在按钮样式中通过 @include 指令引入，实现了圆角样式的复用。
  • SASS 的混合功能类似，但更加强大，它可以定义参数、默认参数，甚至可以在混合内部使用逻辑判断，如 @if、@else 语句，让样式复用更加智能。例如：
@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

.btn {
  @include border-radius(3px);
}
  1. 函数与运算
    • CSS 中基本没有内置的函数运算用于样式值的动态生成。
    • LESS 和 SASS 都提供了丰富的函数库，涵盖颜色处理、数值运算等方面。如前面提到的 lighten 函数用于调整颜色亮度，还可以进行数值的加减乘除运算，方便在样式中根据设计需求灵活调整尺寸、
      间距等。例如在 SASS 中：
$width: 100px;
$new-width: $width + 20px;

.box {
  width: $new-width;
}

三、编译过程

  1. CSS
    • CSS 是浏览器直接识别的样式语言，无需编译，直接在 HTML 页面中通过 或