📜  SCSS 和 SASS 有什么区别?

📅  最后修改于: 2021-09-02 05:00:43             🧑  作者: Mango

SASS(Syntactically Awesome Style Sheets)是一种预处理脚本语言,可以编译或解释成 CSS。 SassScript 本身是一种脚本语言,而 SCSS 是 SASS 的主要语法,它建立在现有 CSS 语法之上。它使用分号和括号,如 CSS(级联样式表)。
SASS 和 SCSS 可以相互导入。 Sass 实际上通过数学和变量支持使 CSS 更加强大。
让我们列出 SASS 和 SCSS 之间的主要区别。

  • 当我们需要原始语法时使用 SASS,SCSS 不需要代码语法。
  • SASS 遵循严格的缩进,SCSS 没有严格的缩进。
  • SASS 的语法松散,没有空格且没有分号,SCSS 更类似于 CSS 样式,并且必须使用分号和大括号。
  • SASS 文件扩展名为 .sass,SCSS 文件扩展名为 .scss。
  • SASS 比 SCSS 拥有更多的开发者社区和支持。

SCSS 示例:

SCSS
/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px;
  
/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}


SASS
/* SASS */
  
$primary-color: green
$primary-bg: red
  
body 
  color: $primary-color
  background: $primary-bg


输出 CSS:

body {
  background-color: green;
  color: red;
  font-size: 25px;
}
/* now this can apply resulting html file */

SASS 示例:

SASS

/* SASS */
  
$primary-color: green
$primary-bg: red
  
body 
  color: $primary-color
  background: $primary-bg

输出 CSS:

/* CSS */
body {
  color: green;
  background: red;
}