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;
}