sass(scss) && less

Posted on | In
Words count in article: 303 | Reading time ≈ 1

Describe

都属于动态样式语言，可以使用变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等， 更易修改及对应的扩展。

sass

Sass has a word below! emm…

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

less

less in contrast!

It's CSS, with just a little more.

scss

scss 可以理解为是 sass 的扩展, 用{}取代了缩进

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

// sass
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

// scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Less && Sass

两者主要区别

  1. 编译环境
  • Less 是基于 JavaScript，在客户端处理
  • Sass 是基于 Ruby 的，在服务器端处理
  1. 变量符
  • Less 用 @
  • Sass 用 $
  1. 输出设置
  • Less 没有输出设置
  • Sass 提供 4 中输出选项：默认为 nested
    • nested：嵌套缩进的 css 代码
    • expanded：展开的多行 css 代码
    • compact：简洁格式的 css 代码
    • compressed：压缩后的 css 代码
  1. 条件语句
  • Less 不支持
  • Sass 支持，可以使用 if{}else{},for{}循环等