追格小程序可以使用scss和css变量吗?怎么应用?

追格官方小助手/ 2022年12月01日/ CSS教程/ 浏览 1050

追格小程序的一些用户希望能通过变量控制模板中的一些参数,例如背景色,文本颜色,字体,字号等,我们可以通过使用scss和css变量来实现这种需求。


首先我们简单了解一下css和scss的区别


CSS全称Cascading Style Sheets (层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。


Sass(scss前身)  全称(Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等g级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更g效地开发项目。


追格小程序可以很好的的支持scss,只需要遵循小程序开发规范


在app.vue文件中引入scss文件,例如:


@import "style/night.scss";


或者将已有的css改成scss也可以实现,例如:


把main.css改为main.scss,就可以使用scss在main.scss中进行开发


也可以在已有模板中进行修改例如:


index.vue中的


<style>改为<style lang="scss">,也可以使用scss进行开发

发表评论

暂无评论,抢个沙发...

客服 工单