SCSS 和 CSS的异同点
我们可以使用css和scss来设置样式。其中SCSS（Sassy CSS）是 CSS 预处理器 Sass（Syntactically Awesome Stylesheets）的一种语法格式，而 CSS（Cascading Style Sheets）是标准的样式表语言。以下是它们的异同点：
最终输出：SCSS 和 CSS 最终都会被编译成浏览器可识别的标准 CSS。
核心功能：都用于定义网页的样式（如颜色、布局、字体等）。
语法兼容：SCSS 完全兼容 CSS 语法，任何合法的 CSS 代码也是合法的 SCSS 代码。
不同点
| 特性 | SCSS (Sass) | CSS |
|---|---|---|
| 语法格式 | 支持嵌套、变量、混合等扩展语法，类似编程语言。 | 纯声明式语法，无嵌套或逻辑。 |
| 变量 | 支持变量（$primary-color: #333;）。 |
原生支持变量（--primary-color: #333;），但语法不同。 |
| 嵌套规则 | 支持嵌套（nav { ul { ... } }）。 |
不支持嵌套（需手动写完整选择器）。 |
| 混合（Mixins） | 支持代码复用（@mixin 和 @include）。 |
不支持，需重复代码或使用 CSS 变量。 |
| 继承 | 支持选择器继承（@extend）。 |
不支持，需通过类名或 CSS 变量模拟。 |
| 运算与函数 | 支持数学运算、颜色函数等（lighten()）。 |
有限支持（如 calc()）。 |
| 条件与循环 | 支持 @if、@for、@each 等逻辑控制。 |
不支持。 |
| 导入 | @import 可合并文件，避免多次 HTTP 请求。 |
@import 会导致额外 HTTP 请求。 |
| 注释 | 支持单行注释（//）和多行注释（/* */）。 |
仅支持多行注释（/* */）。 |
| 编译需求 | 需预编译为 CSS 才能被浏览器识别。 | 浏览器直接解析，无需编译。 |
使用场景
SCSS：适合大型项目，需要模块化、复用代码或逻辑控制时。
CSS：小型项目或需要减少工具链依赖时。现代 CSS（如变量、
calc()）已能解决部分需求。
如何使用
在uni-app项目中，系统为我们预置了一个uni.scss文件，里边设置了一些样式，我们可以使用里边声明的样式，也可以添加新的样式，或者引入外部样式。
使用uni.scss
比如uni.scss声明了一个这样的样式：
在我们的页面中可以直接使用：
.text{
color: $uni-color-success;
font-size: 52rpx;
}uni.scss中引入其他scss的方式：
@import "@/common/scss/self.scss";需要以@开头使用import导入，后面接绝对路径，绝对路径也要以@开头，最后以分号结尾。
注意uni.scss文件如果被修改，需要重新编译下项目，直接使用热更新可能会报错。
页面引入项目中定义的css的方式：
@import "@/common/css/style.css"与uni.scss中引入其他scss不同的是，这里无需以分号结尾。
style.css代码：
view{
font-size: 40rpx;
box-sizing: border-box;
background: pink;
}注意：在uni-app设置样式时，为了实现自适应不同终端，应该使用rpx代替px.
在创建uni-app项目时，生成一个App.vue文件，我们可以在这里设置公共样式：
<style>
/*每个页面公共css */
</style>实现样式的复用。