uni-app学习笔记十七-css和scss的使用

SCSS 和 CSS的异同点

我们可以使用css和scss来设置样式。其中SCSS（Sassy CSS）是 CSS 预处理器 Sass（Syntactically Awesome Stylesheets）的一种语法格式，而 CSS（Cascading Style Sheets）是标准的样式表语言。以下是它们的异同点：

1. 最终输出：SCSS 和 CSS 最终都会被编译成浏览器可识别的标准 CSS。

2. 核心功能：都用于定义网页的样式（如颜色、布局、字体等）。

3. 语法兼容：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>

实现样式的复用。