0%

sass、scss、less扫盲

发表于 更新于 分类于
为了像编程一样写css：sass、scss和less的异同

css的问题

css是对样式的表述，但对于程序员而言做这样的表述太过冗繁，于是有人就搞事情出来了。

解决这个问题的思路是：定义一种脚本语言书写样式描述，再根据这种描述文件生成css文件。

这个过程被称作css预处理。

sass出现

2006年11月28日sass诞生了。
sass的出现，可以像编程一样书写css样式了。
scss语法示例如下：

1
2
3
4
5
6
7
8
9
10
11
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

以上代码中的缩进是必要的，因为他们是代码块的区分标志。很明显，这时的sass写法更像是程序而不是css，虽然这样，但能像编程一样写css，忍了……

竞品less出现

2009年less登上舞台。

先上一段代码：

1
2
3
4
5
6
7
8
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

写惯了css的开发者会眼前一亮：假装在写css，其实哥在编程，低调实用。

枯木逢春开新花：scss

眼见着less拥有后来居上的趋势，sass不能坐以待毙。

于是sass搞出了另外一套语法：scss。

同样的内容用sass语法书写如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

意不意外惊不惊喜？ scss就像是sass和less的杂合体。

结论

这是一个相互学习的故事。sass和scss是一家，区分他们哥俩要看文件后缀，less上手最简单。