四、Vue中使用 stylus 抽取 CSS 公共变量，并使用

最新推荐文章于 2024-08-13 12:36:41 发布
最新推荐文章于 2024-08-13 12:36:41 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/panchang199266/article/details/90145677
本文介绍了一种在CSS中有效管理公共变量的方法，通过在src/assets/styles目录下创建variable.styl文件来存放如背景颜色等通用样式变量，并通过@import指令在项目中引用，实现变量的统一管理和复用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

对于 CSS 中一些公共变量，可以处理如下：
  第一步：在src/assets/styles目录下新建 variable.styl 文件，这里放置一些公共CSS变量，比如背景颜色：$bgColor = #00bcd4
  第二步：引入variable.styl： @import '~styles/variable.styl，使用公共变量：background $bgColor

在Webpack 5 中如何进行 CSS 常用配置？
youyacoder的博客
07-27 483
本文摘要主要通过实操讲解运用Webpack5CSS常用配置的方法步骤前文已谈到可以通过配置css-loader和，使webpack5具有处理CSS资源的能力。css-loader首先会分析出各个CSS文件之间的关系，把各个CSS文件合并为一大段CSS，然后将CSS文件编译为CommonJS模块，并把该模块引入到JS中。紧接着style-loader会从JS中提取出刚才引入的编译后的CSS，在页面的header中创建style标签，并插入该css。......
Vue基于Webpack的相关目录及配置解读
HCJS_Zee的博客
07-21 873
如今webpack已经成为前端项目开发过程中必不可少的一部分，一直以来都是大概了解一些内容，没有做详细的分析，这篇文章总结一下我的所获。 1、build文件（我们最终会把所有要发布的代码放到这里） 1.1 build.js （生产环境配置脚本-打包过程需要引入的配置信息） const ora = require('ora') //Elegant terminal spinner 优雅的终...
gobble-stylus:使用 Gobble 将 Stylus 转换为 CSS
05-30
gobble-stylus-2 将手写笔渲染为 CSS 作为狼吞虎咽转换。 注意：当我几周前做这个时，npm 上不存在“gobble-stylus”。 由于这个与那个的工作方式完全不同，我无论如何都要发布它。 不同之处在于，这是文件样式，允许多个 src/dest，以及definitions选项，这对我自己的用例至关重要。 安装 如果您还没有安装 gobble 安装。 这是您通常的 npm 安装。 npm install gobble-stylus-2 --save-dev 用法 在您的 gobblefile 中，您现在可以使用转换。 import 'gobble' ; export default gobble ( 'my-stylus-directory' ) . transform ( 'stylus-2' , opts ) ; 当您将第一个变换 arg 作为字符串提供时
vue使用CSS 变量
时光清浅处，一步一安然
08-04 6292
在我们知道什么是CSS变量之后，我们尝试把它在项目中运用起来，一些需要动态计算的值，我们就可以使用它快速的实现效果。以下为示例二，有的时候，一些属性我们可能需要根据一些条件计算得来，那么也能很好的去使用它。首先，我们要先知道什么是CSS变量，可以先看这篇。就能根据传入的值达到对应的效果呢？中书写的，那么如何不使用。......
vue中css变量的使用
weixin_53474595的博客
12-07 5960
1、css中声明变量--color：red2、使用变量color:var(--color) //color:red获取到全局声明变量值为reddata中声明变量colordata(){retrun {color:red}}或者使用this.$refs.devcolor.style.setProperty('--color',this.color)color:var(--color) //使用变量co
VUE2 抽取公共常量类
羽茉的博客
04-23 700
VUE2 抽取公共常量类
前端Vue日常工作中--CSS变量
梨子社区
01-30 1876
在模板中，我们使用了Vue的动态绑定 :style="{ '--main-color': mainColor }"，将mainColor数据属性的值传递给CSS变量 --main-color，从而动态改变主要颜色。在样式中，我们使用了CSS变量 --main-color 来定义背景颜色、文本颜色和按钮的背景颜色。--main-color 变量用于定义主要颜色，然后在 body 的背景和 h1 的颜色中使用这个变量。', // 初始化文本。body 元素的背景颜色就会应用 --main-color 的值。
微服务[学成在线] day12：基于 Nuxt.js 构建搜索前端工程
通往体面生活的路上
07-24 628
???? 知识点概览 为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。 本章节为【学成在线】项目的 day12 的内容 Nuxt.js 的基本使用 基于 Nuxt.js 开发搜索门户前端 目录 知识点结合实战应用会更有意义，所以这里我就不再对单个知识点进行拆分成单个笔记，内容会比较多，这里我们可以根据目录进行按需阅读。 文章目录???? 知识点概览目录一、搜索前端技术需求0x01 什
前端工程化
最新发布
qq_62079814的博客
08-13 211
Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境也就是说Node.js基于V8引擎来执行JavaScript代码，但是不仅仅只有V8引擎，V8可以嵌入到任何C++程序当中，无论是Chrome还是Node.js，事实上都是嵌入V8引擎来执行JavaScript代码但是在Chrome浏览器当中，还需要解析，渲染HTML，CSS等相关渲染引擎，另外还需要提供支持浏览器操作的API，浏览器自己的事件循环等。
前端换肤方案
小小鲸鱼的后花园
08-19 1055
主题换肤
css变量
最爱喝怡宝的博客
11-25 395
在/css中全局定义变量 :root定义全局样式 :root{ font-size: 50px; /* css中定义变量语法：--变量名:赋值的内容 （变量名不能用数字开头，不能是中文） */ --borderColor: lightblue; } css中使用变量：使用var()函数 .name{ width: 150px; height: 90px; .
CSS中的变量
热门推荐
weixin_52629158的博客
04-04 1万+
垂直方向没有，还是在段落标签的下面显示的。---这样写，也是不显示的。注意：--bar在申明的时候，没有值可以，但是不能把值写错。函数还可以使用第二个参数，表示变量的默认值。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。：定义某元素下的变量。只能在某元素身上，以及这个元素的内部的所有的标签去使用。这里绝对定位的top值 设置 了 top:0， 这个盒子会把段落标签p盖住。calc()函数支持 "+", "-", "*", "/" 运算；第二个参数不处理内部的逗号或空格，都视作参数的一部分。
CSS变量
qq_50563014的博客
06-19 146
我们在学习的编程语言中，都有变量能声明，那CSS中有没有呢？当然有了。且我认为大多数的特性和编程语言一样。如：作用域，css的变量声明的作用域分为全局或局部作用域。局部作用域局部变量只能在声明它的选择器内部使用。 ...
纯css定义样式变量，可全局使用
weixin_53474595的博客
12-09 1520
使用 CSS 变量会是更好的选择，有利于后期更改，精简代码，减少冗余，代码更直观，有利于响应式开发借助结构性伪类中的 :root{ } 中，在全局 :root{ } 中定义了一个 CSS 变量，命名为 --xxxx，名字前面一定要注意符号（--）
css中使用变量
liudanyang_21的博客
08-23 642
2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。 声明css变量的时候，变量名前面要加两根连词线（--）。变量名大小写敏感，--header-color和--Header-Color是两个不同变量。 var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分。 如果变量值是一个字符串，可以与其他字符串拼接.
纯CSS使用全局共享css变量
qq_60633200的博客
07-21 286
最近在开发网页，想做成响应式的，发现如果一个个写那些相同的width和height，太累了，后期维护修改也要一个一个的改，那么有没有修改一次全部生效的那种呢？在网上查了查，发现都是用sass或者less，纯css的几乎没有。这样我们就定义了一个全局的css变量【--main-width】我又懒得npm安装sass，所以就继续查。这篇博客，发现可以使用【var( )】，使用方法：使用 【var( ) 】
stylus引入公共变量及方法文件
GQ_cyan的博客
06-29 1015
目的：写一份公共变量以及样式方法，使VUE中所有页面以及组件公用。以修改变量改变全局风格。 方法环境：（vue项目中如下） 1，修改如下文件（combase.styl是我写得公共文件） var stylusOptions = { // variables.styl是我单独定义的stylus公共变量的文件，注意地址要引入正确 import: [path.join(__dirname, "../src/assets/combase.styl"), ] } 2，...
vue读取public下的txt文件
qq_42383970的博客
11-01 2121
// 读取文件 loadFile(name) { const xhr = new XMLHttpRequest() const okStatus = document.location.protocol === 'file:' ? 0 : 200 xhr.open('GET', name, false) xhr.overrideMimeType('text/html;charset=utf-8')// 默认为utf-8 xhr.se...
Vue中使用JSX语法实战与比较
"在Vue中使用JSX语法的实践与理解" 在Vue.js框架中，开发者通常使用模板语法来构建用户界面，但有时为了与其他框架（如React）保持一致性或在特定复杂场景下提高灵活性，可能会选择使用JSX（JavaScript XML）。本篇...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值