sass与scss的区别

学习网址

https://www.qikegu.com/docs/2541 link

vue项目中使用scss : https://segmentfault.com/a/1190000009802725

scss安装:

npm install sass-loader@7.0.2 node-sass@4.14.1 --save-dev

相同点

二者都是CSS预处理器

区别

SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同
Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同
Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，

sass语法

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

  li
    display: inline-block

  a
    display: block
    padding: 5px 10px
    text-decoration: none
    color: orange

而 SCSS 的语法和CSS 语法非常类似

SCSS 语法

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

  li { 
    display: inline-block; 
    }

  a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: orange;
  }
}

现在通常都使用scss格式