新建vue.config.js module.exports = { css: { loaderOptions: { sass: { // 全局引入变量和 mixin additionalData: ` @import "@/assets/scss/variable.scss"; @import " ...
分类：
Web程序 时间：
2021-06-06 19:40:33
阅读次数：
0
1.1 前置 如果你已经了解 CSS 自定义属性和匹配系统主题设置的相关知识，略过此部分。 1.1.1 CSS 自定义属性 “自定义属性”（有时候也被称作“CSS变量”或者“级联变量”）是由CSS作者定义的。声明变量时，变量名前要加上 --，例如 --example: 20px 即是一个 css 自 ...
分类：
其他好文 时间：
2021-05-03 12:17:13
阅读次数：
0
一、css变量非全局 最近做项目，发现css变量一个有意思的特性，那就是变量作用域非全局。 举个例子，如下html和CSS： <div> <div>测试a</div> <div>测试b</div> <div>测试c</div> </div> .box { --color: red; color: v ...
分类：
Web程序 时间：
2020-12-15 12:26:37
阅读次数：
4
公共文件定义css变量,ie不兼容 /* 使用css变量 */ :root{ --bg-color:#fff; --border:1px solid #f6f4f1; } 内页其他css文件就可以这样套用： .demo{background-color: var(--bg-color); borde ...
分类：
Web程序 时间：
2020-07-22 15:51:45
阅读次数：
68
前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。 这个重要的 css 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 css 从此变得异常强大。 一、变量的声明 声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F; - ...
分类：
Web程序 时间：
2020-07-19 00:34:53
阅读次数：
89
设置 SVG 符号图标 内嵌的 SVG 的问题在于它们的冗余。你肯定不想在每次使用同一个图标时复制粘贴所有的坐标。这显得笨拙，可读性差，难以维护。使用 SVG 符号图标，你只要复制整个 SVG 元素一次，然后你就可以用一个引用在任何地方实例化它们。从内嵌 SVG 开始，隐藏它，并用一个 <symbo ...
分类：
Web程序 时间：
2020-06-15 10:33:43
阅读次数：
71
在开发中，css样式有一些属性往往需要重复使用，为了避免代码冗余，降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】，随着这些工具的流行，CSS变量也开始规范制定，目前很多浏览器都已经支持了，css变量的兼容性： 变量的定义： CSS中原生的变量定义语法是：--*，变量使 ...
分类：
Web程序 时间：
2020-06-11 14:56:16
阅读次数：
77
CSS 原生支持变量 不需要 各种预编译器 放 mdn 链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties 直接点 个人喜欢用 :root :root 伪类上设置自定义属性，然后在整个文档需要 ...
分类：
Web程序 时间：
2020-06-03 23:22:29
阅读次数：
88
近年来，一些动态特性已经开始成为 CSS 语言本身的一部分。 CSS变量 – 官方的术语为 “自定义属性” – 已经已经加入规范并且具有很好的浏览器支持，而 CSS mixins 目前正在开发中 。 在本文中，你将了解如何开始将CSS变量集成到CSS开发工作流程中，让你的样式表更好维护，且减少重复。 ...
分类：
Web程序 时间：
2020-05-31 11:05:00
阅读次数：
56
CSS 变量技术 具体用法 使用 -- 声明变量，使用 var() 函数获取变量。 :root{ --header-height: 70px; } body { --color: white; } .header { height: var(--header-height); } var() 函数还 ...
分类：
Web程序 时间：
2020-05-16 16:42:57
阅读次数：
72
