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>

实现样式的复用。

相关推荐
每次的天空17 分钟前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
重庆小透明23 分钟前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
许白掰2 小时前
【stm32】HAL库开发——CubeMX配置RTC,单片机工作模式和看门狗
stm32·单片机·嵌入式硬件·学习·实时音视频
AA-代码批发V哥3 小时前
CSS之布局详解指南
css
future14123 小时前
C#学习日记
开发语言·学习·c#
DIY机器人工房3 小时前
0.96寸OLED显示屏 江协科技学习笔记(36个知识点)
笔记·科技·stm32·单片机·嵌入式硬件·学习·江协科技
拾光拾趣录5 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
FogLetter5 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
我是小哪吒2.05 小时前
书籍推荐-《对抗机器学习:攻击面、防御机制与人工智能中的学习理论》
人工智能·深度学习·学习·机器学习·ai·语言模型·大模型