首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

换肤功能(scsscss变量

/global.scss'; // 使用例子 .demo { color: $color-primary } 这样,只要更改 scss 全局变量的颜色值,就可以同步更改项目的颜色值 css 变量定义...这里就用到 css变量函数了:==var()== 之前有谈到使用 css变量以及赋值方法:Bilibili [冬] banner 早中晚切换效果 var() 函数用于插入自定义的属性值 两个参数...,这里就不过多探究了 坑来了 当我var() 函数获取的颜色值放进 mix 函数,居然报错: SassError: argument $color-2 of mix($color-1, $color...(' + sColorChange.join(',') + ',1)' } 最后只需要在==路由全局前置守卫==中计算颜色值,并赋值到 css 变量上, scss 全局变量中用 var() 函数引入...css 变量(各种颜色值) 换肤流程 通过接口获取主题色 --> js 计算衍生色值 --> 赋值到 css 变量 --> scss 全局变量var() 函数引入 css 变量 --> 页面样式引用

4.2K20

不容错过的CSS变量

[译] 不容错过的CSS变量 Bobi.ink 2019-07-06 原文链接: Don’t miss out on css variables 当我第一次听说CSS变量,我是抱着怀疑太多的...scss、sass、lessstylus这些CSS预处理器不是都有变量机制吗? 为什么还要使用它?...用法 选择器里面声明变量变量名以--作为前缀: div { --bgColor: deeppink; } 一个流行的方式是:root选择器定义变量,这相当于定于全局变量: :root {...SCSS/Less这些预处理器的变量可做不到(部分预处理器已支持编译到到CSS变量)。...几天前, 我通过David K的XState DEMO接触到了这个使用场景: 当用户鼠标拖拽, 通过CSS变量来确定选择框的定位(基于鼠标的开始位置当前位置): .selectbox { left

83610
您找到你想要的搜索结果了吗?
是的
没有找到

前端换肤的N种方案,请收下

(网友Soledad提供) 使用scss变量换肤相比覆盖样式 拓展性更强 将换肤的逻辑进行了收敛 生成多套皮肤css 使用覆盖样式实现与scss变量实现会把多套皮肤的样式都编译到一个css文件里面,如果有多套皮肤样式...-2: #ffcd32; } 页面对css变量做引入使用 // 页面使用 @import "../.....优点:会生成一套与css变量对应的css 缺点:构建根据css变量生成对应的css,换肤是运行时并不能生成对应的css。 换肤后样式: ?...官方概念:传统浏览器现代浏览器CSS自定义属性(又名“CSS变量”)提供客户端支持的ponyfill。...点击切换按钮,可见backgroundcolor确实都变了 ? ? 注:使用less 来实现换肤要注意 less 文件 html 编写的位置,不然很可能被其他css 文件所干扰导致换肤失败。

2.2K20

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之scss使用自定义主题、暗黑模式

这里主要说一下vite如何使用scss。...我们main.scss引入这个变量文件,就可以页面中使用啦。 之后就是我们如何使用这些变量覆盖element-plus的默认样式。...element-plus官网介绍了使用scsscss变量两种覆盖方式,这里我们介绍一下如何使用scss覆盖。...如果我们想要在js获取设置css变量,则可以使用下面的方法 // 获取css变量 // 全局变量el为document.documentElement el.style.getPropertyValue...但是无法使用背景色设置透明度,举个例子,我们设置背景透明色基本都是这样 background: rgba(255, 255, 255, 0.5); // 或者 background: rgba($

4.5K30

基于Vue、ElementUI的换肤解决方案

我们单独写一份样式表(css 文件 深空蓝.css),以一个特定的命名开头(比如 .blue-theme),然后在这个 css 文件,完成我们第二套皮肤的样式代码,然后当我们点击换肤的时候,就将 blue-theme...image.png 方案三、快速改变网站颜色 依据 Element 官网所介绍,Element 使用 SCSS 编写,如果你的项目也使用SCSS,那么可以直接在项目中改变 Element 的样式变量...补充说明: js 修改 scss 变量是有方案的,但是我们项目中无法做到动态换颜色,为什么呢?...那么你 js 改 scss 变量的方法在打包后的项目中是不起作用的。...2、根据用户选择的颜色,生成相应的颜色 /** * 传入一个颜色的HEX,得到这个颜色的深浅颜色数组 * 我们知道,我们默认的主色调蓝色,实际使用,还需要对应的浅蓝深蓝 * @param

5.1K30

现代 CSS 之高阶图片渐隐消失术

CSS ,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。.../* 使用位图来做遮罩 */ mask: url(masks.svg#star); /* 使用 SVG 图形的形状来做遮罩 */ } 当然,使用图片的方式后文会再讲...@property 的变量,--m-0 --m-0 然后,给它们设置了不同的过渡时间过渡延迟时间 hover 的一瞬间,再将这两个变量的值,都置为 0,也就是实现 linear-gradient...同时,我们借助了 SCSS 预处理器,寻找到规律后,极大的简化了 CSS 代码的书写量。...到今天,强大的 CSS 已经允许我们去做越来越多更有意思的动效,CSS @propery mask 这两个属性现代 CSS 发挥了非常重要的作用,非常建议大家认真掌握以下这两个属性。

2.3K30

Sass控制命令及函数知识整理

语法: @each $var in $var : 一个变量名, 一个列表,返回一个列表值,变量$var要在其中循环遍历, 该SassScript表达式返回一个符合$var条件的列表值...、> 等,除折号 - 下划线_ 都需要使用双引号括起,否则编译器进行编译的时候同样会报错:  示例: SCSS CSS  注意: ——单引号变成双引号:如—— .test4 {   content...使用map可以很容易的收集键的值动态的插入新的键值对。 a) map集合 原来的时候,sass声明定义变量的方法如下: $default-color: #fff !...sass的@import   a.可以用来引入SCSSSass文件   所有引入的 SCSS Sass 文件都会被合并并输出一个单一的 CSS 文件。   ...d.嵌套@import 虽然大部分时间只需顶层文件使用 @import 就行了, 但是,你还可以把他们包含在 CSS 规则 @media 规则

3.3K60

Sass-学习笔记【进阶篇】

语法: @each $var in $var : 一个变量名, 一个列表,返回一个列表值,变量$var要在其中循环遍历, 该SassScript表达式返回一个符合$var条件的列表值...使用map可以很容易的收集键的值动态的插入新的键值对。 a) map集合 原来的时候,sass声明定义变量的方法如下: $default-color: #fff !...sass的@import   a.可以用来引入SCSSSass文件   所有引入的 SCSS Sass 文件都会被合并并输出一个单一的 CSS 文件。   ...d.嵌套@import 虽然大部分时间只需顶层文件使用 @import 就行了, 但是,你还可以把他们包含在 CSS 规则 @media 规则。...@media Sass 的 @media 指令 CSS使用规则一样的简单, 但它有另外一个功能,可以嵌套在 CSS 规则

4.3K80

Sass-学习笔记【进阶篇】

语法: @each $var in $var : 一个变量名, 一个列表,返回一个列表值,变量$var要在其中循环遍历, 该SassScript表达式返回一个符合$var条件的列表值...使用map可以很容易的收集键的值动态的插入新的键值对。 a) map集合 原来的时候,sass声明定义变量的方法如下: $default-color: #fff !...sass的@import   a.可以用来引入SCSSSass文件   所有引入的 SCSS Sass 文件都会被合并并输出一个单一的 CSS 文件。   ...d.嵌套@import 虽然大部分时间只需顶层文件使用 @import 就行了, 但是,你还可以把他们包含在 CSS 规则 @media 规则。...@media Sass 的 @media 指令 CSS使用规则一样的简单, 但它有另外一个功能,可以嵌套在 CSS 规则

3.7K20

总结一下CSS变量的应用场景

前言 从写下第一篇关于CSS变量的文章《CSS变量 》,我就爱上了使用这个小东西(呆在一家不需要考虑浏览器兼容性的公司真舒服啊),后来,我又去学习CSS的进阶知识,学会了如何给一个CSS变量,定义属性默认值...-《带有类型默认值的CSS变量》。...项目中,我已经开始CSS变量,当然使用SCSS/LESS的项目除外。日常的使用,我总结了几个使用CSS变量的极佳场景,本文记录总结一下。...颜色/字体/尺寸的统一 这个无论是CSS变量,还是SCSS变量都是使用最多的场景,日常的开发,设计师通常会给我们一份,样式统一的UI设计。...例如RGB颜色值,开发的过程,手打肯定是不显示的,肯定是需要复制的,但是你用上了CSS变量,就只需要记住对应的变量名。

42730

手把手教你使用scss

为什么要使用SCSS变量计算: SCSS允许你使用变量来存储颜色、字体大小、间距等值。这使得整个样式表中统一管理修改这些值变得更加容易。...虽然使用SCSS拥有上面的众多好处,但是我们项目中选择使用SCSS还是CSS,是根据项目的需求、性质个人偏好来决定的。...SCSS最早是2006年由Hampton Catlin开发的,后来2009年由Natalie Weizenbaum维护。这种语言的设计是为了解决编写复杂可维护CSS的一些限制挑战。...SCSS声明变量 SCSS,我们可以使用美元符号($)来声明变量。...我们稍后会在文章更详细地介绍局部文件。 SCSS使用混合(Mixins) 混合(Mixin)是一种用于将一组CSS属性规则封装在一个可重用的代码块的特性。

48220

使用 PostCSS 插件让你的网站支持暗黑模式

当我 CSS 抽象语法树修改一些内容后,PostCSS 将语法树(AST)生成回 CSS 字符串。 核心就是 编译->转换-->生成 是不是跟 babel 相似呢?...目的 当前我有一份 less 样式 2 份颜色变量,我需要生成如下样式: image.png 这样我就可以 html 跟节点 添加删除 dark 这个样式来实现换肤了。..."border","box-shadow","stroke",] 3、如果这个 css 选择器, 没有 css 属性,就删除这个选择器 4、 css 选择器前面加上 .theme样式名称 老项目升级...原来的项目中可能没有区分颜色变量到单独的样式文件样式可能写了颜色绝对值。...正则查询遗漏颜色 当上述规则不能覆盖所有项目,开发者可以 VSCODE 输入正则((#[a-fA-F0-9]{3})|(#[a-fA-F0-9]{6})|^rgb) 找出代码的颜色,再一一提取成

79620

使用 PostCSS 插件让你的网站支持暗黑模式

当我 CSS 抽象语法树修改一些内容后,PostCSS 将语法树(AST)生成回 CSS 字符串。 核心就是 编译->转换-->生成 是不是跟 babel相似呢?...目的 当前我有一份 less 样式 2 份颜色变量,我需要生成如下样式: 这样我就可以 html 跟节点 添加删除 dark 这个样式来实现换肤了。...","border","box-shadow","stroke",] 3、如果这个 css 选择器, 没有 css 属性,就删除这个选择器 4、 css 选择器前面加上 .theme样式名称 老项目升级...原来的项目中可能没有区分颜色变量到单独的样式文件样式可能写了颜色绝对值。...正则查询遗漏颜色 当上述规则不能覆盖所有项目,开发者可以 VSCODE 输入正则((#[a-fA-F0-9]{3})|(#[a-fA-F0-9]{6})|^rgb) 找出代码的颜色,再一一提取成

81210

CSS预处理器之Sass

; } 4.2 Sass 变量的作用域 全局作用域 Sass 文件的任何地方定义的变量都具有全局作用域,可以整个文件访问使用。...这意味着文件的任何位置都可以使用变量,包括嵌套的规则块内部。 局部作用域 局部作用域是指在特定的规则块内部定义的变量,只能在该规则块内部使用。这些变量规则块外部是不可见的。...width: $width; // 错误,无法访问外部规则块的变量 } } 全局作用域的另一种定义方法 局部作用域中定义一个变量,它默认只在当前作用域内有效。...当你在其他 Sass 文件中使用 @import 导入 _public.scss 文件,只会将其中的变量混合器等内容引入到当前文件,而不会生成额外的 CSS 输出。...例如,另一个 Sass 文件中导入 _public.scss 文件: @import 'path/to/_public.scss'; /* 在这里可以使用 _public.scss 定义的变量混合器

11710

Sass-学习笔记【基础篇】

CSS的写法差别: 正如SassSCSS的区别一样, cssSCSS的书写方式无差别;甚至可以把现有的css文件直接改为“.scss”都可以直接使用。...二、Sass普通变量默认变量 -普通变量- 定义之后可以全局范围内使用。...大括号,当$shadow的参数数量值大于或等于1,表示有多个阴影值,反之调用默认的参数值"0 0 4px rgba(0,0,0,.3)". 2.调用混合宏@include 实际调用,其匹配了一个关键词...各有千秋 各有各的优点与缺点 a) Sass 的混合宏使用 //SCSS混合宏使用 @mixin mt($var){   margin-top: $var; } .block {   ...因此 Sass 做除法运算, 直接使用“/”符号做为除号,将不会生效,编译既得不到我们需要的效果,也不会报错。

4.8K50

Sass 基础(七)

之中:假设在实际中知道的颜色值是 #f36 或者 red,但在使用           ,需要给他们配上一个透明度,这个时候原来的 CSS ,首先需           要通过制图工具,得到...: rgba(#f36,.5); //css,这是无效的写法           $color: #f36;           $bgColor: orange;           ...语法:         在这个实例,我们使用了 Sass 的 rgba 函数,括号是函数的         参数,第一个参数是需要转换的颜色,他可以是任何颜色的表达方         式...来看一个简单的实例,首先顶一个一个颜色变量         $baseColor:#ad141e;       使用lighten()darken() 函数来修改10% 的亮度值:       ...除了可以使用 rgba、hsla transform 来控制颜色透明度       之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的       透明通道做处理,而后者是控制整个元素的透明度

83050

SCSS 学习笔记 vscode下载live sass compiler插件配置

使用占位符选择器%foo,然后通过 @extend 指令引入,尤其是制作 SCSS 样式库的时候,需要引入,希望 SCSS 能够忽略用不到的样式,达到简略代码的目的。...被导入的文件将合并编译到同一个 CSS 文件,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以导入的文件中使用。...2.9 SCSS 插值语句 #{ } 提出需求:如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件。 解决方法:只需要用 #{} 插值语句将变量包裹。...而使用 to 条件范围只包含的值不包含 的值【例:1-5,不包含 5】。 另外,var 可以是任何变量,比如 i; 但是必须是整数值。...2.14 SCSS @use 的使用 从其他 SCSS 样式表加载mixin,function变量,并将来自多个样式表的CSS组合在一起,@use加载的样式表被称为“模块”,多次引入只包含一次

34410

09-移动端开发教程-Sass入门

Sass的两种文件后缀 sass有两种后缀名文件:一种后缀名为sass,语法要求不使用大括号分号;另一种就是我们这里使用scss文件,这种和我们平时写的CSS文件格式差不多,使用大括号分号。...Sass变量注释 5.1 定义变量使用 Sass的变量必须是$开头,后面紧跟变量名,而变量变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)。...5.2 局部变量全局变量变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !...CSS 规则,有时也需要直接使用嵌套外层的父选择器,可以用 & 代表嵌套规则外层的父选择器。...这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前一些基础的文件预定义了很多基础的样式,然后实际应用不管是否使用了 @extend去继承相应的样式,都会解析出来所有的样式。

2.3K90

09-移动端开发教程-Sass入门

Sass的两种文件后缀 sass有两种后缀名文件:一种后缀名为sass,语法要求不使用大括号分号;另一种就是我们这里使用scss文件,这种和我们平时写的CSS文件格式差不多,使用大括号分号。...Sass变量注释 5.1 定义变量使用 Sass的变量必须是$开头,后面紧跟变量名,而变量变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)。...5.2 局部变量全局变量变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !...CSS 规则,有时也需要直接使用嵌套外层的父选择器,可以用 & 代表嵌套规则外层的父选择器。...这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前一些基础的文件预定义了很多基础的样式,然后实际应用不管是否使用了 @extend去继承相应的样式,都会解析出来所有的样式。

1.7K60
领券