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声明了一个这样的样式:

在我们的页面中可以直接使用:

css 复制代码
.text{
 color: $uni-color-success;
 font-size: 52rpx;
}

uni.scss中引入其他scss的方式:

css 复制代码
@import "@/common/scss/self.scss";

需要以@开头使用import导入,后面接绝对路径,绝对路径也要以@开头,最后以分号结尾。

注意uni.scss文件如果被修改,需要重新编译下项目,直接使用热更新可能会报错。

页面引入项目中定义的css的方式:

css 复制代码
@import "@/common/css/style.css"

与uni.scss中引入其他scss不同的是,这里无需以分号结尾。

style.css代码:

css 复制代码
view{
	font-size: 40rpx;
	box-sizing: border-box;
	background: pink;
}

注意:在uni-app设置样式时,为了实现自适应不同终端,应该使用rpx代替px.

在创建uni-app项目时,生成一个App.vue文件,我们可以在这里设置公共样式:

css 复制代码
<style>
	/*每个页面公共css */
</style>

实现样式的复用。

相关推荐
悠哉悠哉愿意34 分钟前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮44 分钟前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2741 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
★YUI★2 小时前
学习游戏制作记录(剑投掷技能)7.26
学习·游戏·unity·c#
蓝桉8022 小时前
opencv学习(图像金字塔)
人工智能·opencv·学习
rannn_1113 小时前
Java学习|黑马笔记|Day23】网络编程、反射、动态代理
java·笔记·后端·学习
go54631584653 小时前
中文语音识别与偏误检测系统开发
开发语言·人工智能·学习·生成对抗网络·数学建模·语音识别
996幸存者3 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
好奇龙猫4 小时前
日语学习-日语知识点小记-构建基础-JLPT-N3阶段(9):ようなN
学习