Sass与SCSS的区别

最近项目有个需求，需要整体都改大一号字体。心慌慌的全局替换了一下，还好没有出什么其他问题。不过这也引发了我的思考，有没有一种方式，把这些固定的样式写成一种变量，去预编译 CSS。然后我就找到了 Sass。

在学习的过程中，Sass和SCSS傻傻分不清，查阅了诸多的资料，我决定记录一下自己的心得。

Sass是什么？

Sass是一种编译为CSS的样式表语言。它允许您使用变量，嵌套规则，混合，函数等，所有这些都使用完全CSS兼容的语法。Sass有助于保持大型样式表的组织良好，并且可以轻松地在项目内和项目间共享设计。

而 Sass 它包含两种语法，一种是 Sass,一种是 SCSS。

Sass 和 SCSS的区别?

• 后缀名

  • SCSS 的后缀名是.scss。

  • Sass 的后缀名是.sass。

• 语法

  • SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3。

  • Sass 的语法没有花括号，并且有严格的缩进，缩进的不同代表层级关系的不同，如果你是 Python 相关人员，用起来会更加容易上手。

  • SCSS 的语法没有严格的缩进，是用花括号来表示层级关系的，相比 Sass,它更加接近 CSS 的模样。

/*Sass*/
#Sass
  width: 30%
  background-color: #faa
  .childer
    color:red

/*SCSS*/
#sidebar {
  width: 30%;
  background-color: #faa;
  .childer{
    color:red;
  }
}

还有一种预编译 CSS语法，stylus, 更加自由个人开发者的话，可以使用。可以自行百度去了解一下。这里不做过多说明了。

参考资料

SCSS 与 Sass 异同

SCSS和Sass有什么区别？