Sass 和 SCSS 是 Sass (Syntactically Awesome Stylesheets) 的两种语法。它们都被用于编写更加结构化和易于维护的 CSS。以下是它们在语法和特性上的主要对比：
1. 语法格式
Sass (缩进语法)
- 没有花括号
{}和分号;。 - 使用缩进来表示嵌套和层次关系。
navulmargin: 0padding: 0lidisplay: inline-blockmargin-right: 5px
SCSS (Sassy CSS)
- 类似于标准的 CSS，使用花括号
{}和分号;。 - 兼容所有现有的 CSS 代码。
nav {ul {margin: 0;padding: 0;}li {display: inline-block;margin-right: 5px;}
}
2. 变量
两者都支持变量，语法一致：
$primary-color: #333;nav {color: $primary-color;
}
3. 嵌套
两者都支持嵌套，但在 Sass 中，嵌套使用缩进，而在 SCSS 中使用花括号：
// Sass
navulmargin: 0padding: 0// SCSS
nav {ul {margin: 0;padding: 0;}
}
4. 混合器 (Mixins)
混合器的定义和调用在两者中相同：
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box { @include border-radius(10px); }
5. 插值
插值在两者中的用法相同：
$side: left;
.margin-#{$side} {margin-#{$side}: 10px;
}
6. 运算
两者都支持在样式中进行运算：
.container {width: 100% - 20px;
}
7. 继承
两者都支持样式继承：
.message {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {@extend .message;border-color: green;
}.error {@extend .message;border-color: red;
}
下次项目中用到它们的时候再在此补充！
)
