Sass lass简介区别以及常用方法

一、Sass 简介

Sass（Syntactically Awesome Style Sheets）是一款成熟、稳定且功能强大的 CSS 预处理器。它通过引入变量、嵌套规则、混合宏、函数等特性，极大地提升了 CSS 的编写效率与维护性。Sass 拥有两种主要语法格式：SCSS（Sassy CSS）和缩进式语法（Sass 语法），其中 SCSS 由于与 CSS 语法高度相似，更为广大开发者所常用。

1.1 变量（Variables）

变量能够存储各类值，例如颜色、字体大小等，方便在样式表的不同位置复用。如此一来，若需对某个值进行修改，仅需调整变量的定义，所有引用该变量的地方便会自动更新。

scss

// 定义一个变量存储主要颜色
$primary - color: #1aad19; 

body {
  background - color: $primary - color; // 使用变量设置背景颜色
}

$primary - color 为变量名，按照 Sass 规则，变量名以 $ 开头。
#1aad19 是赋予变量的值，这里是一个十六进制表示的颜色值。
在 body 选择器中，background - color 属性引用了 $primary - color 变量，这就使得 body 的背景颜色被设定为 #1aad19。若后续要改变主要颜色，只需修改 $primary - color 的值，整个页面使用该颜色的元素背景色都会随之改变，极大地提高了样式修改的便捷性。

1.2 嵌套规则（Nested Rules）

Sass 允许在一个选择器内部嵌套其他选择器，这种方式能直观地体现 CSS 规则之间的层级关系，同时减少重复的选择器代码。

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

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

在此例中，ul 选择器嵌套于 nav 选择器内部，表明这些样式规则仅适用于 nav 元素内的 ul 元素。同理，li 选择器嵌套在 ul 选择器内部，意味着这些样式仅对 nav ul 中的 li 元素生效。这种嵌套结构与 HTML 文档的层级结构相呼应，使得样式表的逻辑更加清晰，便于阅读和维护。

1.3 混合宏（Mixins）

混合宏是一段可重复使用的样式代码块，其中可包含多个属性和值。通过定义混合宏，能够避免在不同位置重复编写相同的样式代码。

// 定义一个混合宏，用于设置圆角
@mixin rounded - corners($radius: 5px) { 
  border - radius: $radius;
  -webkit - border - radius: $radius;
  -moz - border - radius: $radius;
}

.button {
  @include rounded - corners(10px); // 使用混合宏，并传入半径值 10px
  background - color: $primary - color;
  color: white;
  padding: 10px 20px;
}

@mixin rounded - corners($radius: 5px) 定义了一个名为 rounded - corners 的混合宏，$radius 是一个可选参数，默认值为 5px。混合宏内部包含了 border - radius 及其浏览器前缀，用于实现圆角效果。不同浏览器对 border - radius 属性的支持存在差异，通过添加 -webkit - border - radius 和 -moz - border - radius 等前缀，可以确保在多种浏览器中都能呈现出圆角效果。
在 .button 选择器中，通过 @include rounded - corners(10px) 调用了这个混合宏，并传入参数 10px，这表示按钮的圆角半径为 10px。这样，.button 元素不仅应用了混合宏中定义的圆角样式，还可以继续添加其他样式属性，如背景颜色、文字颜色和内边距等。

1.4 计算方法（Calculations）

Sass 支持各种数学运算，如加、减、乘、除等，这在处理尺寸、间距等样式属性时非常有用。

$base - font - size: 16px;
$font - size - multiplier: 1.5;

body {
  font - size: $base - font - size * $font - size - multiplier; // 计算字体大小
}

首先定义了两个变量，$base - font - size 表示基础字体大小为 16px，$font - size - multiplier 是一个倍数变量为 1.5。
在 body 选择器中，通过乘法运算 $base - font - size * $font - size - multiplier 计算出最终的字体大小为 24px（16px * 1.5）。这种计算功能使得样式的调整更加灵活，例如在响应式设计中，根据不同的屏幕尺寸动态调整字体大小或元素间距。

二、Less 简介

Less（Leaner Style Sheets）同样是一种 CSS 预处理器，它提供了类似于 Sass 的功能，如变量、混合宏、嵌套规则等，但语法相对更为简洁。Less 的设计目标是让 CSS 开发更加高效，同时保持与 CSS 语法的高度兼容性。

2.1 变量（Variables）

与 Sass 类似，Less 也支持变量，用于存储可复用的值。

@primary - color: #1aad19; // 定义变量

body {
  background - color: @primary - color; // 使用变量
}

在 Less 中，变量以 @ 符号开头，@primary - color 是变量名，#1aad19 是变量的值。
在 body 选择器中，通过 background - color: @primary - color 使用该变量设置背景颜色，与 Sass 中变量的使用方式类似，只是语法上 Less 使用 @ 来标识变量。

2.2 嵌套规则（Nested Rules）

Less 同样支持选择器的嵌套，使样式表结构更加清晰。

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

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

此代码与 Sass 中的嵌套规则示例功能相同，ul 选择器嵌套在 nav 选择器内，li 选择器又嵌套在 ul 选择器内，通过这种嵌套方式明确样式的应用层级，使样式表的结构与 HTML 文档的层级相对应，便于理解和维护。

2.3 混合宏（Mixins）

Less 中的混合宏与 Sass 的混合宏类似，是可复用的样式代码块。

// 定义一个混合宏，用于设置圆角
.rounded - corners(@radius: 5px) { 
  border - radius: @radius;
  -webkit - border - radius: @radius;
  -moz - border - radius: @radius;
}

.button {
 .rounded - corners(10px); // 使用混合宏，并传入半径值 10px
  background - color: @primary - color;
  color: white;
  padding: 10px 20px;
}

.rounded - corners(@radius: 5px) 定义了一个名为 rounded - corners 的混合宏，带有一个可选参数 @radius，默认值为 5px。混合宏内部设置了圆角相关的属性及浏览器前缀。
在 .button 选择器中，通过 .rounded - corners(10px) 使用该混合宏，并传入 10px 作为半径值，使按钮应用圆角样式，同时还添加了其他样式属性。与 Sass 不同的是，Less 使用类名的形式来定义和调用混合宏，这种方式在语法上更加简洁直观。

2.4 计算方法（Calculations）

Less 同样支持数学运算，能在样式属性中进行计算。

@base - font - size: 16px;
@font - size - multiplier: 1.5;

body {
  font - size: @base - font - size * @font - size - multiplier; // 计算字体大小
}

先定义了 @base - font - size 为基础字体大小 16px，@font - size - multiplier 为倍数 1.5。
在 body 选择器中，通过乘法运算 @base - font - size * @font - size - multiplier 得出最终的字体大小为 24px（16px * 1.5）。这与 Sass 的计算功能类似，为样式的动态调整提供了便利。

三、Sass 和 Less 的区别

3.1 语法差异

变量声明：Sass 使用 $ 符号声明变量，例如 $primary - color: #1aad19;；而 Less 使用 @ 符号，如 @primary - color: #1aad19;。这是两者在变量声明上最直观的区别。
混合宏定义与调用：Sass 使用 @mixin 关键字定义混合宏，并通过 @include 调用；Less 则使用类名的形式定义和调用混合宏。例如，Sass 中定义 @mixin rounded - corners($radius: 5px) { /*... */ }，调用时 @include rounded - corners(10px);；Less 中定义 .rounded - corners(@radius: 5px) { /*... */ }，调用时 .rounded - corners(10px);。这种语法差异使得 Less 的混合宏在形式上更接近常规的 CSS 类定义，而 Sass 的语法则更具独特性，强调了其作为预处理器的特性。

3.2 功能特性

Sass：功能更为丰富，除了基本的运算功能外，还支持更多类型的运算，如列表运算等。它拥有更强大的函数库，例如在处理颜色相关的操作时，Sass 提供了众多函数用于颜色的调整、混合等。此外，Sass 的选择器嵌套和继承规则更为复杂和灵活，能够满足更高级的样式设计需求。例如，Sass 中的 @extend 指令可以实现选择器的继承，使得一个选择器可以继承另一个选择器的样式，这在构建复杂的样式结构时非常有用。
Less：语法简洁是其最大的优势，对于初学者而言更容易理解和上手。虽然在某些功能的丰富程度上不如 Sass，但对于大多数常见的样式开发需求，Less 已经能够很好地满足。例如，在一般的网站样式设计中，Less 的基本功能足以实现各种常见的布局和样式效果。

3.3 编译环境

Sass：最初是基于 Ruby 语言开发的，虽然现在也有其他语言的实现版本，但在安装和配置过程中，尤其是在 Ruby 环境下，相对较为复杂。这可能需要开发者对 Ruby 环境有一定的了解和掌握。例如，在 Ruby 环境中安装 Sass，需要先安装 Ruby 运行环境，然后通过 RubyGems 安装 Sass 宝石包。不过，随着技术的发展，现在也可以通过 npm 安装基于 JavaScript 的 Sass 实现（如 node - sass），这在一定程度上简化了安装过程。
Less：可以在 Node.js 环境中轻松使用，通过 npm 安装 less 包即可快速集成到项目中。对于熟悉 JavaScript 和 Node.js 的开发者来说，这种安装和使用方式非常便捷，能够快速上手进行样式开发。例如，在一个基于 Node.js 的项目中，只需在项目目录下执行 npm install less --save - dev 命令，就可以安装 Less，然后通过相关的构建工具（如 Webpack）配置后即可使用。

四、常见方法

4.1 颜色处理

Sass：Sass 提供了丰富的颜色函数，如 lighten、darken、saturate、desaturate 等，用于调整颜色的亮度、饱和度等属性。

$primary - color: #1aad19;
$lighter - color: lighten($primary - color, 20%); // 使主要颜色变亮 20%

.button {
  background - color: $primary - color;
  &:hover {
    background - color: $lighter - color; // 鼠标悬停时，背景颜色变亮
  }
}

lighten 函数接受两个参数，第一个是要处理的颜色变量 $primary - color，第二个是亮度调整的百分比 20%。通过这个函数，生成了一个比 $primary - color 亮度高 20% 的新颜色 $lighter - color。在 .button 选择器的 :hover 伪类中，使用 $lighter - color 作为背景颜色，实现了鼠标悬停时按钮背景颜色变亮的效果。
Less：Less 也有一些颜色处理函数，如 lighten、darken，使用方法与 Sass 类似。

@primary - color: #1aad19;
@lighter - color: lighten(@primary - color, 20%); // 使主要颜色变亮 20%

.button {
  background - color: @primary - color;
  &:hover {
    background - color: @lighter - color; // 鼠标悬停时，背景颜色变亮
  }
}

同样，lighten 函数在 Less 中用于调整颜色亮度，参数与 Sass 中的 lighten 函数类似。通过这种方式，在 Less 中也能实现与 Sass 类似的颜色处理效果。

4.2 媒体查询（Media Queries）

Sass：在 Sass 中，可以将媒体查询嵌套在选择器内部，使样式表结构更清晰。

.container {
  width: 80%;
  margin: 0 auto;

  @media (max - width: 768px) {
    width: 95%; // 在屏幕宽度小于等于 768px 时，容器宽度变为 95%
  }
}

在 .container 选择器内部，通过 @media (max - width: 768px) 定义了一个媒体查询。这表示当屏幕宽度小于等于 768px 时，.container 的宽度将从原来的 80% 变为 95%。这种嵌套方式使得与某个元素相关的不同屏幕尺寸下的样式都集中在该元素的选择器内部，便于维护和管理。
Less：Less 同样支持媒体查询的嵌套，语法与 Sass 类似。

.container {
  width: 80%;
  margin: 0 auto;

  @media (max - width: 768px) {
    width: 95%; // 在屏幕宽度小于等于 768px 时，容器宽度变为 95%
  }
}

在 Less 中，媒体查询的嵌套方式与 Sass 基本相同，都是在选择器内部通过 @media 关键字定义媒体查询条件，并设置相应的样式。这使得在不同屏幕尺寸下调整元素样式的逻辑更加清晰，易于理解和维护。

文章版权归作者所有，未经允许请勿转载。

THE END

前端开发技术点滴

Sass lass简介 区别 以及常用方法