scss、sass 和 css 的区别

时间:2022-05-22 00:11:05

项目中,会经常使用诸如scss、sass的style样式,它们和css有什么区别呢?


less大家应该都不陌生,同样的scsssass一样,它们都可以称为:CSS预处理器语言

简单来说,scsssass的区别,就在于 文件扩展名不同:“.sass”和“.scss
  1. sass是以严格缩进式语法规则来书写的,不带大括号{}和分号;
  2. SCSS的语法和`CSS书写语法类似

下面介绍一下它们的编译规则:

sass的编译

1. sass编译的方法:

  • 命令编译
  • 自动化编译
  • GUI工具编译

注意: “单文件编译””多文件编译”

2. sass输出方式:

输出方式 编译时,携带参数 参考图
sass嵌套输出方式 nested sass –watch test.scss:test.css --style nested 图1
sass展开输出方式 expanded sass –watch test.scss:test.css --style expanded 图2
sass展开输出方式 compact sass –watch test.scss:test.css --style compact 图3
sass展开输出方式 compressed sass –watch test.scss:test.css --style compressed 图4
截图 对比:

scss、sass 和 css 的区别

除了以上的介绍之外,sass还可以进行加法/减法乘法除法变量计算数字运算字符运算颜色运算,等等。

具体内容本文不介绍。

以上就是关于“scss、sass 和 css 的区别”的简单介绍。