相信大家在开发的过程中肯定也遇见不少根据逻辑来控制页面样式问题的需求，又比如我页面很多相同的样式值要修改那么又懒得去找js部分的类名 那这时候就需要根据js设置css了，故此写下笔记以防忘记。
提示：以下是本篇文章正文内容，下面案例可供参考
简单来说 setProperty方法接受三个值 第一个是你要修改的属性 (必填) 第二个值是你要替换或者更改的新值 (选填) 第三个值是权重值 (选填) 可选值 ：important，undefined ，‘’
html 部分
if ( otherUser.length ) {
document.getElementsByTagName('body')[0].style.setProperty('--width-primary','177.8vh');
} else {
document.getElementsByTagName('body')[0].style.setProperty('--width-primary','204.8vh');
scss 部分
```javascript
:root {
--width-primary: 204.8vh;
--width-primarythree: 93.13vh;
--width-primaryhost: 90.13vh;
$minWidth: var(--width-primary);
$minWidththree: var(--width-primarythree);
$minWidthHost: var(--width-primaryhost);
.pattern3 {
width: calc(#{$minWidthHost} * 1.8535);
height: $minWidththree;
文档参考： 利用css3的var()实现运行时改变scss的变量值.
CSSStyleDeclaration.setProperty()
JavaScript CSSStyleDeclaration 对象
简单使用js控制scss(react同理)文章目录简单使用js控制scss(react同理)前言前言相信大家在开发的过程中肯定也遇见不少根据逻辑来控制页面样式问题的需求，又比如我页面很多相同的样式值要修改那么又懒得去找js部分的类名 那这时候就需要根据js设置css了，故此写下笔记以防忘记。提示：以下是本篇文章正文内容，下面案例可供参考简单来说 setProperty方法接受三个值 第一个是你要修改的属性 (必填) 第二个值是你要替换或者更改的新值 (选填) 第三个值是权重值 (选填
Webpack加载器，将$b变量声明注入到处理后的文件中，并以当前BEM块的名称作为值。
当我们开发Web应用程序时，我们在文件系统上使用BEM。 有时，块变得太大而无法轻松处理，并且当您突然需要重命名块时，必须在每个文件中重写该名称。 为了使操作更容易一些，我们决定通过$b变量来统一SCSS文件中的块名称。
同时，它允许我们使用模板生成SCSS文件，而不必关心那里的选择器的正确名称。
在您的项目中安装加载程序：
npm install --save-dev @funboxteam/scss-vars-loader
将其添加到项目的Webpack配置中，以便在sass-loader之前调用它：
module . exports = {
// ...
module : {
rules
title: 利用css3的var()实现运行时改变scss的变量值
tags: css,css3,var(),runtime change,scss
grammar_cjkRuby: true
create_date: 2018-12-24
var()介绍与使用
详情(MDN) IE无效,其余主流浏览器有效
var()使用
只能在{}内声明,作用范围由{}的选择器决定
<!-...
最近新喜欢上了css中的var以及calc()函数,这可以在不使用less或者scss的情况下实现变量以及函数的使用,在此记录一下
var变量的定义语法 : - -变量名 两个短横线加上变量名
var变量的使用 : var(- -变量名)
我们可以在root或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用
:root{}
可以在一个CSS文件中定义全局变量，供多个属性引用。var()
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
calc函
}:root伪类可以看做是一个全局作用域，在里面声明的变量，他下面的所有选择器都可以拿到body {
color : var(--color);
color : var(--Color);
}使用自定义属性来设置变量名，并使用特定的 ...
CSS之变量var变量是个好东西CSS变量var()语法Question
变量是个好东西
在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。
随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。
Chrome/Fire...
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
var函数有两个参数
var(custom-property-name, value)
custom-property-name 必需。自定义属性的名称（即变量），必需以 – 开头。
value 可选。备用值，在属性不存在的时候使用。
:root {
--theme-bg: rgb(28, 172, 198);
.box{
color: var(--theme-b
<template>
<span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span>
</template>
<script>
export default {
name: '',
要在Vue
中使用SCSS变量，需要先安装`sass-loader`和`node-sass`两个依赖包。然后，在Vue组件
中导入
SCSS文件，并在样式
中使用SCSS变量即可。
首先，安装依赖包：
npm install sass-loader node-sass --save-dev
然后，在Vue组件
中导入
SCSS文件：
```vue
<template>
<div class="example">
<h1>{{ message }}</h1>
</template>
<script>
import './example.
scss';
export default {
data() {
return {
message: 'Hello World!',
</script>
接着，在
SCSS文件
中定义
变量：
```
scss
$primary-color: #007bff;
.example {
color: $primary-color;
最后，
使用变量：
```vue
<template>
<div class="example">
<h1>{{ message }}</h1>
</template>
<script>
import './example.
scss';
export default {
data() {
return {
message: 'Hello World!',
</script>
<style lang="
scss">
$primary-color: #007bff;
.example {
color: $primary-color;
</style>
CSDN-Ada助手:
vue slot作用域插槽 slotProps 传值
不要太帅的洋哥:
vue slot作用域插槽 slotProps 传值
JokerSoulClub:
原生js调起摄像头
暮冬十七:
原生js调起摄像头
yzhhhhhhh_:
