Sass.vs.Less | 简介与比较

时间 2020-05-30

标签 sass.vs.less sass 简介比较繁體版

原文原文链接

大家都不看的总集篇：从零开始的大前端筑基之旅(深刻浅出，持续更新～)
以为不错就顺手点个赞吧javascript

“我应该选择哪一种CSS预处理器语言?”css

什么是CSS 预处理器？

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增长了一些编程的特性，将 CSS 做为目标生成文件，而后开发者就只要使用这种语言进行CSS的编码工做。html

为何要使用CSS预处理器？

CSS仅仅是一个标记语言，不能够自定义变量，不能够引用。前端

CSS有具体如下几个缺点：java

语法不够强大，好比没法嵌套书写，致使模块化开发中须要书写不少重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，致使难以维护。

预编译很容易形成后代选择器的滥用web

使用预处理器的优势npm

提供CSS层缺失的样式层复用机制
减小冗余代码
提升样式代码的可维护性

Sass&Less

Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。由于 Less 和 CSS 很是像，Less 仅对 CSS 语言增长了少量方便的扩展，学习很容易。编程
sass，做为”世界上最成熟、最稳定、最强大的专业级CSS扩展语言”。兼容全部版本的css，且有无数框架使用sass构建，如Compass，Bourbon，和Susy。浏览器

SASS版本3.0以前的后缀名为.sass，而版本3.0以后的后缀名.scss。sass

Sass 和 Less 这类语言，其实能够理解成 CSS 的超集，它们在CSS 本来的语法格式基础上，增长了编程语言的特性，如变量的使用、逻辑语句的支持、函数等。让 CSS 代码更容易维护和复用。

但浏览器最终确定是只认识 CSS 文件的，它没法处理 CSS 中的那些变量、逻辑语句，因此须要有一个编译的过程，将 Sass 或 Less 写的代码转换成标准的 CSS 代码，这个过程就称为 CSS 预处理。

补充说明

ruby sass

Ruby Sass 是 Sass 的最初实现，可是已经于 2019年 3 月 26 日将寿终正寝。咱们已经再也不对它提供任何支持了，请 Ruby Sass 用户迁移到其它实现版本（LibSass 或 Dart Sass）。

why？

最开始，用 Ruby 编写 Sass 可以很方便地吸引已有的用户甚至整个 Ruby 生态来使用后来，Node.js 在前端开发中变得无处不在，而 Ruby 则逐渐淡入了后台。与此同时，Sass 项目的规模已经远远超出了做者最初的设想，对 Sass 在性能上的需求也已经超过了 Ruby 的能力。

Dart-sass

由于不怎么用sass，感谢@WashingtonHua的提醒

sass于2016年11月正式对外公布了alpha版本的Dart Sass 42项目，即他们使用Dart对Sass进行了重写。

根据sass-lang官方网站的说法：
Dart Sass是Sass的主要实现，这意味着它在其余实现以前先得到了新功能。它快速，易于安装，而且能够编译为纯JavaScript，从而能够轻松集成到现代Web开发工做流中。

纯 JS 版本比独立版本执行速度慢，可是它很容易集成到现有的工做流中，而且容许你经过 JavaScript 自定义函数和 importer。经过执行 npm install --save-dev sass 命令将其添加到项目中并经过 require() 引入。

经过 npm 安装时，Dart Sass 提供了一个 JavaScript API 用于兼容 Node Sass。彻底兼容的工做正在进行中

libSass

Sass 最初是用 Ruby 编写的。LibSass 是用 C/C++ 实现的 Sass 引擎。核心点在于其简单、快速、易于集成。
LibSass 只是一个工具库。如需在本地运行（即，编译 Sass 代码)，你须要一个 LibSass 的封装。目前已经有不少针对 LibSass 的封装了。

Sass C，个用 C 语言开发的封装
sass.cr 是针对 Crystal 编程语言的 LibSass 封装。
go-libsass 是最活跃的 Go 语言封装

具体参见 sass.bootcss.com/libsass

Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 能够运行在 Node 或浏览器端。一个合法的CSS代码段自己也是一段合法的LESS代码段。

LESS 提供了变量、嵌套、混合、操做符、函数等通常编程所需的抽象机制。

变量

变量容许咱们在一个地方定义一系列通用的值，而后在整个样式表中调用。

在作全局样式调整的时候，可能只须要修改几行代码就能够了。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
复制代码

编译为：

#header {
  width: 10px;
  height: 20px;
}
复制代码

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另外一个规则集的方法。假设咱们定义了一个类（class）以下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
复制代码

若是但愿在其它规则集中使用这些属性，只需像下面这样输入所需属性的类（class）名称便可

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
复制代码

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设咱们有如下 CSS 代码：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
复制代码

用 Less 语言咱们能够这样书写代码：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
复制代码

用 Less 书写的代码更加简洁，而且模仿了 HTML 的组织结构。

你还可使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
复制代码

运算（Operations）

算术运算符 +、-、*、/ 能够对任何数字、颜色或变量进行运算

注意，若是运算符两侧变量单位不一样，在加、减或比较以前会进行单位换算。计算的结果以最左侧操做数的单位类型为准。若是单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

没有单位则不作转换

// 全部操做数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
复制代码

乘法和除法不做转换。由于这两种运算在大多数状况下都没有意义，一个长度乘以一个长度就获得一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操做，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm
复制代码

你还能够对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
复制代码

函数（Functions）

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

函数的用法很是简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增长 5%，以及颜色亮度下降 25% 而且色相值增长 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
复制代码

导入（Importing）

你能够导入一个 .less 文件，此文件中的全部变量就能够所有使用了。若是导入的文件是 .less 扩展名，则能够将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";
复制代码

本文仅列举less的几种特性的简单介绍。关于less更详细介绍参见文末参考文档2

Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增长了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更增强大与优雅。

特点功能 (Features)

彻底兼容 CSS3
在 CSS 基础上增长变量、嵌套 (nesting)、混合 (mixins) 等功能
经过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式

变量

sass使用$符号来标识变量(老版本的sass使用!来标识变量。

$highlight-color: #F90;
复制代码

与CSS属性不一样，变量能够在css规则块定义以外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}
复制代码

在声明变量时，变量值也能够引用其余变量。

嵌套（Nesting）

基本用法与less相同

子组合选择器和同层组合选择器：>、+和~

这三个组合选择器必须和其余选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

这些组合选择器能够绝不费力地应用到sass的规则嵌套中。能够把它们放在外层选择器后边，或里层选择器前边：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
复制代码

sass会如你所愿地将这些嵌套规则一一解开组合在一块儿：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
复制代码

嵌套属性;

在sass中，除了CSS选择器，属性也能够进行嵌套。

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
复制代码

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套同样，sass会把你的子属性一一解开，把根属性和子属性部分经过中划线-链接起来，最后生成的效果与你手动一遍遍写的css样式同样：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
复制代码

对于属性的缩写形式，你甚至能够像下边这样来嵌套，指明例外规则：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
复制代码

混合器;

混合器使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，能够轻易地经过引用这个名字重用这段样式。

下边的这段sass代码，定义了一个很是简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
复制代码

而后就能够在样式表中经过@include来使用这个混合器。@include调用会把混合器中的全部样式提取出来放在@include被调用的地方。若是像下边这样写：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
复制代码

less及sass都支持混合器传参，具体内容参见参考文档二、3

导入SASS文件;

css有一个特别不经常使用的特性，即@import规则，它容许在一个css文件中导入其余css文件。然而，后果是只有执行到@import时，浏览器才会去下载其余css文件，这致使页面加载起来特别慢。

sass也有一个@import规则，但不一样的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着全部相关的样式被概括到了同一个css文件中，而无需发起额外的下载请求。

使用sass的@import规则并不须要指明被导入文件的全名。你能够省略.sass或.scss文件后缀

使用SASS部分文件

当经过@import把sass样式分散到多个文件时，你一般只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不须要生成对应的独立css文件，这样的sass文件称为局部文件。 sass局部文件的文件名如下划线开头。这样，sass就不会在编译时单独编译这个文件输出css

默认变量值;

!default用于变量，含义是：若是这个变量被声明赋值了，那就用它声明的值，不然就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
复制代码

在上例中，若是用户在导入你的sass局部文件以前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操做就无效。若是用户没有作这样的声明，则$fancybox-width将默认为400px。

相同与差别

相同之处：

Less和Sass在语法上有些共性，好比下面这些：

一、混入(Mixins)——class中的class；

二、参数混入——能够传递参数的class，就像函数同样；

三、嵌套规则——Class中嵌套class，从而减小重复的代码；

四、运算——CSS中用上数学；

五、颜色功能——能够编辑颜色；

六、名字空间(namespace)——分组样式，从而能够被调用；

七、做用域——局部修改样式；

八、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

不一样之处：

类别	Sass	less
环境	dart或其余	基于javascript，能够运行在 Node 或浏览器端
使用	复杂	简单(相对而言)
功能	复杂	简单(相对而言)
处理机制	服务端处理	能够运行在 Node 或浏览器端
变量	以 $ 开头	以 @ 开头
文件后缀	.sass 或. scss	.less

目前大部分的实现都是随着前端项目一块儿打包构建，只在学习或演示的时候才区分使用环境，因此不用在乎处理机制，以上只是单纯的对比二者自己。

请不要忘记Dart Sass，它快速，易于安装，而且能够编译为纯JavaScript，从而能够轻松集成到现代Web开发工做流中。

在Less中，仅容许循环数值。
在Sass中，咱们能够遍历任何类型的数据。但在Less中，咱们只能使用递归函数循环数值。
条件语句
Less 中并不支持条件语句，固然，能够经过内置函数 if 以及 and，or，not 这些来模拟条件语句。
在 Sass 中是支持条件语句的，但也不是像其余编程语言直接 if 这样经过保留字来编写，须要加个 @ 符号
框架- sass框架谁有空能够在评论区补充一下

用哪一个？

不知道～

LESS环境较Sass简单
LESS使用较Sass简单，大概？
相对而言，国内前端团队使用LESS的同窗会略多于Sass
从功能出发，Sass较LESS略强大一些
Sass在市面上有一些成熟的框架，好比说Compass，并且有不少框架也在使用Sass，好比说Foundation
就国外讨论的热度来讲，Sass绝对优于LESS
就学习教程来讲，Sass的教程要优于LESS(自己来讲，less官方文档也够用了)。

咱们用的less，编译的时候生成css

若是你收获了新知识，请点个赞吧～

-

本文收纳于：从零开始的大前端筑基之旅(深刻浅出，持续更新～)

推荐阅读：

聊聊css position属性及其sticky属性值的特性(吸顶特效)

回流(reflow)与重绘(repaint)，KFC与MC

viewport和1px | 工具人: 这是1px，设计师：不，这不是

可食用的「css布局干货」,纯Html示例，可调试 | 水平、垂直、多列

前端必须掌握的「CSS层叠上下文」讲解 | 纯手工示例，包教包会

参考文档：