Sass（SCSS）、Less、Stylus 的区别

Sass是什么

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Scss是什么

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

Scss与Sass区别

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同 : Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同： Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号( ; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

实例

sass语法：

$font-stack: Helvetica, sans-serif // 定义变量 使用$
$primary-color: #333 // 定义变量

body 
	font: 100% $font-stack
	color: $primary-color

scss语法:

 $font-stack: Helvetica, sans-serif // 定义变量 使用$
 $primary-color: #333 // 定义变量
 body {
 	font: 100% $font-stack;
 	color: $primary-color;
}

编译出的css:

body {
	font: 100% Helvetica, sans-serif;
	color: #333;
}

由于scss是css的扩展，因此，所有在css正常工作的代码也能在SCSS中正常工作。

注意：只需添加花括号和分号就能转换为 SCSS 语法,并且SCSS语法对空格不敏感。

Less与Sass的区别

Less 也是一门 CSS 预处理语言，它扩充了 CSS 语言。与Sass有一定的区别，
Less的环境、使用方法比Sass简单，但Sass功能比Less强大。

关于变量在Less和Sass上的唯一区别就是：Less使用的是@声明变量，Sass使用的$来声明。

Stylus是什么

它的语法和 Sass 有一点点类似，但是最大的特点便是没有分号，没有冒号，没有大括号，通过缩进和换行。一切的定义方式都是按照编程的风格定义的，像编程一样的函数调用，像编程一样的变量定义，像编程一样的书写方式。

一段简单的Stylus：

$background-color = lightblue
add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

编译之后：

.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

关于Sass、Less、Stylus的语法

关于Sass、Less、Stylus的语法怎么使用，小柒推荐三篇文章：

crazy的蓝色梦想

发布了229 篇原创文章 · 获赞 169 · 访问量 4万+

私信关注